Grid Flexível - projeto base

Projeto base de página web HTML5 + CSS3 com menu lateral responsivo e grid de elementos flexível.

O que é um projeto base?

Um projeto base é um projeto com a estrutura básica de arquivos e alguns componentes já integrados. São ótimos pontos de partida para começar seu website.

O que o projeto 'grid flexível' oferece?

Este projeto base já vem pronto com o funcionamento de um menu que se adequa ao tamano da tela do dispositivo em que o website for acessado, com as interações de abertura e fechamento do menu definidas.

  • dispositivos grandes (>500px): menu que mostra todos os itens de navegação
  • dispositivos pequenos (<=500px): menu que é acionado por um botão e abre pela lateral nos dispositivos menores.

Além disso, ele possui um grid flexível de elementos, que faz com que o conteúdo se adeque dinamicamente ao tamanho da tela do dispositivo.

preview

Organização dos arquivos

flex-grid/
├── img/                          -- pasta que contém todas as imagens
│   ├── logo.png
│   ├── menu-trigger-images.svg
│   └── img-1.svg ... img-8.svg   -- imagens-exemplo
├── scripts/
│   └── header.js                 -- interações do menu responsivo
├── styles/
│   ├── grid.css                  -- estilos do grid flexível
│   ├── header.css                -- estilos do header flexível responsivo
│   ├── reset.css                 -- reset navegador
│   └── style.css                 -- folha de estilos principal
└── index.html                    -- home

Desenvolvido por

Habemus

License

Creative Commons Attribution License