Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas [revisada]
Um panorama de ferramentas e técnicas front-end. Abordando templates, boilerplates, frameworks, processadores e muito mais. A função aqui é elevar seu projeto a altos níveis de abstração para garantir melhor qualidade e agilidade no desenvolvimento.
Rye.js: biblioteca JS leve substituta da jQuery Build task e script de deploy via Git Sophisto Boilerplate https:/ /github.com/grifo/sophisto-boilerplate
h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; font-size: 14px; direction: ltr; } Foundation 3.0 Divs ou tds não herdam o tamanho da fonte de seus elementos pais
class="span6">E o quanto isto é diferente</div> <div class="span3 text-left">daquilo?</div> </div> </div> </div> Twitter Bootstrap 2.3 Marcação usando classes nomeadas pelo framework
section { padding: 20px; p { margin-bottom: 10px; a { color: blue; &:hover { text-decoration: none; } } } } } } Repara no resultado: html body section p a:hover
{ width: 100px; background: blue; @extend %arrow-top; @include arrow-top-color(blue); } Helpers Tudo o que recebe argumentos é um mixin The Extend Concept http:/ /css-tricks.com/the-extend-concept
.border padding: $margin / 2 margin: $margin / 2 border-color: $blue @mixin table-base th text-align: center font-weight: bold td, th padding: 2px @mixin left($dist) float: left margin-left: $dist #data @include left(10px) @include table-base Sintaxe SASS Projeto maduro Bibliotecas poderosas como Compass e Bourbon Duas sintaxes que não podem se misturar
@import "modules/map"; // Pages @import "pages/home"; @import "pages/about"; modularização! regras muito específicas que são guiadas por uma classe no <body>
para pré-processadores de CSS Aproveite a vontade código JavaScript não atrelado a classes HTML <article class="tool"> <h1 class="tool-title">[...]</h <div class="tool-content">[...] </article> // Mixins em LESS do Twitter Boot .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }
ao máximo! Use flexbox e grid em ambientes controlados, ainda tem baixa compatibidade e especificação não concluída Learn CSS Layout http:/ /learnlayout.com