Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.

1. Um guia bem básico de
BOOTSTRAP + LESS

2. O Bootstrap
é:
Basicamente é um
coleção (framework) de
vários elementos e
funções personalizáveis
para desenvolvimento
de projetos web.

3. E as suas vantagens
são:
• Padronização de Interface e código
• Opensource
• Documentação detalhada
• Cross-browser
• Otimização para layouts responsivos

4. GRID.

5. Essa
Grid?

6. Definição
No design gráfico:
“Um grid é um conjunto específico de relações de
alinhamento que funcionam como guias para a
distribuição de elementos num formato.”
AGNER, Luiz- Fundamento do Grid
- http://pt.slideshare.net/agner/a-construo-do-grid
http://joeycofone.blogspot.com.br/2010/11/letter-to-grid.html

7. http://www.vanseodesign.com/web-design/grid-anatomy/
“The grid is the most
vivid manifestation of
the will to order in
graphic.”

8. http://www.graphics.com/article-old/brief-history-grids

9. Tipos de Grid
http://joeycofone.blogspot.com.br/2010/11/letter-to-grid.html
Tipos de Grid
Retangular
(Manuscrito,
‘single column’ ou ‘block grid’)
Colunas Modular Hierárquico
http://www.vanseodesign.com/web-design/grid-types/grid.html

10. E suas
vantagens?
• Uniformidade, consistência, estética e identidade.
• Organização e clareza do conteúdo (hierarquia)
• Facilidade de distinção entre as diferentes
informações
http://design.blog.br/design-grafico/grids-o-que-sao-e-para-que-servem

11. Grids.
Grids
Everywhere.

12. Redesenho do Mapa de Estações do Metrô de Nova Iorque por Massin

13. Ok. E daí?
Com um sistema de grids bem aplicado, geralmente utilizando 12 colunas, você pode
padronizar a sua interface, tornando-a maleável às mudanças, além de conseguir criar “ritmo”,
proporcionando um “diálogo”.
http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena

14. O Básico
- Divide-se o layout num total de 12 colunas.
- Se você deseja quebrar em duas colunas,
ou mais, basta que o somatório seja igual a
12. Ex. Col-6 + Col-6 = Col-12. E assim
sucessivamente.
- Cada conjunto de colunas, inicialmente,
deve fazer parte de uma linha (.row).
- A cada linha você pode criar um conjunto
de colunas diferentes das linhas
antecessoras e/ou sucessoras
- A classe “.container” agrupa uma ou mais
conjunto de linhas (.rows).
- O conteúdo (texto, imagens, etc) deve ser
colocado dentro de colunas, e somente as
colunas podem ser filhos imediatos de
linhas.
http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-pena

15. Exemplificando em código...

16. As Classes
Para as diferentes resoluções, o bootstrap utiliza
uma classe específica:
Para um mesmo elemento,
você pode especificar
várias classes para se
adaptar a cada resolução.Acima de 1200px
Superior ou igual a 992px
.col-lg- (large)
.col-md- (medium)
Superior ou igual a 768px .col-sm- (small)
Até 767px .col-xs- (extra small)

17. Em código:
A largura (-x-[n]) das
colunas para resoluções
não necessariamente
devem ser as mesmas.
Basta que tudo sempre
seja igual a 12*.

18. E caso queira aninhar as colunas..
Basta continuar seguindo
as regras básicas:
adicionar uma linha
(.row), “zerando” seu
esquema organização de
colunas, tornando
independente da linha
anterior.

19. Less is more.

20. O que é “LESS”?
É um CSS dinâmico. Pronto.
Ok. Ele é um pré-processador de
CSS. Melhorou?
A mesma sintaxe que
você vê no CSS é a
mesma usada no LESS.

21. Vantagens?
- Padronização de código
- Reuso
- E.. Dinâmico, claro.

22. Como?
<h1> <ul>
<header>

23. CSS
.header{
height: 80px;
background-color: #fff /* White */
}
.header h1{
height: 28px;
display: block;
}
.header ul{
float: right;
margin: 0px;
}
.header ul li a{
padding-bottom: 20px;
padding-top: 32px;
}
LESS
.header{
height: 80px;
background-color: #fff /* White */
h1{
height: 28px;
display: block;
ul{
float: right;
margin: 0px;
a{
padding-bottom: 20px;
padding-top: 32px;
}
}
} } }

24. CSS:
.box{
width: 100%;
padding: 40px;
background: #45484d;
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
background: -o-linear-gradient(top, #45484d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%);
background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
{

25. Com LESS...
@black: “#000”;
@gray: “#45484d”;
[...]
.box{
width: 100%;
padding: 40px;
background: @gray;
background: -moz-linear-gradient(top, @gray 0%, @black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @gray), color-stop(100%, @black));
background: -webkit-linear-gradient(top, @gray 0%, @black 100%);
background: -o-linear-gradient(top, @gray 0%, @black 100%);
background: -ms-linear-gradient(top, @gray 0%, @black 100%);
background: linear-gradient(to bottom, @gray 0%, @black 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@gray', endColorstr='@black',GradientType=0 );
{

26. Melhorando...
.box{
width: 100%;
padding: 40px;
.horizontal-gradient(@gray, @black);
{
.horizontal-gradient (@startColor: @gray, @endColor: @black) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top,
from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}

27. Para saber mais...
• http://lesscss.org
• http://getbootstrap.com
• http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1/
• http://pt.wikipedia.org/wiki/Malha_%28tipografia%29
• http://www.vanseodesign.com/web-design/grid-types/

28. </fim>
Bruno Said
Sometimes UI Designer & Front-End Developer
Usually Gym Rat
Gearhead Forever.