CSS también tiene un marco: Introducción a Blueprint

El diseño del marco CSS puede ayudarnos a crear páginas de alta calidad de manera rápida y efectiva y también contribuir a la estandarización del código. Por supuesto, cada marco se basa en los esfuerzos de innumerables predecesores. Aquí hay un marco CSS recomendado: el marco CSS Blueprint.

Marcos CSS + Restablecimiento de CSS: diseño desde cero

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

1. Introducción

Blueprint es el llamado marco CSS. En comparación, los comentarios en el código del blueprint son relativamente detallados.

Siga el método para crear un marco CSS como se describe en Frameworks for Designers de Jeff Croft (o la versión china de Understanding Web Frameworks and How to Build a CSS Framework):

Hay varias formas posibles de construir un marco, pero la más común y posiblemente la más útil es abstraer su CSS común en hojas de estilo individuales, cada una de las cuales cubre una parte particular del todo. Por ejemplo, puede tener una hoja de estilo que establezca. la tipografía y otra que maneja el reinicio masivo. La belleza del enfoque es la capacidad de incluir selectivamente solo los estilos que necesita. Puede terminar con seis o siete hojas de estilo diferentes en su marco, pero si un proyecto en particular no lo hace. No necesita uno o dos de ellos, no es necesario incluirlos. El marco que creamos en nuestra oficina tiene cinco hojas de estilo:.

reset.css: maneja el reinicio masivo.

type.css: maneja la tipografía.

grid.css: maneja la cuadrícula de diseño.

widgets.css: maneja widgets como pestañas, menús desplegables y botones "leer más".

base.css: incluye todas las demás hojas de estilo, de modo que solo necesitamos llamar a base.css desde nuestros documentos (X)HTML para usar todo el marco.

El plano se construye de manera similar :

Divide y vencerás :

En términos de organización funcional, buleprint distribuye funciones como diseño, tipografía, widget, reinicio e impresión en diferentes archivos CSS. Esto hace que sea conveniente para los usuarios importar solo las funciones que desean usar, en lugar de importar todos los archivos, y mejora el rendimiento de carga de la página. Actualmente, la sección de componentes solo proporciona procesamiento de botones y aún no ha logrado el enfoque MECE ("mutuamente independiente y completamente exhaustivo") de McKinsey.

Interfaz unificada :

Aunque las funciones están dispersas en varios archivos CSS, al importar, solo se debe incluir el mismo archivo screen.css. Los detalles de importación específicos se procesan en screen.css, que unifica la interfaz externa.

Descripción del archivo CSS incluido en el plano:

pantalla.css

Este es el archivo principal del marco. Importa otros archivos CSS del directorio "lib" y debe incluirse en cada página.

Similar a la función base.css de Jeff Croft, solo necesita incluir este archivo y podrá importarse

imprimir.css

Este archivo establece algunas reglas de impresión predeterminadas, de modo que se incluyan versiones impresas en cada página.

Se utiliza para manejar la impresión y se puede clasificar como un widget.

lib/grid.css

Este archivo configura la cuadrícula (es cierto). Tiene muchas clases que se aplican a los divs para configurar cualquier tipo de cuadrícula basada en columnas.

Se utiliza para manejar el diseño de página (columnas)

lib/tipografía.css
Este archivo establece una tipografía predeterminada. También tiene algunos métodos para hacer algunas cosas realmente sofisticadas con su texto.

Se utiliza para manejar el diseño de los elementos de la página.

lib/reset.css

Este archivo restablece los valores CSS que los navegadores tienden a configurar por usted.

Se utiliza para restablecer la página y especificar valores predeterminados para los elementos de la página que no especifican atributos CSS.

lib/botones.css
Proporciona algunos botones excelentes solo para CSS.

Se utiliza para manejar botones, que pueden clasificarse como widgets.

lib/comprimido.css

Una versión comprimida de los archivos principales. Úsela en todos los sitios activos.

Consulte screen.css para obtener instrucciones.

Proporcione archivos CSS comprimidos (incluidos grid.css, typography.css, reset.css, botones.css).

2. Investigación sobre el uso de cada módulo.

2.1. Investigación sobre grid.css

Manejo de compatibilidad del centrado entre navegadores

En términos generales, para abordar las diferencias entre Firefox e IE cuando se trata de centrado, se utilizan los siguientes métodos:

body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}

Obtenido de: http://www.maxdesign.com.au/presentation/center/

Cómo manejar el plano:

body { text-align: center; /* IE6 Fix */ margin:36px 0;}/* Un contenedor debe agrupar todas sus columnas. */ .container { text-align: left; : 0 auto; /* Diseño de centros */ ancho: 1150px /* Ancho total */ }Cómo implementar el plano para columnas (Columnas):

blueprint define .column, .span-x y .last, que se combinan para realizar la función de columna.

Entre ellos: .column define el atributo flotante de la columna; .span-x define el ancho de la columna. .last establece el margen derecho en 0px;

2.2. Investigación sobre reset.css

El código original de reset.css debería provenir de Eric Meyer. Eric Meyer tiene dos registros sobre el reinicio, que se utilizan para solucionar el problema de los diferentes valores predeterminados en los navegadores. La documentación de Eric Meyer es excelente:

Restablecer razonamiento: http://meyerweb.com/eric/thinkts/2007/04/18/reset-reasoning/

Restablecer recargado: http://meyerweb.com/eric/thinkts/2007/05/01/reset-reloaded/

¿Por qué restablecer?
La razón básica es que todos los navegadores tienen valores predeterminados de presentación, pero ningún navegador tiene los mismos valores predeterminados (vale, no hay dos familias de navegadores; la mayoría de los navegadores basados ​​en Gecko tienen los mismos valores predeterminados).
Por ejemplo, algunos navegadores aplican sangrías a listas ordenadas y desordenadas con márgenes izquierdos, mientras que otros usan relleno izquierdo. En los últimos años, abordamos estas inconsistencias caso por caso;

¿Por qué utilizar el estilo de reinicio en lugar del selector universal?

El llamado selector universal usa * para representar todos los elementos del documento, por ejemplo

* { margin: 0;} Algunos recursos sobre el tema del estilo de reinicio:

Biblioteca de reinicio de YUI: http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

Los siguientes artículos son en realidad artículos que analizan el marco CSS o sugerencias, pero todos mencionan el tema del restablecimiento.

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. Investigación sobre tipografía.css

typography.css se utiliza para determinar el formato de diseño predeterminado (línea de base) de los elementos de la página:

Configuración del tipo en la Web en una cuadrícula de referencia:

http://alistapart.com/articles/settingtypeontheweb

2.4. Investigación sobre botones.css

Redescubriendo el elemento de botón analiza los diversos beneficios de usar el elemento de botón para reemplazar el elemento de entrada. El elemento de botón proporciona funciones más ricas.

http://particletree.com/features/rediscovering-the-button-element

2.4. Investigación de Print.css

Eric Meyer tiene un artículo sobre la implementación de la función de impresión en CSS, que puede usarse como referencia para comprender print.css.

Diseño CSS: ir a imprimir

Imprimir diferente

2.5, comprimido.css

comprimido.css es un paquete que comprime varios archivos de planos. También comprime el archivo css, eliminando espacios inútiles, nuevas líneas, comentarios y otro texto.

Este método se utiliza cuando se implementa en sistemas de producción para evitar importar varios archivos CSS en la página y también es útil para mejorar el rendimiento de la página.

De acuerdo con las instrucciones en lib/screen.css, se debe utilizar el servicio de compresión CSS proporcionado por Teenage:

http://teenage.cz/acidofil/tools/cssformat.php

Además, servicios similares que brindan optimización y compresión de CSS y JavaScript incluyen:

http://csstidy.sourceforge.net/ (código abierto)

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ (basado en csstidy)

3. Ejemplos de uso

4. Documentos de referencia

http://code.google.com/p/blueprintcss/wiki/Tutorial

5. Proyectos relacionados

generador de planos: http://kematzy.com/blueprint-generator/

Trípoli: http://monc.se/tripoli/

Artículo recomendado: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/