Um guia bem básico de Bootstrap + Less
-
Upload
bruno-said -
Category
Technology
-
view
401 -
download
0
Transcript of Um guia bem básico de Bootstrap + Less
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.