CSS

Construindo um framework CSS com Sass

Para os veteranos de front-end mais experientes, o tópico dos frameworks CSS não é novo. Mas vamos encarar isso. Construir uma base de estilos para cada novo projeto pode ser tedioso e repetitivo. Mas não com o Sass.

Por que usamos CSS Grid Frameworks?

Frameworks como o Blueprint , o 960 Grid System , o Grid Coordinates e o Susy criaram maneiras para os designers pularem o repetitivo, mundano e mais importante a matemática. Com um framework CSS, os desenvolvedores e desenvolvedores de front-end podem obter um site relativamente rápido com um número mínimo de bugs, além de uma base de código altamente testada.

Boilerplate Treesaver

No meu dia de trabalho eu trabalho com uma empresa chamada Treesaver, onde construímos sites em estilo de revista em HTML5 com um pouco de "auto-intitulado", JavaScript chamado Treesaver . Quando comecei com o Treesaver há pouco mais de um ano, aquele pouco de JavaScript e a especificação HTML5 sempre em transformação era praticamente tudo o que tínhamos para trabalhar. Todos os nossos modelos HTML5, JavaScript e folhas de estilo CSS foram personalizados desde o início. Para criar rapidamente os websites em estilo de revista que precisávamos desenvolver, soube imediatamente que precisávamos desenvolver uma estrutura CSS personalizada, robusta e flexível o suficiente para suportar uma ampla variedade de layouts de grade.

Sass, o ajuste perfeito para criar estruturas CSS

Fui apresentado ao Sass pelo meu chefe. Ter acesso a variáveis, mixins, seletores aninhados e herança de seletores era literalmente impossível com o CSS vanilla. Escusado será dizer que peguei Sass com um sorriso de orelha a orelha e apenas corri com ele. O resultado? Seasons , um clichê para nossa biblioteca JavaScript auto-intitulada Treesaver .

Eu imediatamente entrei nas variáveis ​​e operações para calcular a grade. Na época, fui encarregado de projetar e construir cerca de 5 publicações, com medições de grade ligeiramente diferentes. Eu desenvolvi a lógica do núcleo para determinar toda a matemática em vez de puxar a calculadora para cada cálculo. Depois que eu terminei, tudo que eu tinha que fazer era trocar uma classe pela pele e voila. Magia! Tudo atualizado para o novo layout de pele e grade.

Cada novo projeto trouxe novos desafios

De grosseiro nossos desafios não pararam por aí. Cada novo projeto adicionou novos desafios à tabela. O código principal foi refinado para uma série de loops simples, o tamanho da imagem foi adicionado e o posicionamento foi melhorado. Ao adicionar uma grade vertical, até mesmo a semântica $columnfoi posta em causa e mudou a $module-wbase em Mark Boulton artigo, repensar grades . O Sass parecia agradável e limpo, mas a saída do CSS estava começando a ficar pesada. CSS inchado é um problema conhecido com frameworks. Eles tendem a continuar crescendo para satisfazer todas as necessidades, e tornar as coisas mais generalizadas e enxutas foi uma grande provação. Então, voltei-me para os recursos booleanos do Sass para permitir que partes inteiras da estrutura pudessem ligar e desligar. Sexy!

Antes de mergulhar muito fundo no código, o Treesaver cria vários desafios únicos. Todo o HTML para layout existe em um arquivo, resources.html. Todo o conteúdo é retirado das <article>tags de páginas. e colocados nessas "grades". Essa manipulação do DOM pelo JavaScript do Treesaver pode ser difícil de determinar onde alguns objetos são colocados. Se isso não for suficiente, os layouts são escolhidos por algoritmo com base na quantidade e no tipo de conteúdo que podem caber em cada página. Com toda essa complexidade, as razões para liberar um clichê foram adicionadas.

Todos os projetos devem começar em uma grade, mas com layouts de grade sendo definidos em um arquivo separado das grades de conteúdo precisam ser gerados para que o designer possa fazer o tabu, layout no HTML. Dito isso, é apenas uma questão de simples loops configuráveis ​​para gerar a saída necessária. Esses loops calculam para classes que posicionam elementos na grade. Portanto, se eu quiser que um elemento seja iniciado na coluna 3 com uma largura de 4 colunas, ele será nomeado <div class="c3 w4">. Talvez você queira ligar a grade vertical e posicioná-la 2 linhas abaixo? Adicione o class r2. Tudo parece bom até agora, mas e se um projeto precisar de nada menos que uma grade de 30 colunas por algum motivo? Ou uma largura de coluna de 3px? Estes valores podem parecer absurdos, mas este quadro está escrito em Sass, por isso não temos desculpa para bloquear quaisquer valores.

// 
MEDIDAS  GRID @ para $ i  de  1  a  $ colunas  // loop define colunas. c1, c2, c3. . . 
  .c # { $ i } 
    margin-left :  grid ( $ i )  -  $ module-w 
@ para  $ i  de  1  a  $ colunas  // o loop define larguras. w1, w2, w3. . . 
  .w # { $ i } 
    width :  grade ( $ i )

// Grade 
vertical $ vertical-grid :  false  ! Default 
$ linhas :  10  ! Default 
@if  $ vertical-grid  // Gera somente se $ vertical-grid for verdadeiro. Este código geralmente não é nessisário. 
  @for  $ i  de  1  a  $ rows  // o loop define linhas. r1, r2, r3. . . 
    .r # { $ i } 
      posição :  top absoluto 
      : ( grid ( $ i , $ module-h ) - $ module-h ) + $ top @ para $ i de      
     1  a  $ rows  // loop define alturas. h1, h2, h3. . . 
    .h # { $ i } 
      height :  grid ( $ i ,  $ module-h )

O redimensionamento de imagens tem sido a parte mais complicada na criação do Seasons. Para que o Treesaver calcule os layouts, ele precisa conhecer as dimensões de cada elemento, e embora as dimensões de imagens de tamanhos diferentes possam ser definidas no conteúdo, layouts complexos exigiriam que doze imagens diferentes fossem definidas no conteúdo, algo que estava ficando muito difícil de administrar. Agora o Sass é ótimo em percorrer e calcular maneiras de redimensionar essas imagens, mas pode resultar em inchaço com a mesma facilidade. Na verdade, o código anterior estava tomando cerca de 50k apenas para redimensionar imagens! Puxando mixins aninhados na configuração contendo as proporções usadas em toda a publicação. O uso de um seletor personalizado para proporção, em vez de uma classe de medidas de segmentação para várias páginas, juntamente com as taxas de imagem, tornou-se menor, ao mesmo tempo em que suportava mais casos de uso.

rácio 
  @mixin + rácio ( 16 ,  9 ) 
  + rácio ( 4 ,  3 )

// IMAGE + PAGE RATIOS 
= razão ( $ width ,  $ height ,  $ cols :  $ columns ) 
  @ para  $ i  de  1  até  $ cols 
    .r # {$ width} x # {$ height} .w # {$ i}, .container.w # {$ i} [ ratio = " # { $ largura } x # { $ altura } " ] img // Taxa de grade, taxa de figura. width : grid ( $ i ) // Width abrange todas as colunas height : round ( grid (   
        
       $ i )  *  (  $ height  /  $ width  ))  // Altura é a proporção da largura.

+ ratios  // Executa o código acima. Proporções são definidas em _config.sass

Criar ferramentas de layout poderosas que não adicionam peso ao seu arquivo é outro grande ponto de criação de um framework Sass. Criar ferramentas para que as pessoas simplesmente usem a grade e controlem a tipografia são tão importantes para os frameworks do que apenas se preocupar com as grades geradas. Os usuários devem ter tanto controle sobre aspectos do layout das folhas de estilo quanto das classes geradas pelo framework. Por exemplo, a grade é adicionada como uma função que gera valores diferentes com base na grade a ser usada nas folhas de estilo. Ferramentas de depuração são outro complemento que destacam elementos. Já fez um elemento vermelho brilhante só para ver se estava aparecendo na página? Bem de uma letra mixins rgbcm, eyirá destacar elementos em uma verdade de cores para que você possa rapidamente depurar layouts. Além disso, adicionamos algumas escalas modulares, sprites e mixins CSS3 para algumas possibilidades fantásticas de layout. Quer uma lista? você pode encontrar aqui

Agora, configurar esse monstro pode parecer uma tarefa difícil, mas não é tão ruim assim. Usando o !defaultnão tudo precisa ser definido. Na verdade, o Seasons está pronto para funcionar, não é necessário alterar nada, a menos que você queira alterar o valor. A natureza dos frameworks deve ser inchada, mas a configuração permite que você reduza uma série de recursos que talvez não deseje usar. Não está usando figuras fullbleed ou inset legendas, ou quer escrever sua própria variação? Apenas desligue-os na configuração. Construir estruturas de estilo no Sass é um novo jogo de bola. O nível de personalização e flexibilidade precisa ser muito maior que o das estruturas CSS, porque é assim que as estruturas de estilo devem sempre funcionar.

Compartilhe

Ebrahim P. Leite

Ebrahim P. Leite

Escreva aqui uma descriçao breve sobre você...

Veja também

Comentários (1)

  1. Davson Santos

    Davson Santos

    Teste