SlideShare uma empresa Scribd logo
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 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
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.

Mais conteúdo relacionado

Destaque

SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPASUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
Sancho Ferreira
 
Uso do grid_tipografico
Uso do grid_tipograficoUso do grid_tipografico
Uso do grid_tipografico
Flavio Fargas
 
Ferramentas UX
Ferramentas UXFerramentas UX
Ferramentas UX
Cristian Mathias
 
Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5
Diego Sanches Modesto
 
Desenvolvimento Web com Php e jQuery
Desenvolvimento Web com Php e jQueryDesenvolvimento Web com Php e jQuery
Desenvolvimento Web com Php e jQuery
Fabricio Nogueira
 
Arquitetura web e o php
Arquitetura web e o phpArquitetura web e o php
Arquitetura web e o php
secomp2011
 
Formulários Responsivos com Bootstrap
Formulários Responsivos com BootstrapFormulários Responsivos com Bootstrap
Formulários Responsivos com Bootstrap
Rodrigo Ribeiro de Abreu
 
Bootrastap carousel
Bootrastap carouselBootrastap carousel
Bootrastap carousel
Rodrigo Ribeiro de Abreu
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
Hiarison Gigante
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
Jackson F. de A. Mafra
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
Flavio Souza
 
Elementos basicos do design
Elementos basicos do designElementos basicos do design
Elementos basicos do design
raisafcabral
 
Modelo espelho
Modelo espelhoModelo espelho
Modelo espelho
aulasdejornalismo
 
Fundamentos Do Grid Parte 2
Fundamentos Do Grid Parte 2Fundamentos Do Grid Parte 2
Fundamentos Do Grid Parte 2
renatamruiz
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de Caso
Luiz Agner
 
Público alvo e objetivos
Público alvo e objetivosPúblico alvo e objetivos
Público alvo e objetivos
Edson Demarch
 
Aula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas CondicionaisAula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas Condicionais
Daniel Brandão
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Ravi Bhadauria
 
Grid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User ExperienceGrid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User Experience
Dustin DiTommaso
 
Php e mysql aplicacao completa a partir do zero
Php e mysql   aplicacao completa a partir do zeroPhp e mysql   aplicacao completa a partir do zero
Php e mysql aplicacao completa a partir do zero
Fred Ramos
 

Destaque (20)

SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPASUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
SUPORTES E FERRAMENTAS GRÁFICAS, ELEMENTOS DA CRIAÇÃO DE UMA CAPA
 
Uso do grid_tipografico
Uso do grid_tipograficoUso do grid_tipografico
Uso do grid_tipografico
 
Ferramentas UX
Ferramentas UXFerramentas UX
Ferramentas UX
 
Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5
 
Desenvolvimento Web com Php e jQuery
Desenvolvimento Web com Php e jQueryDesenvolvimento Web com Php e jQuery
Desenvolvimento Web com Php e jQuery
 
Arquitetura web e o php
Arquitetura web e o phpArquitetura web e o php
Arquitetura web e o php
 
Formulários Responsivos com Bootstrap
Formulários Responsivos com BootstrapFormulários Responsivos com Bootstrap
Formulários Responsivos com Bootstrap
 
Bootrastap carousel
Bootrastap carouselBootrastap carousel
Bootrastap carousel
 
Como criar seu próprio Framework
Como criar seu próprio FrameworkComo criar seu próprio Framework
Como criar seu próprio Framework
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
 
Elementos basicos do design
Elementos basicos do designElementos basicos do design
Elementos basicos do design
 
Modelo espelho
Modelo espelhoModelo espelho
Modelo espelho
 
Fundamentos Do Grid Parte 2
Fundamentos Do Grid Parte 2Fundamentos Do Grid Parte 2
Fundamentos Do Grid Parte 2
 
Palestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de CasoPalestra - Grid : Estudos de Caso
Palestra - Grid : Estudos de Caso
 
Público alvo e objetivos
Público alvo e objetivosPúblico alvo e objetivos
Público alvo e objetivos
 
Aula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas CondicionaisAula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas Condicionais
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia Institute
 
Grid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User ExperienceGrid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User Experience
 
Php e mysql aplicacao completa a partir do zero
Php e mysql   aplicacao completa a partir do zeroPhp e mysql   aplicacao completa a partir do zero
Php e mysql aplicacao completa a partir do zero
 

Semelhante a Um guia bem básico de Bootstrap + Less

Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
iMasters
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
Larissa Carvalho
 
Html5
Html5Html5
Psd to html
Psd to htmlPsd to html
Psd to html
Abel Ribeiro
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
Helder da Rocha
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Aula Bootstrap.pptx
Aula Bootstrap.pptxAula Bootstrap.pptx
Aula Bootstrap.pptx
GustavoBarrosLins1
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
Layout na web: um guia de css grid
Layout na web: um guia de css gridLayout na web: um guia de css grid
Layout na web: um guia de css grid
Carol Soares
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
Devmedia
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
Guilherme Serrano
 
Unb 2012.1 - dweb - c - técnicas
Unb   2012.1 - dweb - c - técnicasUnb   2012.1 - dweb - c - técnicas
Unb 2012.1 - dweb - c - técnicas
Claudenio Alberto
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
Marconi Pacheco
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
Wellington Dutra
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Indo alem do_mvc_node_js
Indo alem do_mvc_node_jsIndo alem do_mvc_node_js
Indo alem do_mvc_node_js
gustavobeavis
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 

Semelhante a Um guia bem básico de Bootstrap + Less (20)

Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
Html5
Html5Html5
Html5
 
Psd to html
Psd to htmlPsd to html
Psd to html
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Aula Bootstrap.pptx
Aula Bootstrap.pptxAula Bootstrap.pptx
Aula Bootstrap.pptx
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Layout na web: um guia de css grid
Layout na web: um guia de css gridLayout na web: um guia de css grid
Layout na web: um guia de css grid
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
 
Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)Componetização de CSS com o Compass (Front in Sampa 2013)
Componetização de CSS com o Compass (Front in Sampa 2013)
 
Unb 2012.1 - dweb - c - técnicas
Unb   2012.1 - dweb - c - técnicasUnb   2012.1 - dweb - c - técnicas
Unb 2012.1 - dweb - c - técnicas
 
7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress7 Dicas para Criação de layouts para sites em WordPress
7 Dicas para Criação de layouts para sites em WordPress
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Indo alem do_mvc_node_js
Indo alem do_mvc_node_jsIndo alem do_mvc_node_js
Indo alem do_mvc_node_js
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 

Último

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 

Último (8)

Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 

Um guia bem básico de Bootstrap + Less

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