Artigo no estilo Mentoring

Mentoring:Desenvolver aplicações web hoje em dia muitas vezes se resume à correta escolha do framework de componentes (como Bootstrap, Google Material Design Lite, etc.) para facilitar a construção da estrutura e estilo das páginas. Esse cenário funciona muito bem até o momento em que tais bibliotecas não atendem mais aos recursos específicos do seu projeto: por exemplo, quando precisamos de componentes/design muito específicos ou, pior ainda, quando precisamos misturar os componentes de duas bibliotecas diferentes numa só aplicação para atender a demanda, aumentando consideravelmente a quantidade de código e arquivos (muitos deles sequer usados). Uma solução mais adequada seria a criação da sua própria biblioteca de componentes responsivos, com seu próprio estilo. Assim, evitamos o excesso de implementação e, acima de tudo, temos o total controle de todo o website. Este artigo vai de encontro à essa realidade, ensinando a fazer uso dos recursos mais recentes da HTML5 e CSS3 para construir seus frameworks web.

Sem dúvida a responsividade é o conceito mor que define a qualidade de um site, aliada a conceitos como confiabilidade, segurança, performance e preocupação dos criadores para com seu público. Não dá mais para pensar em criar qualquer aplicação web ou website sem priorizar a responsividade como pré-requisito básico e fundamental.

O próprio Google, bem como outras ferramentas de busca na web, ranqueiam melhor sites que apresentam seu conteúdo de forma mobile friendly, isto é, preparam seus conteúdos para serem exibidos em dispositivos de diversos tamanhos, a incluir smartphones, tablets, notebooks, etc.

Em ferramentas e metodologias de SEO (Search Engine Optimization) esse conceito é tido como primário para um bom resultado junto aos sites de pesquisa, logo, você deve estar preparado para lidar com isso em seus projetos front-end como um todo.

Frameworks famosos como o Twitter Bootstrap, Angular Material (do AngularJS) e o novo Google Material Design Lite já trazem toda uma especificação de componentes HTML, classes CSS e funções JavaScript prontas para lidar com o desenvolvimento de todo tipo de página responsiva. Elas permitem ainda que você customize facilmente esse aparato de arquivos usando ferramentas de manipulação dinâmica de CSS (Less ou Sass), JavaScript (jQuery, AngularJS, etc.) e HTML puro, via build automatizado, usando o Grunt, por exemplo.

Todavia, existem várias situações onde o projeto em que você estiver trabalhando exija que o design da aplicação como um todo seja completamente diferente do fornecido por esses frameworks, ou casos em que os componentes das mesmas não sejam suficientes para desenvolver as peculiaridades que seu projeto exige, dentre outros.

Nestes casos, o designer, ou desenvolvedor front-end deve ter embasamento o suficiente para lidar com esse tipo de desenvolvimento, de repente criando seu próprio framework de componentes, classes e funções. E são exatamente estes pontos que esse artigo visa tratar, explorando conceitos como grids, desenvolvimento com Sass, tipografia, dentre outros.

O poder do Sass

Para fins de simplicidade e produtividade, usaremos o Sass para facilitar a implementação do CSS nos exemplos do artigo.

O Sass permite que elementos sejam aninhados para flexibilizar a forma como as regras serão geradas no CSS final. Por exemplo, vejamos o exemplo demonstrado pela Listagem 1.

A primeira parte dela mostra um código CSS feito em Sass que define a forma de exibição de um elemento de classe “barra-navegacao” via display com valor flex (que diz que o conteúdo deve se adaptar às dimensões da tela onde for exibido), bem como o padding dos elementos de lista li que estiverem inseridos dentro do anterior.

Na segunda parte, vemos o resultado da compilação desse Sass, ou seja, o CSS final gerado. Veja como o Sass simplifica a criação de regras de estilo ao evitar que tenhamos de duplicar código sempre que quisermos uma regra em herança.

Listagem 1. Exemplo de conteúdo Sass e CSS gerado.

  // Antes
  .barra-navegacao {
            display: flex;
            li {
                        padding: 5px 10px;
            }
  }
   
  // Depois
  .barra-navegacao {
            display: flex;
  }
  .barra-navegacao li {
            padding: 5px 10px;
  }

O Sass se baseia num conjunto de vários conceitos para implementar CSS, vejamos:

· Ele pode ser baseado em duas tecnologias diferentes: Ruby ou LibSass (BOX 1). Vamos usar neste artigo o Ruby por questões de simplificação.

· Ele é um gem no Ruby, isto é, um pacote usado no Ruby.

· Podemos executá-lo via interface de linha de comando, mas também é possível sua execução via aplicações de terceiros, com a devida importação de suas bibliotecas dependentes.

· Ele é uma linguagem de scripting convencional, como JavaScript, CoffeeScript, etc.

· O Sass também contribui para a eliminação das repetições de código quando desenvolvemos CSS puro. Isso se dá por intermédio da sua sintaxe hierárquica que permite o reaproveitamento de regras para os elementos que pertencerem à mesma. Veremos mais detalhes sobre isso na prática adiante.

· Parte do fluxo de trabalho do Sass é “assistir” a um arquivo de tipo SCSS, por exemplo, estilos.scss. Quando ele detecta uma mudança nesse arquivo, um novo arquivo estilos.css é automaticamente gerado e compilado.

BOX 1. LibSass

É uma versão do Sass que possibilita a integração do mesmo em outras linguagens como C/C++, Lua, Java, .NET, etc.. Veja na seção Links a URL oficial do projeto.

Configurando o Sass

Precisamos de basicamente três passos para ter o Sass instalado:

1. Baixar e executar o instalador do Ruby.

2. Abrir um terminal de comandos referente ao seu SO.

3. Instalar a gem do Sass.

Para verificar se o Ruby já está instalado na sua máquina, digite o seguinte comando no cmd:

ruby -v

Uma mensagem com a versão do mesmo, bem como a data da revision e versão do instalador para o seu SO (32 ou 64 bits) será impressa no console:

ruby 2.1.5p273 (2014-11-13 revision 48405) [x64-mingw32]

Caso o leitor já esteja com uma versão antiga do Ruby instalada é aconselhado remove-la antes de instalar a nova, a fim de evitar problemas de conflito no ambiente. Para o Windows, especificamente, precisamos do RubyInstaller for Windows (vide seção Links).

Quando finalizar o download, execute o arquivo, selecione a língua para o passo a passo da instalação, aceite os termos de licença e, na próxima tela, selecione o diretório onde deseja que os arquivos sejam descompactados, bem como marque as opções mostradas na Figura 1 para que a pasta de binários seja adicionada às variáveis de ambiente e possamos executar comandos no cmd. Clique em Install e aguarde.

No final, antes de executar qualquer comando com o novo Ruby precisamos fechar a janela do terminal e abrir uma nova. Então execute mais uma vez o comando de verificação da versão e veja se a mesma corresponde à versão instalada:

ruby 2.2.3p173 (2015-08-18 revision 51636) [x64-mingw32]

Tela de configuração das opções do Ruby

Figura 1. Tela de configuração das opções do Ruby.

Com o Ruby ok, agora é hora de instalar a gem do Sass no ambiente. Para isso, execute o seguinte comando no terminal:

gem install sass

Aguarde ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo