Tema em tela larga

Como a página se apresenta em uma tela grande, como a de um notebook ou pc

Como criar um site responsivo?

Veja aqui como usar um poderoso framework para fazer um layout responsivo.
Unsemantic é um framework irmão do 960-grid system, que possibilita um controle fácil do layout. Aqui vou falar de suas classes e ensinar o necessário para usar este complemente de forma profissional.
Já utilizei bastante o 960 e migrar para o Unsemantic para criar layouts responsivos foi muito natural, eles tem uma estrutura parecida e intuitiva. Trabalha basicamente com um modelo para telas grandes e outra para mobail. Veja aqui o conteúdo em português de sua documentação.

Tema em tela larga

Como a página se apresenta em uma tela grande, como a de um notebook ou pc

Como criar um site responsivo?

Veja aqui como usar um poderoso framework para fazer um layout responsivo.
Unsemantic é um framework irmão do 960-grid system, que possibilita um controle fácil do layout. Aqui vou falar de suas classes e ensinar o necessário para usar este complemente de forma profissional.
Já utilizei bastante o 960 e migrar para o Unsemantic para criar layouts responsivos foi muito natural, eles tem uma estrutura parecida e intuitiva. Trabalha basicamente com um modelo para telas grandes e outra para mobail. Veja aqui o conteúdo em português de sua documentação.

Viewport

Em seu arquivo HTML que usa Unsemantic é necessário forçar a página para dimensionar a largura da janela, ela deve conter a segunte <meta> tag:

<head>
  <!-- Formatado para facilitar a leitura -->
  <meta
    name="viewport"
    content="
      width=device-width,
      initial-scale=1,
      minimum-scale=1,
      maximum-scale=1
    "
  />
</head>

Isso é necessária para manter a página na dimensão correta quando se muda a orientação de um smartphone / tablet de paisagem para retrato, uma desvantagem deste método é que o usuário não pode usar a funcionalidade pinch-to-zoom. Então, você precisa se certificar que seu texto seja legível e os links grandes o suficiente para serem utilizados através do toque.

Você ainda pode lançar mão de recursos JavaScript para esta função, mas não será mostrado aqui para não gerar dependência de JS dentro do CSS.

Grid Classes

Todas as classes de grade (ex.: grid-20, mobile-grid-50) precisam estar dentro de um elemento pai, com a classe grid-container. Esta já vem com um “clearfix” embutido por isso não requer um elemento de limpeza no final. Esta classe também centraliza o layout de grade dentro da página. Por padrão, tem uma largura máxima de 1200px.

Aqui está um exemplo simples:

<div class="grid-container">
 <div class="grid-50">
   Tenho 50% de largura.
 </ Div>
 <div class="grid-25">
   Tenho 25% de largura.
 </ Div>
 <div class="grid-25">
   Tenho 25% de largura.
 </ Div>
</ Div>

As classes que fazem a grade do layout são padronizadas da seguinte forma: grid-x, onde “x” é um número que representa a largura em % (porcentagem) de cada unidade da grade. São em múltiplos de 5 e vão de 5 a 100 (grid-5, grid-10 … grid-95, grid-100) . Há também unidades para dividir a página em três partes: grid-33 e grid-66 que são respectivamente 33,3333% e 66,6667% de largura.

Cada grid-x tem 10px de padding (no css isso é como uma margem interna), em ambos os lados, que, quando acoplados com o preenchimento ao lado de pitra grid-x, cria espaçamento de 20px. A razão deste sistema, em vez de ter espaçamento 20px somente na esquerda ou direita é que ele permite o uso das classes push-x e pull-x que vão reorganizar as unidades da grade, independentemente de se eles estão no início ou no fim de uma linha.

Grades aninhadas, padding zero

Se você quiser elementos de grades dentro de outra, você vai precisar usar a classe grid-parent sobre o elemento que irá conter as unidades de grade filha. Isso irá zerar qualquer preenchimento lado no próprio elemento, permitindo o preenchimento correto das unidades das grades aninhadas. Isso também pode ser útil se você simplesmente quer zerar o preenchimento de uma unidade em particular, para permitir que seu conteúdo tenha uma largura diferente.

<div class="grid-container">
   <div class="grid-50">
     Conteúdo de topo aqui.
     Seria juntamente com o
     50%, 25 | 25 25 | 25.
   </ Div>

   <!-- unidades de grade aninhadas-->

   <div class="grid-50 grid-parent">
     <div class="grid-50">
       Linha 1:
         Tenho 25% (50% de 50%)
     </ Div>
     <div class="grid-50">
       Linha 1:
         Tenho 25% (50% de 50%)
     </ Div>
     <div class="grid-50">
       Linha 2:
         Tenho 25% (50% de 50%)
     </ Div>
     <div class="grid-50">
       Linha 2:
         Tenho 25% (50% de 50%)
     </ Div>
   </ Div>
 </ Div>

Classes para Mobiles & Invisíveis

As clases mobile-grid-x permitem criar grades visuais separadas para dispositivos que têm uma largura menor que 767px. (Nota: 768px é a largura de um iPad na vertical, de modo que fica uma grade “desktop”). Isso permite que você misture as classes, para um layout diferente no desktop e do mobail.

  <div class="grid-container">
   <div class="grid-50 mobile-grid-100">
     Tenho 50% de largura no desktop.
     Tenho 100% de largura no celular.
   </ Div>
   <div class="grid-25 mobile-grid-50">
     Tenho 25% de largura no desktop.
     Tenho 50% de largura no celular.
   </ Div>
   <div class="grid-25 mobile-grid-50">
     <span class="hide-on-desktop">
       Sou invisível no desktop.
     </ Span>
     <span class="hide-on-mobile">
       Sou invisível no celular.
     </ Span>
   </ Div>
 </ Div>

Se você quiser ocultar / mostrar conteúdo com base nas larguras de mobails ou desktops, você pode usar hide-on-mobile e hide-on-desktop.

Classes Push & Pull

Se você quiser trocar a arrumação visual de colunas, mas não afetar a ordem original no código, você pode usar as classes push-x e pull-x e/ou seus primos para móbile: mobile-push-x e mobile-pull-x. É claro que você pode combiná-los como quiser.

  <!-- Exemplo básico -->
 <div class="grid-container">
   <div class="grid-50 push-50">
     Eu sou segundo no desktop.
   </ Div>
   <div class="grid-50 pull-50">
     Eu sou o primeiro na área de trabalho.
   </ Div>
 </ Div> 

 <!-- Exemplo complexo -->
 <div class="grid-container">
   <div class="grid-50 push-50 mobile-grid-50 mobile-push-50">
     Eu sou em terceiro no desktkop.
     Eu sou segundo, no celular.
   </ Div>
   <div class="grid-25 pull-50 mobile-grid-50 mobile-pull-50">
     Eu sou o primeiro no desktkop.
     Eu sou o primeiro no celular.
   </ Div>
   <div class="grid-25 pull-50 mobile-grid-100">
     Eu sou segundo no desktop.
     Tenho 100% de largura no celular.
   </ Div>
 </ Div>

Classes prefix e suffix

Se você quer apenas criar algum “espaço morto”, o equivalente visual de uma coluna vazia, você pode usar as classes prefix-x e suffix-x e/ou mobile-prefix-x e mobile-suffix-x .

  <div class="grid-container">
   <div class="grid-30 suffix-20">
     Tenho 30% de largura, seguido por ...
   </ Div>
   <div class="grid-30 prefix-20">
     ...outra coluna de 30%, com 
     40% de espaço vazio entre elas.
   </ Div>
 </ Div>

Clearfix

Há uma classe clearfix, você pode precisar usá-la. Não é necessária para elementos com uma classe grid-x aplicada, porque estes são todos flutuantes (e, portanto, limpa seus elementos filhos automaticamente).

.clearfix:before,
.clearfix:after,
.grid-container:before,
.grid-container:after,
.grid-100:before,
.grid-100:after,
.mobile-grid-100:before,
.mobile-grid-100:after {
  content: ".";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.grid-container:after,
.grid-100:after,
.mobile-grid-100:after {
  clear: both;
}

.clearfix,
.grid-container,
.grid-100,
.mobile-grid-100 {
  zoom: 1;
}

Nota: Embora grid-100 não tenha float em si, tem clearfix já aplicado.

class = “clear”

A classe clear é para ser usada em uma <div> ou <span> vazia para forçar uma quebra de linha nas unidades da grade ou qualquer coisa que precise dessa aplicação.

Aqui está um exemplo de como você pode usar class=”clear” para forçar uma nova linha.

<div class="grid-container">
   <div class="grid-25">
     Estou na linha 1
   </ Div>
   <div class="clear"> </ div>
   <div class="grid-50">
     Estou na linha 2
   </ Div>
 </ Div>

Nota: Esta abordagem é melhor usada para compensação quando há ainda mais conteúdo a seguir. Se você apenas quer ter a certeza de um elemento pai mantém seus elementos filhos arrumados corretamente, adcione class=”clearfix” para o pai. Em outras palavras, <div class=”clear”></div> não precisa ser o último filho em qualquer elemento pai.

Considerações finais

Estas são as informações básicas de como uso este framework, com elas eu crio meus novos layouts responsivos com qualidade profissional e de forma muito mais rápida. Para mais informações visite o site unsemantic.com (em inglês).

Um abraço.