El 960 Grid System Toolbox & Resources
El Sistema 960 Grid fue creado por Nathan Smith como una forma de simplificar el flujo de trabajo de desarrollo web al proporcionar dimensiones comúnmente utilizadas, basadas en un ancho de 960 píxeles.
El 960.gs (o cualquier marco de CSS) se desarrolló principalmente para el prototipado rápido, reduciendo las tareas repetitivas y tediosas, pero también es más que adecuado para cualquier proyecto de diseño web.
Le dará a su sitio una base sólida y estructurada para que construya y diseñe su diseño.
En este artículo, encontrará tutoriales, un escaparate de sitios diseñados con 960.gs, spin-offs, temas básicos de WP basados en 960.gs y posibles marcos alternativos, si por alguna razón no le gusta la grilla 960. sistema.
Dentro del paquete de descarga hay hojas de bocetos imprimibles, diseños de diseño y un archivo CSS que tienen medidas idénticas.
Tienes dos plantillas, una grilla de 12 columnas dividida en porciones de 60px y una grilla de 16 columnas dividida en 40px. Cada columna tiene 10 píxeles de márgenes a la izquierda y a la derecha, lo que crea canales de 20 píxeles de ancho entre las columnas.
Página de inicio: 960.gs Página de inicio .
Descargar: Descargue los 960.gs .
Demo: Ver la página de demostración de 960.gs .
960.gs Tutoriales
960 CSS Framework: aprende los conceptos básicos
Este es un excelente tutorial básico para comenzar, escrito por Stefan Vervoort de divitodesign. Se le explican los aspectos básicos de la carga del marco, por lo que puede comenzar a desarrollar con 960.gs rápidamente.
Trabajando con 960.gs
Otro tutorial que lo guía a través de los conceptos básicos de la instalación de 960.gs, especialmente útil para el CSS desafiado.
Una mirada detallada al marco CSS 960
Una vez que aproveche la oportunidad de pasar un tiempo con 960.gs, se sorprenderá de cuánto tiempo se puede ahorrar potencialmente al desarrollar sus proyectos web.
Creación de prototipos con The Grid 960 CSS Framework
Este artículo cubre todo el proceso de creación de prototipos, explica los conceptos básicos de Grid 960, la planificación de la red para un diseño y la codificación del prototipo. Tan rápido como eso.
Cree un tema de periódico con WP_Query y el 960 CSS Framework
Este tutorial le enseñará a usar WP_Query para crear un tema de periódico de 3 columnas que tenga todas las publicaciones principales de su blog en la columna principal, y a un lado un conjunto de publicaciones de una categoría seleccionada. Al usar el marco 960 CSS para el diseño y el resto del tema, se muestra cómo esto acelerará en gran medida su productividad.
Diseñe un tema de blog nuevo en la cuadrícula 960
Este tutorial le enseña a simular un tema de blog en Photoshop que está diseñado para ser utilizado dentro del marco 960. Este tutorial fue diseñado más para la teoría del diseño web que la técnica de Photoshop, pero dedica mucho más tiempo a la teoría del diseño y la aplicación.
960 Spin Offs
Typogridphy: un marco CSS tipográfico y de diseño de cuadrícula
Typogridphy es un marco de CSS construido para permitir a los diseñadores web y desarrolladores front-end codificar rápidamente diseños de grillas tipográficos. Le permite crear diseños de cuadrícula que son versátiles y atractivos, valida estrictos xHTML y CSS. También utiliza un método tipográfico conocido como "creación de ritmo vertical" , donde todas las líneas de texto adyacentes se alinean horizontalmente, independientemente de los saltos de línea y los nuevos párrafos.
Demo: Demostración Typogridphy
Obertura - Fluid 960 Grid System 1.0
Desarrollado por Stephen Bau de Design7 , ha creado una biblioteca de elementos HTML de uso común, combinándolos con CSS para la tipografía y el diseño, y agregando algunos efectos básicos de bibliotecas populares de JavaScript (principalmente MooTools). Una vez descargado, puede elegir entre tres plantillas: ancho fijo de 960 px , ancho de fluido de 12 columnas o ancho de fluido de 16 columnas . Estas plantillas son increíbles, tienes que ver los detalles para creerlo.
Demo: Demostración de Overture .
Escaparate
Todos los hermosos sitios a continuación han sido construidos usando el sistema de grillas 960:
Temas de WordPress
Al igual que los 960.gs reales, estos temas de WP prácticamente no tienen estilo y tienen una funcionalidad muy básica, pero fueron creados con el 960.gs. Muy útil para cualquier desarrollador de WP.
Tema de WordPress de 5 años
Un tema básico de WP construido con el 960.gs.
960bc WordPress Theme
El tema 960bc es esencialmente un lienzo en blanco con un estilo minimalista y no hay imágenes basadas en el sistema de grillas 960 (solo 12 columnas) para desarrolladores de WordPress que quieran trabajar dentro de un diseño tradicional basado en grillas.
Alternativas posibles
Elegir un Marco CSS puede ser difícil, si el 960.gs no es el adecuado para usted, quizás podría probar algunos de los marcos a continuación.
Blueprint: un marco CSS
Blueprint es un marco de CSS, que tiene como objetivo reducir el tiempo de desarrollo de CSS. Le brinda una sólida base de CSS para construir su proyecto además de una cuadrícula fácil de usar, una tipografía sensible e incluso una hoja de estilo para imprimir. Es mucho menos inflado que el marco YUI, y posiblemente esté a la par con el 960.gs en términos de facilidad de uso.
CSS-Boilerplate
De uno de los autores de Blueprint. Él ha creado un marco simplificado que proporciona los elementos esenciales para comenzar cualquier proyecto. Este marco es ligero y se esfuerza por no sugerir convenciones de nombres no semánticos.
Elementos: un marco CSS descendente
Fue creado para ayudar a los diseñadores a escribir CSS más rápido y más eficiente. Los elementos van más allá de ser solo un marco, es el flujo de trabajo de su propio proyecto. Tiene todo lo que necesitas para completar tu proyecto.
WYMstyle - Marco CSS - Descripción general
El objetivo de este proyecto es proporcionar un conjunto de archivos CSS modulares bien probados, que se pueden utilizar para el diseño rápido de sitios web.
Sin embargo, otro diseño Multicolumn | YAML
"Yet Another Multicolumn Layout" (YAML) es un (X) framework HTML / CSS para crear diseños flotados modernos y flexibles. La estructura es extremadamente versátil en su programación y absolutamente accesible para los usuarios finales.
CleverCSS
CleverCSS es un lenguaje de marcado pequeño para CSS inspirado en Python que se puede utilizar para crear una hoja de estilo de una manera limpia y estructurada. En muchos sentidos, es más limpio y más poderoso que CSS2.
sparkl CSS Framework
Sparkl combina marcado POSH, CSS a prueba de balas y JavaScript discreto en un marco de desarrollo web fácil de usar que facilita la creación de sitios web a prueba de balas que se ajusten a los estándares web. Utiliza un marco modular que le permite usar lo que necesita y dejar de lado lo que no necesita.
El jQuery UI CSS Framework
La interfaz de usuario de Query incluye un robusto marco CSS diseñado para crear widgets jQuery personalizados. El marco incluye clases que cubren una amplia gama de necesidades comunes de la interfaz de usuario, y se pueden manipular utilizando jQuery UI ThemeRoller. Al construir sus componentes de interfaz de usuario utilizando el marco de CSS de JQuery UI, adoptará convenciones de marcas compartidas y permitirá una fácil integración del código en toda la comunidad de complementos en general.
Escrito exclusivamente para WDD por Paul Andrew de Speckyboy.com
¿Utiliza los 960gs para sus sitios web? ¿Cuáles son las principales ventajas? Nos encantaría saber de usted ...