Flex grid starter project

A starter HTML5+CSS3 website project with a collapsible responsive side menu and a flex grid.

What is a starter project?

A starter project is a project with the basic file structure and some components readily integrated. They are great for starting your own website.

What's inside 'flex grid'?

This starter project comes with a menu that adequates itself to the screen width of the device in which the website was opened.

  • in large devices (>500px) the navigation menu is displayed in the top of the page
  • in smaller devices (<=500px) the menu is hidden by default and can be opened by clicking on a menu button on the top left of the page

Furthermore, it includes a flex grid of elements that makes content dinamically fluid acording to screen size of device.

preview

File structure

flex-grid/
├── img/                          -- directory containing all images
│   ├── logo.png
│   ├── menu-trigger-images.svg
│   └── img-1.svg ... img-8.svg   -- placeholder images
├── scripts/
│   └── header.js                 -- responsive header interactions
├── styles/
│   ├── grid.css                  -- flex grid styles
│   ├── header.css                -- responsive header styles
│   ├── reset.css                 -- browser resets
│   └── style.css                 -- main stylesheet
└── index.html                    -- homepage

Developed by

Habemus

License

Creative Commons Attribution License