Os frameworks CSS tendem a ser descartados por muitos autores do CSS; O código bloat e os nomes das classes não-semânticas geralmente estão no topo da lista de motivos. Mesmo sem usar um, compartilhei a mesma opinião, mas isso pode ter mudado depois de tentar alguns deles enquanto faz alguma pesquisa recentemente ...

Frameworks existentes

Há uma abundância de frameworks CSS lá fora, dos mais simples que apenas fornecem soluções de layout para aqueles que incluem formas, tipografia e módulos de layout de fluidos.

Pelo que posso dizer, designers e agências que trabalham com frameworks regularmente tendem a usar qualquer um Blueprint CSS or Sistema de grid 960 (muitas vezes abreviado para 960gs). Gráficos YUI do Yahoo! também é popular. Estes foram os três frameworks com os quais experimentei.

Preconceitos

Eu tinha frameworks todos descobriram: eles eram para autores CSS que queriam ir com a solução fácil e não criar seus próprios fundamentos CSS, ou para aqueles que realmente não queriam entender como o CSS funciona - basicamente, qualquer pessoa que esteja procurando uma solução fácil.

Se há uma coisa que eu não gosto, são puristas que não estão abertos às idéias de outras pessoas e que nunca mudam de idéia. Eu amo o CSS e posso ser um purista em alguns casos, mas também entendo que nem tudo pode ser perfeito e às vezes as folhas de estilo são bagunceadas. Todos aspiramos a criar um código bonito e limpo, semântico e válido, mas ao trabalhar em projetos reais, que continuam sendo atualizados, onde mais de uma pessoa em diferentes momentos edita o CSS, cada um com sua interpretação de "perfeito" e com seu próprio nível de experiência e experiência, a eficiência geralmente tem precedência sobre a pureza do código.

Find a good online DIY source that you trust. I recommend This Old House for detailed and easy-to-understand instructions on common plumbing repairs you can do yourself. Make sure you know where to locate the main water supply and the supply to each plumbing application, which is typically located under a sink or behind the toilet. Lastly, familiarize yourself with local codes and regulations. Some municipalities require that you hire a certified plumber for certain plumbing jobs.

Mas eu divago. O que quero dizer é que, às vezes, podemos usar o nome da classe não-semântico estranho e nenhum cachorrito vai morrer. É para isso que os quadros são muitas vezes criticados. Nomes de classe como ‘grid_16‘ ou ‘span-8‘ estão longe de ser ideais, mas dada a necessidade de ser adaptável a qualquer tipo de projeto, eles fazem sentido (na maioria dos casos pelo menos).

Esses nomes de classe não-semântica podem ser emparelhados com nomes de ID melhores (como ‘class="span-8" id="aside"‘) ou, ao usar o HTML5, com nomes de elementos semânticos.

Enquanto eu estava tentando esses frameworks, fiz algumas perguntas no Twitter (principalmente queixas, para ser justo) e, embora isso não seja científico, a maioria das pessoas parecia repreender o uso de frameworks. Parece lembrar de alguém, mesmo dizendo que eles são "inúteis" e muitos outros comentários negativos. Duas ou três pessoas disseram que os usaram, e ficaram muito felizes com isso (as opiniões divergiram sobre qual delas).

Wireframing

Eu sempre tive a ideia de que frameworks seriam bastante úteis para criar wireframes no navegador, então foi o que eu decidi replicar com Blueprint, 960gs e YUI 3 Grids, usando um layout muito simples.

The liquid in the clear zone (between the sludge and scum layers) is discharged from the septic tank to other components of system, and ultimately to the drainfield. The tank must have sufficient capacity to store the accumulated sludge and scum for several years. Periodically, the tank must be pumped to remove the solids before they are discharged from the tank and cause damage to the drainfield or other vital system components. After many years, some septic tanks (especially those made of metal) deteriorate to the extent that they are no longer water-tight and/or they are no longer structurally sound. septic system restoration product when your system fail

Blueprint

O framework CSS Blueprint foi criado por Olav Bjørkøy e lançado em agosto de 2007. Geralmente é considerado o framework CSS mais abrangente, uma vez que atende não apenas à criação de layout baseado em grade, mas fornece, e tem, uma fundação tipográfica sólida, considerando aspectos como o ritmo vertical. Ele também fornece uma folha de estilo de reinicialização e impressão e estilo básico para formulários.

A estrutura usa por padrão um layout de 24 colunas (cada coluna abrange 30 pixels e tem uma margem direita de 10 pixels), mas você pode criar layouts diferentes usando o compressor incluído nos arquivos.

Usar o Blueprint é tão fácil como incluir um wrapper com uma classe de “container” em torno dos blocos restantes na página. Dependendo da largura de cada um dos recipientes internos, você precisa usar uma classe de, por exemplo,, “span-24”, para uma div que abrange toda a largura da página, ou “span-8”, para um bloco que abrange 8. Se o recipiente for o último em um recipiente ou coluna específico, ele também deve incluir uma classe de “last”. O HTML para um layout acima seria assim (eu omiti o conteúdo, é claro):

Eu também adicionei uma classe “b” (perdoe o nome do presente) para o div que têm conteúdo para que eu possa adicionar um fundo claro e alguma margem inferior para visualizar o quadro de arame melhor (estamos apenas fazendo um exemplo rápido aqui, então é bom incluir isso diretamente na cabeça):

Aqui está uma captura de tela do wireframe completo:

Isso me levou menos de 10 minutos para fazer (eu sei que é bastante básico, porém), incluindo ter uma leitura rápida nos guias de Introdução.

960gs

A estrutura CSS do Sistema de Grade 960 foi desenvolvida por Nathan Smith e foi lançado em março de 2008. Este quadro foi desenvolvido com um forte foco na grade; mesmo que forneça estilos tipográficos básicos, seu objetivo principal é fornecer uma base de navegador cruzado (possui suporte de navegador A-Grade completo, conforme definido pelo Yahoo!) que permite muitas variações dos layouts baseados em grade mais comuns.

Para 960gs, estou indo com um layout ainda mais simples - a principal idéia aqui é mostrar as diferenças entre nomeação de classe e nidificação de framework para framework.

A estrutura funciona, por padrão, em uma grade de 12 ou 16 colunas. Precisamos adicionar um recipiente que envolva os blocos internos com uma classe de “container_16” (ou “container_12”); os recipientes internos devem ter classes de “grid_16”, “grid_14”, etc., dependendo de quantas colunas eles ocupam. Aqui está a marcação HTML final para o nosso layout simples:

E o que você deve ver:

Tal como acontece com o Blueprint, existem várias ferramentas on-line que permitem configurar a estrutura para suas necessidades. Fluid 960 Grid System é baseado no sistema de grade 960 original, mas permite layouts fluidos e fixos, e inclui estilo básico para elementos como navegação, tabelas, formulários, artigos e tipografia.

Grades YUI 3

O framework YUI 3 Grids faz parte do Yahoo! Biblioteca de interface do usuário (YUI). A biblioteca inclui recursos de JavaScript, bem como CSS (YUI 3 CSS também incorpora folhas de estilo de redefinição e tipografia). Funciona de forma semelhante às outras estruturas apresentadas neste capítulo, com uma diferença: existe sem largura predefinida para o recipiente principal, apenas "unidades" predefinidas em que um recipiente pode expandir dentro de outro recipiente.

Neste caso, precisamos adicionar a largura desejada ao body elemento da nossa página, como tal:

A propriedade “margin: auto” irá centrar nosso conteúdo na página. Em seguida, como nos outros quadros, precisamos incluir um recipiente de embalagem com a classe “yui3-g”. Os contêineres dentro dele levam nomes de classe com base na porcentagem da largura que devem preencher (ou "unidades"). Assim, por exemplo, se a barra lateral ocupar um terço da largura total, deve ter uma classe de “yui3-u-1-3”, e se a área de conteúdo principal ocupar dois terços da largura total, deve ter uma classe de “yui3-u-2-3”. O YUI vem com um conjunto de classes de unidades predefinidas (que estão listadas no framework do site).

O exemplo final teria o seguinte HTML:

Parecendo isso:

Observe que a YUI não possui calhas entre as colunas - vejo isso como uma desvantagem.

Meu favorito

Para mim, há um vencedor claro e é Blueprint. O guia foi claro, ele fornece muitos tutoriais e exemplos da primeira página do site, e o fato de que ele fornece uma boa base tipográfica é uma grande vantagem.

Outra vantagem do Blueprint é a comunidade por trás disso, que está constantemente criando e lançando novos plugins, temas e outras ferramentas que podem ser usadas em conjunto com a estrutura básica.

Eu senti senti 960gs lógica muito mais difícil de entender; Levou mais de 30 minutos para descobrir como funcionou o quadro e terminar o layout. Se eu for usar uma estrutura, vou fazer isso para economizar tempo, então não achei essa experiência muito boa. Além disso, ao contrário do site do Blueprint, os 960gs não tinham um tutorial claro para começar, então eu tive que procurar artigos fora do site para "começar". Eu gosto do framework Fluid 960gs, mas não tenho certeza se não há algo parecido com o Blueprint.

A maioria das pessoas com quem conversei ao fazer esta pequena experiência mencionou que eles realmente não apreciaram os frameworks, mas os que fizeram, juraram 960gs, então pode ter sido que eu simplesmente não fui apresentado à direita ( ou mais simples). Existem sites bonitos construídos no topo desta estrutura (um rápido olhar em seu site é prova suficiente), como o lindo Black Estate Vineyard:

O fato que YUI é adaptável a qualquer largura é uma maior vantagem, mas a quantidade reduzida de combinações de unidades tornou um pouco desconfortável para usar, e me senti um pouco restrito quanto ao que eu poderia fazer com meus layouts. Se isso for incorreto, eu adoraria se alguém me deixasse saber, não consegui encontrá-lo facilmente no guia inicial.

Conclusão

Eu mencionei acima que eu acreditava que os frameworks CSS fossem "a solução fácil". Eu ainda acho que isso é verdade, mas não vejo isso como algo ruim: por que gastar horas criando layouts CSS perfeitamente desenhados manualmente quando existem excelentes fundações sobre as quais podemos construir já? A vida não é apenas sobre a codificação (realmente) e há coisas melhores que eu posso fazer com o meu tempo do que criar problemas para os quais já existem soluções.

Isso não significa, no entanto, que eu acredite que todos deveriam usar os frameworks existentes em seus projetos. Idealmente, você estaria trabalhando com seu própria framework ou modelo, adaptado às suas necessidades. Significa apenas que não penso que os frameworks CSS sejam tratados como algo ruim e que, definitivamente, podem ser úteis em alguns casos, ou mesmo como base ou inspiração para criar uma estrutura personalizada. E certamente não vou condenar qualquer designer ou agência que use soluções out-of-the-box, como o Blueprint, porque os benefícios que você obtém de usá-los podem superar as desvantagens, como folhas de estilos detalhadas e nomes de classes não semânticas.

Não me interpretem mal: eu prospero em uma boa peça de HTML e CSS semântico, e, como a maioria de vocês, eu também queria vomitar a primeira vez que eu olhei para as classes não-semânticas que esses frameworks usam. Eu vou olhar para você de lado se sua navegação for um parágrafo em vez de uma lista e eu posso deixar de seguir você no Twitter se eu souber que você já usou nomes de classe como “redLink”. Ainda acredito que os nomes das classes não-semânticas são os característica menos desejável de quadros; idealmente, não devemos ter aulas assim em nossas folhas de estilo, mas também acho que há momentos em que precisamos ser flexíveis e nos adaptar e aceitar que coisas assim vão acontecer.

Talvez sejam uma boa solução rápida ou projetos de baixo orçamento, ou protótipos (embora o código do protótipo vá para a produção, então fique atento se você for especialmente preguiçoso, como eu). Acabei de pensar que este seria um bom tópico para discutir, e acho que não me importo em dizer isso Eu gosto de coisas que as pessoas geralmente são repelidas por, aqui.

O meu veredicto: não, frameworks não são do mau.

Então, minha pergunta é, você já usou uma estrutura? Você concorda que eles são uma ótima ferramenta, ou fiquei louco? Eu adoraria ouvir seus pensamentos.