Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Um guia bem básico de Bootstrap + Less

1,635 views

Published on

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.

Published in: Technology
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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.

×