O design da estrutura CSS pode nos ajudar a criar páginas de alta qualidade de maneira rápida e eficaz e também contribuir para a padronização do código. É claro que cada estrutura é baseada nos esforços de inúmeros predecessores. Aqui está uma estrutura CSS recomendada - a Estrutura CSS Blueprint.
Estruturas CSS + redefinição de CSS: design do zero
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. Introdução
Blueprint é a chamada estrutura CSS. Em comparação, os comentários no código do blueprint são relativamente detalhados.
Siga o método de construção de uma estrutura CSS conforme descrito em Frameworks for Designers de Jeff Croft (ou na versão chinesa de Understanding Web Frameworks e How to Build a CSS Framework):
Existem várias maneiras possíveis de construir uma estrutura, mas a mais comum e possivelmente a mais útil é abstrair seu CSS comum em folhas de estilo individuais, cada uma cobrindo uma parte específica do todo. Por exemplo, você pode ter uma folha de estilo que define. a tipografia e outra que lida com a redefinição em massa A beleza da abordagem é a capacidade de incluir seletivamente apenas os estilos necessários. Você pode acabar com seis ou sete folhas de estilo diferentes em sua estrutura, mas se um projeto específico não o fizer. Se você não precisar de um ou dois deles, eles não precisam ser incluídos. A estrutura que criamos em nosso escritório possui cinco folhas de estilo:
reset.css — lida com a redefinição em massa.
type.css — cuida da tipografia.
grid.css — lida com a grade de layout.
widgets.css – lida com widgets como guias, menus suspensos e botões “leia mais”.
base.css — inclui todas as outras folhas de estilo, de modo que só precisamos chamar base.css de nossos documentos (X)HTML para usar toda a estrutura.
O blueprint é construído de forma semelhante :
Dividir e conquistar :
Em termos de organização funcional, buleprint dispersa funções como layout, tipografia, widget, reset e impressão em diferentes arquivos CSS. Isso torna conveniente para os usuários importar apenas as funções que desejam usar, em vez de importar todos os arquivos, e melhora o desempenho de carregamento da página. Atualmente, a seção de componentes fornece apenas processamento de botões e ainda não alcançou a abordagem MECE ("mutuamente independente e completamente exaustiva") da McKinsey.
Interface unificada :
Embora as funções estejam dispersas em vários arquivos CSS, ao importar, apenas o mesmo arquivo screen.css precisa ser incluído. Os detalhes específicos da importação são processados em screen.css, que unifica a interface externa.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="tela, projeção" />
Descrição do arquivo css incluído no blueprint:
tela.css
Este é o arquivo principal do framework. Ele importa outros arquivos CSS do diretório "lib" e deve ser incluído em todas as páginas.
Semelhante à função base.css de Jeff Croft, você só precisa incluir este arquivo e ele pode ser importado
imprimir.css
Este arquivo define algumas regras de impressão padrão, para que as versões impressas sejam incluídas em cada página.
Usado para lidar com impressão e pode ser classificado como widget.
lib/grid.css
Este arquivo configura a grade (é verdade). Ele possui muitas classes que você aplica aos divs para configurar qualquer tipo de grade baseada em colunas.
Usado para lidar com o layout da página (colunas)
lib/tipografia.css
Este arquivo define algumas tipografias padrão. Ele também possui alguns métodos para algumas coisas realmente sofisticadas relacionadas ao seu texto.
Usado para lidar com o layout dos elementos da página.
lib/reset.css
Este arquivo redefine os valores CSS que os navegadores tendem a definir para você.
Usado para redefinir a página e especificar valores padrão para elementos da página que não especificam atributos CSS.
lib/botões.css
Fornece ótimos botões somente CSS.
Usado para lidar com botões, que podem ser classificados como widgets
lib/comprimido.css
Uma versão compactada dos arquivos principais Use-a em todos os sites ativos.
Consulte screen.css para obter instruções
Forneça arquivos CSS compactados (incluindo grid.css, typography.css, reset.css, Buttons.css).
2. Pesquisa sobre o uso de cada módulo
2.1. Pesquisa em grid.css
Manipulação de compatibilidade de centralização entre navegadores
De modo geral, para lidar com as diferenças entre Firefox e IE ao lidar com centralização, são utilizados os seguintes métodos:
body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
Obtido em: http://www.maxdesign.com.au/presentation/center/
Como lidar com o projeto:
body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* Um contêiner deve agrupar todas as suas colunas */ .container { text-align: left position: relativo; : 0 auto; /* Layout de centros */ width: 1150px; /* Largura total */ }Como implementar o blueprint para colunas (Colunas):
blueprint define .column, .span-x e .last, que são combinados para realizar a função da coluna.
Entre eles: .column define o atributo float da coluna .span-x define a largura da coluna .last define a margem direita para 0px;
| .column { float : left; margin-right: 10px; padding: 0;}/* Use essas classes para definir a largura de uma coluna */ .span-1 { width: 30px; : 70px; }.span-3 { largura: 110px; }.span-4 { largura: 150px; 10 {largura: 390px;....span-23 {largura: 910px;}.span-24 {largura: 950px; : 1150px; margin: 0; }/* O último elemento em um bloco de múltiplas colunas precisa desta classe */ .last { margin-right: 0 } Implementação de três colunas: <div class ="container" > <div class ="column span-24" > Cabeçalho </div> <div class ="column span-4" > Barra lateral esquerda </div> <div class ="column span-16" > Conteúdo principal </div> <div class ="column span-4 last" > Barra lateral direita </div> </div> Implementação de quatro colunas: <div class ="container" > <div class ="column span-26" > Header </div> < div class ="column span-4" > Barra lateral esquerda </div> <div class ="column span-3 " > Conteúdo principal 0 </div> <div class ="column span-25" > Conteúdo principal 1 </ div div> <div class ="column span-4 last" > Right sidebar </div> </div> Observe que a largura em .container (que define a largura de toda a página) foi alterada para 1150px. colunas: para colunas múltiplas (por exemplo, 5 colunas), existem colunas em branco (por exemplo, as colunas esquerda e direita estão em branco), você pode usar .append-x e .prepend-x para preenchê-las. Entre eles, .append-x adiciona uma coluna em branco após a coluna (preenchimento à direita) e .prepend-x adiciona uma coluna em branco antes da coluna (preenchimento à esquerda). Definição geral do contêiner /* Um contêiner deve agrupar todas as suas colunas */ .container { text-align: left; preenchimento total: 0; largura */ } |
2.2. Pesquisa sobre reset.css
O código original de reset.css deve vir de Eric Meyer Eric Meyer possui dois logs sobre redefinição, que são usados para lidar com o problema de diferentes valores padrão entre navegadores. A documentação de Eric Meyer é excelente:
Redefinir raciocínio: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
Redefinir recarregado: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Por que redefinir
A razão básica é que todos os navegadores têm padrões de apresentação, mas nenhum navegador tem os mesmos padrões (ok, não há duas famílias de navegadores – a maioria dos navegadores baseados em Gecko tem os mesmos padrões).
Por exemplo, alguns navegadores recuam listas não ordenadas e ordenadas com margens esquerdas, enquanto outros usam preenchimento à esquerda. Nos últimos anos, abordamos essas inconsistências caso a caso;
Por que usar o estilo de redefinição em vez do seletor universal
O chamado seletor universal utiliza * para representar todos os elementos do documento, por exemplo
* { margin: 0;} Alguns recursos sobre o tema estilo de redefinição:
Biblioteca de redefinição YUI: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
Os artigos a seguir são, na verdade, artigos que discutem a estrutura ou dicas de CSS, mas todos mencionam o tópico de redefinição.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
http://businesslogs.com/design_and_usability/my_5_css_tips.php
http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
2.3. Pesquisa sobre tipografia.css
typography.css é usado para determinar o formato de layout padrão (linha de base) dos elementos da página:
Configurando o tipo na Web para uma grade de linha de base:
http://alistapart.com/articles/settingtypeontheweb
2.4. Pesquisa em botões.css
Redescobrindo o elemento Button discute os vários benefícios de usar o elemento button para substituir o elemento input. O elemento button fornece funções mais ricas.
http://particletree.com/features/rediscovering-the-button-element
2.4. Pesquisa de impressão.css
Eric Meyer tem um artigo sobre como implementar a função print em css, que pode ser usado como referência para entender print.css.
Design CSS: indo para impressão
Imprimir diferente
2.5, compactado.css
compact.css é um pacote que compacta vários arquivos de blueprint. Ele também compacta o arquivo css, removendo espaços inúteis, novas linhas, comentários e outros textos.
Este método é usado durante a implantação em sistemas de produção para evitar a importação de vários arquivos CSS na página e também é útil para melhorar o desempenho da página.
De acordo com as instruções em lib/screen.css, deve ser utilizado o serviço de compactação CSS fornecido pelo adolescente:
http://teenage.cz/acidofil/tools/cssformat.php
Além disso, serviços semelhantes que fornecem otimização e compactação de CSS e JavaScript incluem:
http://csstidy.sourceforge.net/ (código aberto)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (baseado em csstidy)
3. Exemplos de uso
4. Documentos de referência
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. Projetos relacionados
gerador de blueprint: http://kematzy.com/blueprint-generator/
Trípoli: http://monc.se/tripoli/
Artigo recomendado: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/