|
| 1 | +# BasalStyle |
| 2 | + |
| 3 | +Folha de estilo para prototipação rápida de wireframes, sites e formulários. |
| 4 | + |
| 5 | +## Sobre o Grid |
| 6 | + |
| 7 | +O Grid default tem entrelinha de 30px (baseline) e 12 colunas de 95px. As colunas totalizam uma largura máxima de 1140px (`desktop-12`). |
| 8 | + |
| 9 | +``` |
| 10 | +<div class="row desktop-12 container"> |
| 11 | + <div class="row"> |
| 12 | + <div class="desktop-6"></div> |
| 13 | + <div class="desktop-3"></div> |
| 14 | + <div class="desktop-3"></div> |
| 15 | + </div> |
| 16 | +</div> |
| 17 | +``` |
| 18 | +A classe `container` centraliza o bloco, por isso é comum usá-la junto com uma classe de tamanho de coluna, para definir a largura máxima. Existe um exemplo completo no documento`index.html`. Caso queira fazer um site com largura máxima de 10 colunas (950px de largura máxima), segue um exemplo: |
| 19 | + |
| 20 | +``` |
| 21 | +<div class="row desktop-10 container"> |
| 22 | + <div class="row"> |
| 23 | + <div class="desktop-7"></div> |
| 24 | + <div class="desktop-3"></div> |
| 25 | + </div> |
| 26 | +</div> |
| 27 | +``` |
| 28 | + |
| 29 | +O funcionamento de linha e colunas segue o princípio de um bloco (div, header, section, article,...) com a classe "row" envolvendo `DIV` de colunas. |
| 30 | + |
| 31 | +Deve existir dentro da `row` um somatório de classes de colunas similar a largura máxima aplicada no container (mais detalhes em **Espaço entre colunas**). |
| 32 | + |
| 33 | +### Layout "responsivo" |
| 34 | + |
| 35 | +Não é necessário aplicar as classes "tablet" e "mobile" para o grid ficar "responsivo". Quando o site está sendo apresentado na tela com largura inferior a 800px, todas as classes de `desktop-#` se modificam e ajustam-se em uma única coluna. |
| 36 | + |
| 37 | +As classes de organização do layout para mobile funcionam entre a largura de 800px até 700px (`tablet-[1,2,3]`) e de 700px até 320px (`mobile-2`). |
| 38 | + |
| 39 | +Um exemplo com quebras no layout: |
| 40 | + |
| 41 | +``` |
| 42 | +<div class="row"> |
| 43 | + <div class="desktop-5 tablet-2 mobile-2"></div> |
| 44 | + <div class="desktop-5 tablet-2 mobile-2"></div> |
| 45 | + <div class="desktop-2"></div> |
| 46 | +</div> |
| 47 | +``` |
| 48 | +Qual é o resultado: |
| 49 | + |
| 50 | +1. **Em telas acima de 800px de largura (`desktop-#`)** |
| 51 | +O layout fica definido em 3 colunas flexíveis com largura máxima total de 1440px. |
| 52 | +2. **Abaixo de 800px até 700px (`tablet-#`)** |
| 53 | +As primeiras duas colunas dividirão a tela em 50% de largura cada. A última coluna ficará abaixo delas e ocupará toda a largura (100%). |
| 54 | +2. **Abaixo de 700px até 320px (`mobile-#`)** |
| 55 | +O layout será semelhante ao da tablet. |
| 56 | + |
| 57 | +O emprego das classes `tablet-#` e `mobile-#` deve ser avaliado com critério, para não incorrer em erros de usabilidade, no caso de conteúdos que não ficam bem apresentados em telas pequenas. |
| 58 | + |
| 59 | +### Espaço entre colunas de texto (Gutter) |
| 60 | + |
| 61 | +Para afastar o conteúdo de texto e imagem do limite da coluna, existem as classes: |
| 62 | +* `.gutter` (aplica um espaço em ambos os lados), |
| 63 | +* `.gutter-left` (aplica um espaço apenas na esqueda) e |
| 64 | +* `.gutter-right` (aplica um espaço apenas na direita) |
| 65 | + |
| 66 | +``` |
| 67 | +<div class="row"> |
| 68 | + <div class="desktop-2 gutter-right "></div> |
| 69 | + <div class="desktop-7 gutter"></div> |
| 70 | + <div class="desktop-3"></div> |
| 71 | +</div> |
| 72 | +``` |
| 73 | + |
| 74 | +### Espaço entre colunas |
| 75 | + |
| 76 | +As classes `col-left-[1-11]` e `col-right-[1-11]` aplicam um espaço real entre colunas. E por isso, deve fazer parte do somatório de colunas no bloco que forma a linha. Estas classes só atuam em telas acima de 800px. |
| 77 | + |
| 78 | +``` |
| 79 | +<div class="row"> |
| 80 | + <div class="desktop-7 col-right-2"></div> |
| 81 | + <div class="desktop-3 gutter"></div> |
| 82 | +</div> |
| 83 | +``` |
| 84 | + |
| 85 | +### Customização |
| 86 | + |
| 87 | +Para qualquer customização utilize o arquivo `_custom.sass` e execute o comando: |
| 88 | + |
| 89 | +```bash |
| 90 | +sass --update sass/style.sass:style.min.css --stop-on-error --sourcemap=none --no-cache --style compact |
| 91 | +``` |
| 92 | + |
| 93 | +### Bugs, Sugestões e Funcionalidades |
| 94 | + |
| 95 | +Relate sua questão ou pedido de funcionalidades no [GitHub Issues](https://github.com/viniciusbraga/basalstyle/issues). |
| 96 | + |
| 97 | + |
| 98 | +## License |
| 99 | + |
| 100 | +The MIT License (MIT) |
| 101 | + |
| 102 | +Copyright (c) 2014 Vinicius Braga <contato at viniciusbraga dot com> |
| 103 | + |
| 104 | +Permission is hereby granted, free of charge, to any person obtaining a copy |
| 105 | +of this software and associated documentation files (the "Software"), to deal |
| 106 | +in the Software without restriction, including without limitation the rights |
| 107 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 108 | +copies of the Software, and to permit persons to whom the Software is |
| 109 | +furnished to do so, subject to the following conditions: |
| 110 | + |
| 111 | +The above copyright notice and this permission notice shall be included in |
| 112 | +all copies or substantial portions of the Software. |
| 113 | + |
| 114 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 115 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 116 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 117 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 118 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 119 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
| 120 | +THE SOFTWARE. |
0 commit comments