Documentação
Tags e como usar
Começar a usar

- Coloque o arquivo cleansite.css no servidor

- Chame-o no arquivo html/php - link rel='stylesheet" href="cleansite.css'

- Coloque a classe cleansite no body - body class='cleansite'

Agora é só aprender as classes

.logo É a largura em % que seu logo ficará topo.

.search É a largura em % que a pesquisa ficará no topo.

.logo_area Cria a área em % para que sua logo fique centralizad

.search_area Cria a área em % para que a pesquisa se encaixe no padrão do topo.

.logo_box_left Coloca a logo à esquerda de forma que a centralize. Não utilize .box_left.

.logo_box_right Coloca a logo à direita de forma que a pesquisa fique à direita. Não utilize .box_right.

O .blue , O .red , O .rose , O .pink , O .black , O .white , O .orange , O .yellow , O .green , O .violet , O .lightblue , O .lightred , O .lightrose , O .lightpink , O .lightblack , O .lightwhite , O .lightorange , O .lightyellow , O .lightgreen , O .lightviolet ,

O .bg_blue , O .bg_red , O .bg_rose , O .bg_pink , O .bg_black , O .bg_white , O .bg_orange , O .bg_yellow , O .bg_green , O .bg_violet , O .bg_lightblue , O .bg_lightred , O .bg_lightrose , O .bg_lightpink , O .bg_lightblack , O .bg_lightwhite , O .bg_lightorange , O .bg_lightyellow , O .bg_lightgreen , O .bg_lightviolet ,

.big Ao colocar a classe .big em um span, você obterá o tamanho de texto em proporção de 150% ao padrão atual.

.medium Ao colocar a classe .medium em um span, você obterá o tamanho de texto de 120% ao padrão atual.

.small Ao colocar a classe .small em um span, você obterá o tamanho de texto de 100% ao padrão atual (irá manter).

.typetext Ao colocar a classe .typetext em um span, você obterá o tamanho de texto de 95% ao padrão atual.

.left Coloca o texto alinhado à esquerda.

.right Coloca o texto alinhado à direira.

.center Coloca o texto no centro.

.justify Coloca o texto justificado.

.menu É definido por esta classe: li, a , a:hover para retirada o estilo da lista e sublinhado (para colocar lado à lado use .left

Quando usar: Use quando for criar um menu horizontal ou vertical, ou até mesmo para qualquer lista onde voc~e precise usar links e não queira o círculo padrão da lista li.

.full 100% de largura

.full_largue 90% de largura

.full_medium 80% de largura

.full_small 70% de largura

.fifty 50% de largura - Funciona com 2 do mesmo dentro da section

.fourty 25% de largura - Funciona com 4 do mesmo dentro da section

.thirty 33% de largura - Funciona com 3 do mesmo dentro da section

.five 15% de largura e padding de 2.25% - Funciona com 5 do mesmo

.six 15% de largura e padding de 0.6% - Funciona com 6 do mesmo

.sixty 66% de largura - Funciona seguido do .thirty

.box_left Posiciona a Div à esquerda

.box_right Posiciona a Div à direita

.box_center Centraliza a Div

.box_none Dá um clearfix na div

.rounded_big Arrendondamento de 30px

.rouded_medium Arrendondamento de 20px

.rounded_small Arrendondamento de 10px

.content Atribui uma div com 1% de margem e 1% de espaçamento interno, caso não esteja suficiente.

Quando usar: É propriado para quando o conteúdo está muito encostado um no outro, mas deve-se atentar para usá-lo em todas que estiverem lado à lado, para não gerar desconforto visual

.define_background_x Defina x como id para atribuir background-image à uma div, com tamanho cover size e no-repeat;

.define_background_with_pattern_x Defina x como id para atribuir background-image à uma div, com tamanho cover size e no-repeat e pattern escura por cima;

.ads_full Para propagandas horizontais ocupando 60% da tela, centralizado

.ads_square Para propagandas de sidebar

.padding A tag footer já está definida com largura 100%, basta acrescentar a classe .padding para obter um rodapé padrão

Sobre Cleansite Framework
Framework CSS

Inicialmente criada para uma revista digital, o cleansite framework é um framework css leve, e de fácil compreendimento, contando apenas com tags importantes para o bom funcionamento responsivo de um site.

Como o nome já diz, esta framework é limpa e leve, para ser implementada pelos desenvolvedores em seus projetos. É um super adianto de trabalho ter uma framework como esta para não se preocuopar com o responsivo.

A documentação é simples e direta, podendo ser estudada rapidamente para inicar seu projeto.

Nós disponibilizamos uma framework js com algumas interações à implementar ao seu layout, criando assim, um template mais dinâmico. Baixe e incremente o seu projeto! Baixe aqui




® cleansiteframework.com