Introdução
Nesse artigo vamos falar sobre o Skeleton que é um framework CSS bastante poderoso. Porém não vamos abordar exatamente a estrutura Skeleton em si, mas sim seus elementos, vamos ver como usar as classes CSS contidas dentro do arquivo Base.css que vem junto com o pacote Skeleton ao fazermos o download. Para aqueles que ainda não realizaram o download do Skeleton, segue o link: http://www.getskeleton.com, basta descer a página e encontrar a área de download conforme a Figura 1.
Figura 1: Download Skeleton
Agora com o download concluído e os arquivos descompactados, vamos ter as seguintes folhas de estilo: base.css, Skeleton.css e layout.css. Todos esses três arquivos serão importantes para nossos exemplos e aprendizagem, mas abordaremos principalmente o arquivo Base.css por ser a folha de estilo básica do Skeleton.
Base.css: Esse arquivo já vem com varias classes criadas e pré-configuradas para os elementos mais básicos que usamos ao criarmos um layout, tais como botões, legendas, formulários e links.
Entretanto não ficamos restritos a estar utilizando apenas essa folha de estilos padrão do Skeleton, podemos estar criando e utilizando nossas próprias folhas de estilo personalizadas da maneira que mais nos agrade.
Introduzindo os arquivos Skeleton no HTML
Para que o Skeleton possa fazer efeito em nossa aplicação web, devemos primeiramente carregar seus arquivos para dentro da nossa aplicação, então dentro da tag head vamos por o seguinte código.
Listagem 1: Ligando arquivos necessários ao Skeleton
<head>
<title> Testando FrameWorks - Skeleton</title>
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
</head>
Assim estamos trazendo para nossa aplicação web todos os arquivos necessários para o funcionamento do Skeleton. Abaixo vemos a descrição de cada um desses três arquivos.
- Skeleton.css : A grade de estrutura do Skeleton;
- Base.css: Estilos básicos do Skeleton;
- Layout.css: Nenhum estilo especifico, mas uma grande variedade de consultas úteis para mídias.
Tipografia
Tipografia é a escolha de padrões e estilos de letras, tais como escolher uma determinada família de letras (Verdana, Futura, Arial) e também seus estilos, se vão estar em itálico, negrito, ligth e outros. Só que a tipografia do Skeleton é bem simples e foi desenvolvida para criar uma hierarquia boa com estilos básicos. Onde sua fonte principal é o clássico Helvetica Neue, mas existe uma grande variação de fontes que podem ser alteradas com alguns ajustes. O Skeleton vem com um padrão de parágrafo de 14px a 21px, de acordo com a altura da linha.
Dentro do arquivo base.css encontramos uma a classe “tipography”, trazendo algumas configurações como tamanho da fonte, tamanho da linha e a margem inferior. Vamos criar um exemplo.
Para esse exemplo vamos usar os elementos h1,h2,h3,h4,h5 e h6 e vamos notar como será exibido cada um desses elementos, como seu tamanho espaço e margem.
Listagem 2: Exemplo de tipografia
<body>
<div class="container .sixteen.columns">
<h1> título < h1> </h1>
<h2> título < h2> </h2>
<h3> título < h3> </h3>
<h4> título < h4> </h4>
<h5> título < h5> </h5>
<h6> título < h6> </h6>
</div>
</body>
Nesse exemplo aqui usamos um container de 16 colunas e com os títulos dentro dele, cuja exibição no navegador terá a seguinte forma:
Figura 2: Exemplo tipografia
Lembrando-nos que a configuração de tamanho da fonte, tamanho da linha e margens estão configuradas dentro do arquivo base.css e podem ser alterados se assim desejarmos.
Bockquote
Essa tag é utilizada quando queremos deixar uma citação, seja ela em um site, blog ou fóruns, essa citação serve para mencionarmos a fonte de onde pegamos tal conteúdo em questão . Existem vários tipos de blockquote disponíveis, vamos estar vendo um modelo mais simples.
Listagem 3: Exemplo com blockquote
<body>
<div class="container .sixteen.columns">
<blockquote>
<p> Este é um exemplo de estilo blockquote. simples, porém impressionante </p>
<cite> artigo skeleton.</cite>
</Blockquote>
</div>
</body>
Novamente nesse exemplo também estamos usando um container de 16 colunas, mas agora no resultado do nosso exemplo acima vamos notar que o nosso blockquote está ocupando todo o espaço, ou seja, todas as nossas 16 colunas do container.
Figura 3: Resultado do exemplo com blockquote
Como mencionamos acima, esse blockquote está ocupando todas as 16 colunas do nosso container. Vamos supor que esse nosso blockquote deve ocupar apenas 6 colunas, para isso acontecer basta fazer o seguinte.
Listagem 4: Determinando tamanho Blockquote
<body>
<div class="container .sixteen.columns">
<blockquote class="six columns">
<p Este é um exemplo de estilo blockquote. simples, porém impressionante </p>
<cite> artigo skeleton.</cite>
</Blockquote>
</div>
</body>
A única diferença do código foi ter adicionado dentro da tag blockquote a classe “six columns”, isso fez com que o blockquote tivesse o tamanho de apenas 6 colunas ao invés do primeiro modelo que ocupou as 16 colunas .
Figura 4: Exemplo Blockquote
Botões
Para a criação dos botões no Skeleton, utilizamos os elementos <Button> ou <a> também a classe button, encontrada dentro do arquivo base.css. Os elementos button são bem versáteis pois aceitam texto e imagens, essa é a diferença entre esse elemento e o botão criado através de um <input>.
Porém, os botões trazidos pela folha de estilo do Skeleton tem um efeito de profundidade e um foco forte. Vejamos isso na prática. Lembrando que qualquer personalização pode ser realizada através do arquivo base.css. Aqui estamos apenas vendo o uso dos mais básicos.
Uma outra coisa interessante é que temos três maneiras de estar criando esses botões, vejamos quais são elas.
A primeira forma é a traves da tag <a> adicionando a classe button da seguinte forma:
Listagem 5: Criar botão usando tag <a>
<!-- Basta adicionar a classe button a um link -->
<a href="#" class="button"> clique Aqui </a>
Nesse modo, ao clicarmos seremos redirecionados para o site que determinamos.
A segunda maneira de estar utilizando o botão é do modo clássico da HTML, ou seja, basta usar a própria tag <Button>. Veja abaixo.
Listagem 6: Botão Simples
<!-- Também funciona em elementos button simples -->
<button> Clique em mim botão </button>
Agora terceira maneira de criar um botão é a adicionando as classes “full-width button”. Traduzindo, o botão terá a largura total do container .
Listagem 7: Botão full width
<!-- Para ocupar largura total de um container. -->
<a href="#" class="full-width button"> clique em mim </a>
Figura 5: Exemplo de elemento buttons
Você, através do base.css, pode estar modificando todos os atributos referentes ao button.
Itens Formulários
Os formulários podem ser uma das maiores preocupações dos desenvolvedores na hora da criação de um site, mas com o Skeleton basta usar os modelos simples disponíveis e você vai obter um resultado bastante satisfatório.
Agora vamos ver alguns desses elementos usados para criar formulários.
Vamos criar um label e um text imput.
Listagem 8: Label e Text input
<body>
<div class="container .twelve.columns">
<form action="">
<!-- Label e textarea -->
<label entrada for="regularInput"> exemplo </label>
<input type="text" id="regularInput" />
</form>
Conforme fizemos nos blockquote, qualquer outro componente pode ter o número de colunas que ocupará determinado, basta você chamar a classe do tamanho que você deseje.
Figura 6: Exemplo label e text imput com Skeleton
Agora vamos criar novamente um label junto com um textarea, do qual você tem até mesmo a disponibilidade de aumentar as dimensões clicando no canto inferior direto e arrastando.
Listagem 9: Label e Textarea
<body>
<div class="container .twelve.columns">
<form action="">
<!-- Label e textarea -->
<label for="regularTextarea"> regular Textarea</label>
<textarea id="regularTextarea"> </textarea>
</form>
</div>
</body>
Figura 7: Label e textarea
Agora vamos criar um label associado a uma lista de seleções como exemplo.
Listagem 10: Criando uma lista de seleção
<body>
<div class="container .twelve.columns">
<form action="">
<!-- Label e lista de seleção -->
<label for="selectList"> Lista de Seleção</label>
<select id="selectList">
<option value="Opcao 1"> Item 1 </option>
<option value="Opcao 2"> Item 2 </option>
<option value="Opcao 3"> Item 3 </option>
</Select>
</form>
</div>
</body>
Figura 8: Lista de seleção
Assim terminamos os exemplos. Como podemos observar, todos os elementos aqui utilizados são elementos simples e provavelmente de conhecimento da maioria dos leitores. Podemos ver que o Skeleton não é tão difícil assim de se utilizar, pois ele faz com que os elementos simples se adaptem a suas estruturas facilmente. Podemos testar outros elementos e criarmos modelos de layouts, assim iremos ver que todos se adéquam perfeitamente às necessidades dos usuários e dispositivos que terão acesso a esses sites.
Espero que o artigo, por mais que tenha sido simples, seja do agrado de todos os leitores. Com isso fico por aqui.
Abraços a todos e até o próximo.
