Um guia bem básico de Bootstrap + Less

1.249 visualizações

Publicada em

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.

Publicada em: Tecnologia
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.249
No SlideShare
0
A partir de incorporações
0
Número de incorporações
20
Ações
Compartilhamentos
0
Downloads
50
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Um guia bem básico de Bootstrap + Less

  1. 1. Um guia bem básico de BOOTSTRAP + LESS
  2. 2. O Bootstrap é: Basicamente é um coleção (framework) de vários elementos e funções personalizáveis para desenvolvimento de projetos web.
  3. 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. 4. GRID.
  5. 5. Essa Grid?
  6. 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. 7. http://www.vanseodesign.com/web-design/grid-anatomy/ “The grid is the most vivid manifestation of the will to order in graphic.”
  8. 8. http://www.graphics.com/article-old/brief-history-grids
  9. 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. 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. 11. Grids. Grids Everywhere.
  12. 12. Redesenho do Mapa de Estações do Metrô de Nova Iorque por Massin
  13. 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. 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. 15. Exemplificando em código...
  16. 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. 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. 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. 19. Less is more.
  20. 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. 21. Vantagens? - Padronização de código - Reuso - E.. Dinâmico, claro.
  22. 22. Como? <h1> <ul> <header>
  23. 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. 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. 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. 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. 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. 28. </fim> Bruno Said Sometimes UI Designer & Front-End Developer Usually Gym Rat Gearhead Forever.

×