A caixa de ferramentas e recursos do 960 Grid System
O 960 Grid System foi criado por Nathan Smith como uma maneira de agilizar o fluxo de trabalho de desenvolvimento da Web, fornecendo dimensões comumente usadas, com base em uma largura de 960 pixels.
O 960.gs (ou qualquer estrutura CSS) foi desenvolvido principalmente para prototipagem rápida, reduzindo tarefas repetitivas e tediosas, mas também é mais do que adequado para ser usado em qualquer projeto de web design.
Ele dará ao seu site uma base sólida e estruturada para você construir e modelar seu design.
Neste artigo, você encontrará tutoriais, uma mostra de sites projetados usando os 960.gs, spin offs, temas básicos de WP construídos nos 960.gs e possíveis estruturas alternativas, se por algum motivo você não gostar da grade 960 sistema.
Dentro do pacote de download, há folhas de rascunhos imprimíveis, layouts de design e um arquivo CSS que possuem medidas idênticas.
Você tem dois modelos, uma grade de 12 colunas dividida em partes de 60px e uma grade de 16 colunas dividida em 40px. Cada coluna tem 10 pixels de margens à esquerda e à direita, que criam calhas de 20 pixels de largura entre as colunas.
Pagina inicial : 960.gs Página inicial .
Download: Baixe o 960.gs .
Demonstração: Veja a página de demonstração de 960.gs .
960.gs Tutoriais
960 CSS Framework - Aprenda o básico
Este é um ótimo tutorial básico para você começar, escrito por Stefan Vervoort da divitodesign. Você é levado através dos fundamentos do carregamento do framework, então você pode começar a desenvolver com 960.gs rapidamente.
Trabalhando com 960.gs
Outro tutorial que leva você através dos fundamentos da instalação do 960.gs, especialmente útil para o CSS desafiado.
Uma visão detalhada do 960 CSS Framework
Uma vez que você aproveite a oportunidade para passar um tempo com 960.gs, ficará surpreso com o tempo que pode potencialmente ser economizado ao desenvolver seus projetos na web.
Prototipagem Com o Grid 960 CSS Framework
Este artigo cobre todo o processo de prototipagem, explica os fundamentos da Grid 960, planejando a grade para um projeto e codificando o protótipo. Tão rápido quanto isso.
Crie um tema de jornal com o WP_Query e o 960 CSS Framework
Este tutorial ensinará como usar o WP_Query para criar um tema de jornal de 3 colunas que tenha todas as postagens principais do blog na coluna principal e, ao lado, um conjunto de postagens de uma categoria selecionada. Usando o framework 960 CSS para o layout e o restante do tema, você verá como isso acelerará muito sua produtividade.
Projetar um novo tema de blog na grade 960
Este tutorial ensina a criar um tema de blog no Photoshop projetado para ser usado na estrutura do 960. Este tutorial foi desenvolvido mais para a teoria de web design do que a técnica do Photoshop, mas gasta consideravelmente mais tempo na teoria e na aplicação do design.
960 Spin Offs
Typogridphy - Uma estrutura CSS tipográfica e de layout de grade
O Typogridphy é um framework CSS construído para permitir que web designers e desenvolvedores front-end codifiquem rapidamente layouts de grade que sejam tipograficamente agradáveis. Ele permite que você crie layouts de grade que são versáteis e atraentes, valida xHTML e CSS estritos. Ele também usa um método tipográfico conhecido como "criação de ritmo vertical" , em que todas as linhas adjacentes de texto se alinham horizontalmente, independentemente de quebras de linha e novos parágrafos.
Demonstração: Demonstração Typogridphy
Overture - Fluid 960 Grid System 1.0
Desenvolvido por Stephen Bau de Design7 , ele construiu uma biblioteca de elementos HTML comumente usados, combinando-os com CSS para tipografia e layout, e adicionando alguns efeitos básicos de bibliotecas JavaScript populares (principalmente MooTools). Após o download, você pode escolher entre três modelos: largura fixa de 960 px , largura de fluido de 12 colunas ou largura de fluido de 16 colunas . Esses modelos são incríveis, você tem que ver os detalhes para acreditar.
Demonstração: Demonstração de abertura .
Mostruário
Todos os belos sites abaixo foram construídos usando o sistema de grade 960:
Temas do WordPress
Assim como os 960.gs reais, esses temas do WP são praticamente sem estilo e com funcionalidades muito básicas, mas foram criados usando os 960.gs. Muito útil para qualquer desenvolvedor WP.
5 anos WordPress Tema
Um tema básico do WP construído usando os 960.gs.
Tema WordPress 960bc
O tema 960bc é essencialmente uma tela em branco com estilo mínimo e nenhuma imagem baseada no sistema de grade 960 (apenas 12 colunas) para desenvolvedores do WordPress que desejam trabalhar em um layout tradicional baseado em grade.
Alternativas possíveis
Escolher um CSS Framework pode ser difícil, se os 960.gs não forem adequados para você, talvez você possa experimentar alguns dos frameworks abaixo.
Blueprint: um framework CSS
O Blueprint é uma estrutura CSS, que visa reduzir o tempo de desenvolvimento do CSS. Ele oferece uma sólida base CSS para construir seu projeto, com uma grade fácil de usar, tipografia sensível e até mesmo uma folha de estilo para impressão. É muito menos inchado do que a estrutura da YUI, e possivelmente está em pé de igualdade com os 960.gs em termos de facilidade de uso.
CSS-Boilerplate
De um dos autores do Blueprint. Ele criou uma estrutura simplificada que fornece os fundamentos básicos para iniciar qualquer projeto. Essa estrutura é leve e se esforça para não sugerir convenções de nomenclatura não semânticas.
Elements - Uma estrutura CSS para baixo para a terra
Foi criado para ajudar os designers a escrever CSS de maneira mais rápida e eficiente. Elementos vão além de ser apenas um framework, é o fluxo de trabalho de seu próprio projeto. Tem tudo que você precisa para completar seu projeto.
WYMstyle - framework CSS - Visão Geral
O objetivo deste projeto é fornecer um conjunto de arquivos CSS modulares bem testados, que podem ser usados para o design rápido de sites.
Ainda outro layout de várias colunas | YAML
“Yet Another Multicolumn Layout” (YAML) é um framework (X) HTML / CSS para criar layouts flutuantes modernos e flexíveis. A estrutura é extremamente versátil em sua programação e absolutamente acessível para usuários finais.
CleverCSS
CleverCSS é uma pequena linguagem de marcação para CSS inspirada em Python que pode ser usada para construir uma folha de estilo de maneira limpa e estruturada. Em muitos aspectos, é mais limpo e mais poderoso que o CSS2.
framework CSS sparkl
Sparkl combina marcação POSH, CSS à prova de balas e JavaScript discreto em uma estrutura de desenvolvimento fácil de usar que simplifica a criação de sites à prova de balas que estejam em conformidade com os padrões da Web. Ele usa uma estrutura modular, permitindo que você use o que você precisa e deixe de fora o que você não precisa.
O framework jQuery UI CSS
O Query UI inclui um robusto CSS Framework projetado para criar widgets customizados do jQuery. A estrutura inclui classes que cobrem uma ampla variedade de necessidades comuns de interface de usuário e podem ser manipuladas usando o jQuery UI ThemeRoller. Ao construir seus componentes de interface do usuário usando o jQuery UI CSS Framework, você estará adotando convenções de marcação compartilhada e permitindo a facilidade de integração de código na comunidade de plug-ins em geral.
Escrito exclusivamente para WDD por Paul Andrew de Speckyboy.com
Você usa o 960gs para seus sites? Quais são as principais vantagens? Nós adoraríamos ouvir de você ...