Padrões Web e CSS - Caio J Ruman

Não é exatamente um CSS Framework, algo que eu também não considero útil para css, mas sim uma base para iniciar um projeto.
Eu tomei como base o “Css framework” desse site, que eu achei lendo o artigo no pinceladasweb sobre css framework.
Eu tomei a liberdade de modificar bastante os arquivos, modificando a estrutura de pastas de acordo com o que eu uso normalmente no trabalho, incluindo novos arquivos e retirando arquivos que eu não uso normalmente.

O css está dividido 7 arquivos:
base.css
estrutura.css
internas.css
reset.css
ie6.css
ie7.css
print.css

O base.css possui somente declarações principais (html, body e #principal), o import dos outros arquivos, o clearfix e classes básicas (bold, posicionamento de imagens). Esse também é o único arquivo que eu chamo no html.

O estrutura.css é o arquivo que vai conter todo o css relacionado a estrutura do site, normalmente é a home ou o esqueleto do site que se mantém por todas as páginas internas.

O internas.css contém todos os estilos das páginas internas, separados por blocos de comentário.

O reset.css é o arquivo de reset do Eric Meyer, com pequenas modificações, como a inclusão do button no reset e a remoção do line-height: 1 no body.

ie6.css e ie7.css são os estilos para o IE6 e IE7, reespectivamente.

E o print.css é o css de impressão.

Eu também inclui o arquivo iepngfix.htc, que eu uso para fazer png funcionar parcialmente no IE6.

Baixe aqui o meu arquivo de Css Framework.

Usem do modo que acharem melhor!

ps: O tema novo do blog deve sair nesse final de semana!

Se você já usou alguma vez uma imagem para background de um input text, sabe que no IE6, para a imagem não dar scroll quando uma quantidade de texto maior que o tamanho da caixa de texto for digitada, é só declarar background-attachment: fixed. Preferencialmente numa folha de estilos própria para o IE6.
Infelizmente, isso não funciona no IE7.

Até o momento, só há 2 modos de fazer com que a imagem não de scroll junto com o texto.

Primeiro modo, e mais simples e besta: Definir um maxlenght para a caixa de texto do mesmo tamanho da mesma.

Segundo modo, quando o primeiro modo não for possível:

Coloque um span em volta do input text, e na folha de estilos própria para o IE7, remova o background do input text e coloque no span.

Segue exemplo abaixo:
Exemplo do fix para background-image no IE7

Não é a alternativa mais elegante, mas é a única que eu descobri até o momento.
Se você não quiser “sujar” o html com tags inúteis, você pode colocar os spans via javascript.

Algo que os designers da empresa que trabalho sempre fazem, e eu não sabia um modo de fazer usando os padrões, era o de usar backgrounds diferentes para as laterais de uma página. Eu também nunca tinha parado para pensar em um modo de fazer. Normalmente quando precisava fazer isso, eu usava uma imagem grande, em torno de 1400-1600px de largura, para ser o background da página. Ou iria reclamar com o designer!
Então eu participei do concurso do site cssoff, e o vencedor do primeiro concurso usou essa técnica que eu vou descrever agora:

Em volta de todo o conteúdo do site, coloque duas divs, e de um id para elas, por exempo, #bgright e #bgleft. No exemplo elas estarão envolta da div #principal.

A div #principal estará centralizada, com um tamanho fixo (800px), e a seguinte margin:

margin: 0 auto 0 -400px;

Atente ao detalhe da margem esquerda tem um valor negativo que é a metade do tamanho da div. Isso é importante para centralizar a div #principal usando essa técnica.

A div #bgleft só precisa ter um background a sua escolha.
A div #bgright precisa ter um background a sua escolha e margin-left: 50%.

Pronto!

Página de exemplo: Exemplo para background laterais diferentes

O único porém dessa técnica, é que você vai ter uma ou duas divs sem sentido envolvendo todo o site.

Nota:
A ordem das divs tem que ser exatamente essa. #bgleft, #bgright com margin-left: 50% e a #principal com um tamanho fixo e margin: 0 auto 0 -x, onde x é metade do tamanho da div principal.
Caso a ordem das divs #bgleft e #bgright forem invertidas e aplicar margin-right: 50% na bgleft, o site não irá centralizar no Safari vs. 3.0.3 Windows. Nos outros browsers em que testei irá se comportar normalmente.

Nota2:
Você pode remover a div #bgleft, e o background esquerdo passa a ser a tag body. Desse modo é uma tag inútil a menos no html.

Dúvidas e sujestões? Entre em contato ou deixa um comentário abaixo!

E tem início o meu blog sobre css e padrões!
Aqui pretendo postar sempre que possível técnicas e dicas de css, comentários sobre o trabalho e o que me der na telha!