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

http://www.vanseodesign.com/web-design/grid-anatomy/

“The grid is the most

vivid manifestation of

the will to order in

graphic.”

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

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

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 Massino

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

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)

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.

Ok. Ele é um pré-processador de

CSS. Melhorou?

A mesma sintaxe que

você vê no CSS é a

mesma usada no LESS.

Vantagens?

- Padronização de código

- Reuso

- E.. Dinâmico, claro.

Como?

<h1> <ul>

<header>

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;

}

}} } }

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...

.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);

}

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.