{ Sketch }

Sketch é um framework de design front-end responsivo, criado segundo o padrão de design fornecido pelo modelo de doze grades. O objetivo principal do framework Sketch é fornecer uma ferramenta de design que possa propor um esboço de interface de usuário, de modo que seja possível criar estilos criativos sobre o referido esboço.

Para facilitar o aprendizado do leitor este guia está organizado como segue:

• Modelo de doze grades: apresenta uma breve informação sobre o design responsivo elaborado com grades;

• Contêineres e painéis: destaca o agrupamento de conteúdo em blocos;

• Linhas e colunas: estabelece a divisão de conteúdo em linhas e colunas;

• Cartões e sombras: cartões fornecem um leve relevo entre um bloco de conteúdo e o contêiner em que está contido, enquanto as sombras destacam esse relevo;

• Posicionamento de blocos: fornece classes para definir a flutuação e posição de blocos de conteúdo;

• Bordas: define tamanhos, estilos e lados para bordas;

• Preenchimento: define medidas e lados para preenchimento interno de um bloco de conteúdo;

• Margens: define medidas e lados margens;

• Textos: define alinhamento, tamanhos, estilo, peso, decoração e indentação para textos;

• Conteúdo multimídia dividido em colunas: demonstra como textos e imagens podem ser apresentados em colunas sobre uma página Web;

• Textos flutuantes: também chamados tooltipsinformações em texto flutuante, apresentam informações em balões flutuantes;

• Cores: você irá aprender sobre a biblioteca de cores para textos, para fundo de blocos de conteúdo, para bordas e para conteúdo multimídia dividido em colunas;

• Tabelas: apresenta as regras necessárias para se criarem tabelas responsívas;

• Menus e navegadores: define regras para criar menus drop-downs, sejam verticais ou até mesmo horizontais. Adicionalmente, você aprenderá sobre navegadores de conteúdo;

• Ícones da Font Awesome: apresenta uma breve introdução aos ícones fornecidos pela Font Awesome;

• Sliders: apresenta uma breve introdução aos apresentadores animados de conteúdo;

• Apresentadores de imagens: você irá aprender, de maneira fácil, a como inserir um apresentador de imagens em seu site;

• Animações: apresenta as regras necessárias para criar animações de forma simples;