Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

CSS

Última modificação: 13 março 2009

Porque utilizar botões expansíveis:

  • Reduz número de arquivos;
  • Reduz arquivos a serem baixados pelo usuário;
  • Carregamento da página mais rápido;
  • Reduz classes no HTML / linhas de CSS;
  • Uma classe = utilizado em todos* os botões (* todos com o mesmo estilo dentro do padrão do site).

Botão expansível CSS

Convencido disto, aprenda como fazer:

  1. Criar a imagem do botão:
  2. Dividir a imagem em 2 partes:
    • O botão será formado por duas peças: o lado esquerdo, e o direito.
    • Divida a imagem deixando o lado esquerdo contendo somente a borda esquerda, veja o exemplo (print do photoshop). Salve como botao_esquerdo.png:

      Botão expansível CSS - Passo 1

      Botão expansível CSS - Passo 1

      Para fazer o lado direito, recorde o restante do botão que não seja a borda esquerda. Abra um novo arquivo com dimensões maiores, por exemplo: Se o botão for WIDTH 100px por HEIGHT 20px, o lado direito terá que ter uma largura de 500px. Essa é a imagem que vai fazer a “expansão”. Siga os passos:

    • Selecione o lado direito
    • Abra um novo arquivo (só para ele) Criando a imagem do lado direito
    • Coloque a borda de um lado da imagem (cole no canto direito)
    • Selecione uma medida 1px(largura) por altura total da imagem. Vamos fazer esse pixel ser igual para todo o resto da imagem
    • Com esse pixel selecionado, (CTRL + T ou EDIT > Free Transform). Agora sim, exenta esse pixel até o outro lado da imagem.
      Photoshop Redimensionamento

      Photoshop Redimensionamento

    • Salve como: botao_direito.png
  3. HTML: Agora temos as duas imagens separadas. Chega de Photoshop, vamos para o o código:

          <a class="botao_expansivel" href="#" title="Botão expansível"><strong>Botão expansível</strong></a>
        

    – Além do link precisamos de um elemento dentro dele para colocar o outro lado da imagem. Pode ser um EM, SPAN ou STRONG. Como nós gostamos dos Webstandards, indicamos o STRONG, pois não ficará sem sentido como um SPAN, por exemplo.

  4. Código CSS*:

          .botao_expansivel { display: inline-block; padding-left: 5px; background: url(../imagens/botao_esquerdo.png) left no-repeat; }
          .botao_expansivel strong { display: inline-block; padding: 5px; background: url(../imagens/botao_direito.png) right no-repeat; }
        

Quem usa os botões expansíveis (HTML + CSS)?

*CSS: Utilizei no CSS do exemplo a Abreviação das propriedades CSS

18 2009 fevereiro

Hack para Safari e Google Chrome

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Fugindo um pouco de soluções específicas para o IE6 (já estava ficando cansativo!) vamos mostrar como fazer um hack específico para o navegador Safari e Google Chrome.

Sim, nós sabemos que usar hacks é “feio”, mas estamos aqui para apresentar soluções e, caso essa seja sua última opção, use!

Como os dois browsers utilizam a mesma engine de renderização, a Webkit, este hack acaba servindo para os dois navegadores:

body:nth-of-type(1) elemento { propriedade: valor; }

—–

* Update: Post atualizado, pois o hack antigo era interpretado pelo o IE7 também. Este novo método funciona somente para os navegadores Google Chrome e Safari.

* Update: Solução nos comentários, alguns usuários comentaram a mesma solução, conforme a necessidade verifique esses comentários, pois raramente fazemos ajuste apenas no chrome.

17 2009 fevereiro

Rodapé fixo

Autor: g3 em CSS

Última modificação: 22 outubro 2009

O post seguinte ensina como fazer um rodapé fixo no fim da página independente do conteúdo.

Primeiro passo é escrever um XHTML na seguinte estrutura:

...
<body>
<div id="limites">
<div id="conteudo" class="contemfloat">
<div id="coluna1">
Coluna 1
</div>
<div id="coluna2">
Coluna 2
</div>
</div>
<div id="rodape">
Rodapé
</div>
</div>
</body>
...

A div#rodape tem que estar no mesmo nível que a div#conteudo dentro da div#limites.

|-----------------------------------|
| body                              |
|                                   |
| |-------------------------------| |
| |                               | |
| | limites                       | |
| |                               | |
| |  |-------------------------|  | |
| |  |                         |  | |
| |  | conteudo                |  | |
| |  |                         |  | |
| |  |  |-------------------|  |  | |
| |  |  | coluna1           |  |  | |
| |  |  |-------------------|  |  | |
| |  |  | coluna2           |  |  | |
| |  |  |-------------------|  |  | |
| |  |                         |  | |
| |  |-------------------------|  | |
| |                               | |
| |  |-------------------------|  | |
| |  | rodape                  |  | |
| |  |-------------------------|  | |
| |                               | |
| |-------------------------------| |

Feito o XHTML escreva os seguintes estilos(CSS):

* { margin: 0; padding: 0; z-index: 1; }
html, body { height: 100%; }

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

#limites { position: relative; width: 600px; min-height: 100%; margin: 0 auto; background-color: #eee; }
* html #limites { height: 100%; }

#conteudo { padding-bottom: 80px; border-bottom: 1px solid red; }

#coluna1 { float: left; width: 400px; background-color: #ecc; }
#coluna2 { width: 200px; margin-left: 400px; background-color: gray; }

#rodape { position: absolute; bottom: 0; left: 0; width: 600px; height: 50px; padding-top: 10px; background-color: #cce; text-align: center; }

No html, body e div#limites precisam ter altura 100%. No caso da div#limites coloque altura mínima (min-height) 100%, mas como essa propriedade não renderiza no Internet Explorer 6 é preciso adicionar uma linha apenas para o IE6 com altura (height) 100%, isso funciona porque o IE6 não respeita uma altura definida caso o conteúdo do elemento ultrapasse essa altura.

Atenção, A div#limites tem posição relativa para possibilitar a div#rodape ficar sempre na base da div#limites em posição absoluta.

No XHTML foi inserido a classe “contemfloat” na div#conteudo porque dentro dela contém elemento com float.

No CSS a div#conteudo deve ter valor no padding-bottom igual ou maior que a altura da div#rodape, isso é feito para a div#rodape não ficar por cima da div#conteudo.

No exemplo a div#conteudo está com uma borda vermelha para mostrar o espaço do padding-bottom entre o conteúdo até a borda.

Veja o exemplo.

17 2009 fevereiro

Hack para Internet Explorer 6

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!

Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:

* html { propriedade: valor; }

Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.

Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.

* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.

Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.

Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.

Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:

– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.

Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.

Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:

overflow: hidden;

* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.

29 2009 janeiro

Image replacement

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.

A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.

Supondo que nosso HTML seja o seguinte:

<h1>Título do site</h1>

Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):

h1 { width: 200px; height: 50px; background: url(../imagens/titulo.png) no-repeat; text-indent: -999em; overflow: hidden; }

Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.

29 2009 janeiro

Abreviação das propriedades CSS

Autor: Carlitos em CSS

Última modificação: 31 maio 2011

Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.

Background

Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.

seletor {
background-color: #fff;
background-image: url(imagem.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:

seletor { #fff background: url(imagem.jpg) bottom no-repeat; }

Color

Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.

seletor { color: #aaff00; }

Podemos abreviar desta forma:

seletor { color: #af0; }

A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.

Margin e padding

A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:

seletor {
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}

Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:

seletor { margin: 1px; padding: 1px; }

Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:

seletor { margin: 1px 5px; padding: 1px 5px; }

Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):

seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }

E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):

seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }

Border

Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:

seletor {
border-width: 1px;
border-style: solid;
border-color: #000;
}

Para abreviar esta propriedade é simples:

seletor { border: 1px solid #000; }

Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:

seletor { border-top: 1px solid #000; }

Font

Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:

seletor {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS", Arial, sans-serif;
}

Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:

seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }

Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.

List-style

A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:

seletor {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}

Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:

seletor { list-style: circle inside url(bullet.gif); }

Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.

29 2009 janeiro

Max e min width no IE 6

Autor: Carlitos em CSS, Hacks

Última modificação: 18 fevereiro 2009

Sabemos que o Internet Explorer 6 tem limitações em diversas propriedades do CSS 2.
Supondo que a largura mínima seja 333px, use a regra abaixo:

* html elemento { width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); } /* seta a min-width para o IE */

Agora, se a largura máxima seja 777px, use:

* html elemento { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); }/* seta a max-width para o IE */

23 2009 janeiro

Documento base para CSS

Autor: g3 em CSS

Última modificação: 13 junho 2012

LESS

Para desenvolvimento CSS, utilizamos a linguagem dinâmica de estilos LESS, a qual nos permite estender o CSS com comportamento dinâmico através de variáveis, mixins, operações e funções.

Para usar LESS é necessário usar um JavaScript que permite ao browser interpretar diretamente a linguagem, ou algum compilador que converta seu código do formato LESS para CSS.

Existem vários compiladores para diferentes sistemas operacionais; no nosso caso utilizamos um compilador que, ao detectar a atualização do arquivo LESS, gera automaticamente o CSS minificado (sem espaços, comentários e quebras de linha), o qual puxamos diretamente em nossos HTMLs.

Organização dos arquivos CSS

Nosso padrão de organização para estilização é separado entre os seguintes arquivos:

Estilos gerais

  1. geral-min.less – Estilos para todos os dispositivos;
  2. desktop-min.less – Dispositivos com largura a partir de 769px;
  3. tablet-min.less – Dispositivos com largura de 480px até 768px;
  4. mobile-min.less – Dispositivos com largura de 320px até 479px;
  5. impressao-min.less – Estilos para versão de impressão.

Estilos específicos

Para grandes projetos deve-se manter os arquivos:

  1. desktop-templates-min.less – Estilos específicados por página (id) para versão desktop;
  2. tablet-templates-min.less – Estilos específicados por página (id) para versão tablet;
  3. mobile-templates-min.less – Estilos específicados por página (id) para versão mobile.

Conforme à dimensão do projeto é recomendavél adicionar o arquivo:

Além de todos arquivos utilizamos um arquivo como biblioteca de classes com estilos gerais. Nesse arquivo ficam as váriaveis e mixins globais do LESS, que podem ser utilizadas em qualquer definição de estilo.

  • elementos.less – Classes com estilos gerais, utilizados em todo os arquivos LESS.

Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.

Media Query

Incluímos no HTML nesse formato:

  <link href="css/geral-min.css?v=1" rel="stylesheet" />
  <link href="css/mobile-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
  <link href="css/tablet-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
  <link href="css/desktop-min.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
  <link href="css/impressao-min.css?v=1" rel="stylesheet" media="print" />
  <!--[if lt IE 9]>
    <link href="css/desktop-min.css?v=1" rel="stylesheet" />
    <script src="js/selectivizr-min.js"></script>
  <![endif]-->

*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.

Caso o projeto seja pequeno, não usamos nenhum arquivo específico para páginas, incluímos todos estilos nos arquivos: “geral.less”, “mobile.less”, “tablet.less” e “desktop.less”.

No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.

elementos.less

/*
  --------------
  BIBLIOTECA DE CLASSES
  --------------
*/


/*
  --------------
  PALETA DE CORES
  --------------
*/


@cor_textos: #000; // Textos de conteúdo.
@cor_body: #fff; // Cor do fundo do site.


/*
  --------------
  CLASSES
  --------------
*/


/* alinhamentos */
.direita { float: right; }
.esquerda { float: left; }
p {
  &amp;.direita,
  &amp;.esquerda { float: none; }
  &amp;.direita { text-align: right; }
  &amp;.esquerda { text-align: left; }
}
.centro { text-align: center; }

/* image replacement */
.rpl { font: 0/0 a; color: transparent; }

geral-min.less

/*
  Cliente: 
  Projeto: 

  --------------
  PADRÕES DE CODIGO - Frameworks FED v3.0
  --------------

  Nossos projetos são desenvolvidos de acordo com um padrão de escrita.
  Mais informações sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
  Qualquer dúvida, mande um e-mail para: contato[at]webstandards.blog.br
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* reset */
  body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
  article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
  button, fieldset, iframe, img { border: 0; }
  input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
  details summary::-webkit-details-marker { display: none; }
  
  html { font: 100% Arial, Helvetica, sans-serif; color: @cor_textos; }
  body { background-color: @cor_body; font-size: .75em; } /* tamanho da fonte: 12px */


  /* formulário */
  form {
    @largura_label: 100px;
    @padding_right_label: 10px;

    #instrucoes-formulario { padding: 1.66em 0;
      p { margin-bottom: .83em;
        &amp;:last-child { margin-bottom: 0; }
      }
    }

    ol, ul { list-style: none; }

    ol {
      li { margin-bottom: .41em; padding: .41em 0; }

      /* label */
      label,
      p,
      ol li:first-child label { float: left; width: @largura_label; padding-right: @padding_right_label; line-height: 2em; text-align: right; }

      /* label interno */
      li li label,
      p.erro,
      li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
      ul li label { margin-right: 0; }

      /* listas internas */
      ol,
      ul,
      li li { display: inline-block; vertical-align: top; }
      li li { margin: 0 10px 0 0; padding: 0; }
    }

    /* mensagem de erro */
    ol p.erro { display: block; }
    p.erro,
    ol li.erro { color: #e33; }
    li.erro { border-radius: 3px; }
    li.erro,
    input.erro,
    textarea.erro { background-color: #f7cac9; }
    ol li li p.erro { margin-left: 0; }

    /* margin left de alinhamento com os campos */
    #instrucoes_formulario,
    ol li p.erro,
    ol ol li:first-child p.erro,
    ol li.confirmacao label,
    button { margin-left: @largura_label + @padding_right_label; }
  }

  // correções ie

  /* linhas */
  .ie6 form ol li { height: 1%; overflow: hidden; }

  /* listas internas */
  .ie6, .ie7 {
    form {
      ol {
        ol,
        ul,
        li li { display: inline; }
      }
    }
  }

  /* mensagem de erro */
  .ie6 form ol p.erro { display: inline; float: left; }


/* ------- CLASSES ------- */

  /* paginação */
  .paginacao {
    li { display: inline-block;
      a[rel="prev"], a[rel="next"] {
        &amp;:hover {
        }
      }
    }
  }

  /* popup */
  .popup {
    display: none; position: absolute; z-index: 10;
    a.fechar { }
  }
  .pelicula { position: absolute; z-index: 9; }

  /* botões */
  .botao,
  .botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
  .botao { padding-left: 10px;
    strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
    &amp;:hover {
      background-position: 0 0;
      strong { background-position: right 0; }
    }
  }
  button.botao::-moz-focus-inner { border: 0; padding: 0; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

desktop-min.less

/*
  --------------
  DESKTOP - Dispositivos com largura a partir de 769px
  --------------
*/

@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("desktop-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }

  /* chrome frame */
  .chrome_frame { position: relative; display: none; height: 116px; padding-top: 25px; background: url(../imagens/chrome-frame-bg.jpg) center 0 repeat-x; font: 12px Arial sans-serif !important; color: #545454 !important;
    .limites { position: relative; width: 845px; margin: 0 auto; padding: 0 20px 0 135px; background: url(../imagens/chrome-frame-logo.png) 20px 0 no-repeat; }
    h3 { margin-bottom: 1em; font-size: 1.33em !important; }
    p { margin: 0 240px 12px 0; }
    a { text-decoration: none; color: #0000ff; }
    .instalar { position: absolute; top: -5px; right: 20px; width: 190px; height: 70px; padding: 15px 10px; border: 1px solid #dadada; background: #fff; font-size: .9em !important;
      p { margin: 0; text-align: center; }
      a.botao_instalar { display: block; width: 118px; height: 30px; margin: 0 auto 15px; background: url(../imagens/chrome-frame-botao.png) no-repeat; line-height: 30px; font-weight: bold; font-size: 1.3em; text-align: center; text-decoration: none; color: #fff; }
    }
    a.fechar { position: absolute; top: -15px; right: -15px; width: 14px; height: 14px; background: url(../imagens/chrome-frame-fechar.png) no-repeat; text-indent: -9999em; overflow: hidden; }
  }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

tablet.css

/*
  --------------
  TABLET - Dispositivos com largura de 480px ate 768px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("tablet-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */



/* ------- CLASSES ------- */



/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

mobile-min.less

/*
  --------------
  MOBILE - Dispositivos com largura de 320px ate 479px
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais
@import url("mobile-templates-min.css"); /* estilos específicos dos templates */


/*
  --------------
  ELEMENTOS e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */

  /* formulário */

  form {
    ol {
      /* label */
      label,
      p,
      ol li:first-child label { display: block; float: none; width: auto; padding-right: 0; text-align: left; }

      li p.erro,
      ol li:first-child p.erro,
      li.confirmacao label { margin-left: 0; }
    }

    #instrucoes_formulario,
    button { margin-left: 0; }
  }


/* ------- CLASSES ------- */
.limites { padding: 10px; }


/*
  --------------
  ESTRUTURA
  --------------
*/


/* ------- TOPO ------- */
.topo { }


/* ------- CONTEÚDO ------- */
.conteudo {

  /* coluna1 */
  .coluna1 { }

  /* coluna2 */
  .coluna2 { }

}


/* ------- RODAPÉ ------- */
.rodape { }

“desktop-templates-min.less”, “tablet-templates-min.less”, “mobile-templates-min.less” e “templates-min.less”

/*
  --------------
  PÁGINAS ESPECÍFICAS
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/* ------- PÁGINA INICIAL ------- */
#inicial { }

impressao-min.less

/*
  --------------
  VERSÃO PARA IMPRESSÃO
  --------------
*/


@import url("elementos.less"); // biblioteca de classes com estilos gerais


/*
  --------------
  ELEMENTOS, ESTRUTURA e CLASSES
  --------------
*/


/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }


/* ------- ESTRUTURA ------- */
.topo, .coluna1, .rodape { display: none; }


/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }

Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.