Qual é um bom recurso online para 'padrões de design' de CSS?[fechado]

Question

Alguém aí pode recomendar um bom recurso on-line para 'padrões de design' CSS?

Eu sei que os padrões de design em um contexto de software geralmente se referem a padrões de design baseados em OO, mas quero dizer padrões de design no sentido mais amplo do termo:ou sejasoluções comuns e limpas para problemas/tarefas comuns.

Um exemplo de tal recurso seria esta lista de designs de mesa, isso fornece tudo o que você realmente precisa saber sobre como deixar as tabelas bonitas usando um conjunto de técnicas CSS.

Outros exemplos de problemas comuns que poderiam ter boas soluções definidas seriam coisas como cantos arredondados em divs, layouts de formulário altamente utilizáveis, etc.

Answer 1

Eu me refiro a Uma lista à parte artigos o tempo todo para esse tipo de coisa.Eles fazem muitas pesquisas de tentativa e erro para encontrar maneiras realmente criativas de lidar com esses problemas comuns de CSS da maneira mais limpa e portátil possível.

Answer 2

Alguns sites que abordam padrões de web design estão listados abaixo.Eles não fornecem especificamente HTML e/ou CSS para alcançar os resultados desejados, mas fornecem exemplos de sites ativos que você pode ver fonte ligado (ou, melhor ainda, use Bug de fogo).

Padrões de UI

Este é provavelmente o melhor do grupo.Ele divide as coisas em categorias que cobrem a amplitude das tarefas de design de páginas da web.Você encontrará categorias como nuvens de tags, visualização ao vivo e registro de usuário, entre muitas outras.Este é um recurso realmente abrangente e bem organizado.Ele explica cada padrão e fornece muitos exemplos.

Toque padrão

Semelhante aos UI-Patterns, embora atualmente não seja tão abrangente.É necessária uma abordagem mais social para agrupar padrões de design, permitindo que os usuários criem suas próprias categorias ("conjuntos de usuários") e as preencham com sua própria seleção de sites.

Biblioteca de padrões de design do Yahoo

Ao contrário dos outros dois, este não fornece muitos exemplos de sites reais.Está bem organizado e bastante abrangente.

Elementos de Design

Este é um blog que apresenta vários elementos de web design.Não discute os padrões, mas é bom como uma fonte rápida de inspiração ou como um meio de iniciar sua própria análise.

Answer 3

O Tutorial flutuante é um excelente ponto de partida para aprender o importante atributo CSS "float" e como usá-lo para criar layout de conteúdo usando alguns padrões comuns, incluindo layouts líquidos de duas e três colunas.

O Floatutorial leva você através do básico de elementos flutuantes, como imagens, tampas de soltar, botões próximos e traseiros, galerias de imagens, listas embutidas e layouts de várias colunas.

Answer 4

O já mencionado Uma lista à parte é realmente bom.Outro site que uso desde que comecei o desenvolvimento web é o SitePoint.com.Aqui está o seu Referência CSS.Se você quer um bom livro sobre CSS, o dele é um dos meus favoritos.

Answer 5

A coisa mais próxima de um "padrão de design" em CSS são os layouts comuns.A melhor ferramenta para aproveitar layouts comuns, larguras de colunas, etc.é Sistema de grade 960, no 960.gs

Assista a este screencast para uma breve introdução.Isso economiza muito tempo e ajuda a aplicar todos os padrões de layout comuns com o mínimo de código:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Tudo o que você precisa fazer é aplicar as classes adequadas e fazer um pouco de aritmética para garantir que todas as larguras das colunas sejam somadas.

O livro que mais recomendo sobre CSS é Domínio de CSS por Andy Budd (cssmastery.com).É um pouco pequeno, mas me ajudou mais do que qualquer outro livro sobre CSS.