Um guia bem básico de

BOOTSTRAP + LESS
O Bootstrap
é:
Basicamente é um
coleção (framework) de
vários elementos e
funções personalizáveis
para desenvolvimento
de projetos web.
E as suas vantagens
são:

• Padronização de Interface e código

• Opensource
• Documentação detalhada
• Cross-browser
• Otimização para layouts responsivos
GRID.
Essa
Grid?
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
“The grid is the most
vivid manifestation of
the will to order in
graphic.”
http://www.vanseodesign.com/web-design/grid-anatomy/
http://www.graphics.com/article-old/brief-history-grids
 Tipos de Grid
Retangular Colunas Modular Hierárquico
(Manuscrito,
‘single column’ ou ‘block grid’)

http://joeycofone.blogspot.com.br/2010/11/letter-to-grid.html

http://www.vanseodesign.com/web-design/grid-types/grid.html
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
Grids.
Grids
Everywhere.
Redesenho do Mapa de Estações do Metrô de Nova Iorque por Massin
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
 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
Exemplificando em código...
As Classes
Para as diferentes resoluções, o bootstrap utiliza Para um mesmo elemento,
uma classe específica: você pode especificar
várias classes para se
Acima de 1200px .col-lg- (large)
adaptar a cada resolução.

Superior ou igual a 992px .col-md- (medium)

Superior ou igual a 768px .col-sm- (small)

Até 767px .col-xs- (extra small)

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*.
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.
Less is more.
O que é “LESS”?
É um CSS dinâmico. Pronto. A mesma sintaxe que
você vê no CSS é a
mesma usada no LESS.
Ok. Ele é um pré-processador de
CSS. Melhorou?
Vantagens?
- Padronização de código
- Reuso
- E.. Dinâmico, claro.
 Como?
<header>

<h1> <ul>
 CSS LESS
.header{ .header{
height: 80px; height: 80px;
background-color: #fff /* White */ background-color: #fff /* White */
}
h1{
.header h1{ height: 28px;
height: 28px; display: block;
display: block;
} ul{
float: right;
.header ul{ margin: 0px;
float: right;
margin: 0px; a{
} padding-bottom: 20px;
padding-top: 32px;
.header ul li a{ }
padding-bottom: 20px;
padding-top: 32px; }
} } } }
 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 );
{
 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 );
{
 Melhorando...

.horizontal-gradient (@startColor: @gray, @endColor: @black) {

background-color: @startColor;
.box{
background-image: -webkit-gradient(linear, left top, right top,
width: 100%;
from(@startColor), to(@endColor));
padding: 40px;
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
.horizontal-gradient(@gray, @black);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
{
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
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/
</fim>

Bruno Said
Sometimes UI Designer & Front-End Developer
Usually Gym Rat
Gearhead Forever.