Armazones para los diseñadores

Actualmente, “framework” está absolutamente un buzzword en el desarrollo de la tela. Con Javascript los armazones tienen gusto de la biblioteca del interfaz utilizador de Yahoo, jQuery, y prototipo que consigue muchos de armazones del uso de la atención y de la tela como los carriles y Django que consigue aún más, se parece como cada uno está utilizando una cierta clase de marco para construir sus sitios. ¿Pero cuál es exactamente un marco? ¿Y son solamente útiles a los programadores, o podemos los diseñadores de la tela beneficiar del concepto, también?

¿Cuál es un marco?

De modo que we’re todo en la misma página, let’s agree—at lo más menos posible para la duración de este article—on esta definición de “framework”: un sistema de herramientas, bibliotecas, convenciones, y las mejores prácticas que procuran abstraer tareas rutinarias en los módulos genéricos que pueden ser reutilizados. La meta aquí es permitir que el diseñador o el revelador se centre en las tareas que son únicas a un proyecto dado, más bien que la reinvención de la rueda cada vez alrededor. Generalmente hablando, éste es el acercamiento tomado por los armazones ya mencionados del uso del Javascript y de la tela.

Para ser claro, we’re hablando no no necesariamente algo se construye que, empaquetado, y lanzado al público. Algo, un marco puede estar solamente para usted o su equipo.

Un marco para los diseñadores

Las ocasiones son, usted pueden beneficiar de una abstracción similar del código del CSS para su proceso del diseño de la tela. Los que pueden beneficiar la mayoría son los diseñadores que trabajan en varios sitios de una naturaleza similar. Además, los diseñadores que trabajan en un equipo con otros diseñadores tienen mucho ganar de un acercamiento del marco. Por ejemplo, trabajo para una compañía del periódico, y todos los sitios 20+ en nuestro establo tienen mucho en campo común. Simplemente en virtud de ser sitios de las noticias, tienden para ser más similares que son diferentes. Pero, iguale a diseñador a solas de la tela que trabaja en los proyectos que son todos absolutamente diferentes en la superficie pueden encontrar probablemente los pedazos que son convenientes para la abstracción en un marco de uso general del CSS.

En el Diario-Mundo de Lorenzo, donde trabajo, we’ve construyó un marco del CSS y lo encontró recientemente para ser un aumentador de presión enorme de la eficacia. Seguro, nos tomó algunos días para crear el marco sí mismo, pero el fue hecho una vez, la velocidad en las cuales nosotros puede poner juntos diseños de la página de la calidad es enorme. What’s más, puesto que cada diseñador en el equipo ahora está utilizando el mismo marco, cuando uno va a hacer corrige a otro trabajo del equipo member’s, que ellos don’t tienen que pasar 20 minutos que intentan entender porqué las cosas fueron construidas la manera eran. Pueden apenas zambullirse a la derecha adentro.

¿Qué clases de cosas pueden ser abstraídas?

Cuando usted salta en juntar un marco del CSS, you’ll desean buscar las cosas que usted tiende para hacer repetidamente otra vez en cada proyecto. La meta es consolidar estas cosas en una localización central, siguiendo la metodología (SECA) de la codificación de la repetición usted mismo de Don’t. Esto hace mantenimiento mucho más fácil, y puede también ahorrar en costes de la anchura de banda.

Algunas cosas que explico en el CSS de casi cada solo proyecto trabajo encendido estoy:

• Un “mass reset” de los estilos del browser del defecto. Por ejemplo, el fijar margin y padding a 0 en todos los elementos, dando vuelta de las fronteras en framesets e imágenes, etc.
• Alinear el tipo a una línea de fondo constante. Esto incluye cosas como fijar los márgenes en elementos del nivel del bloque como párrafos, jefes, y listas al mismo valor que (o a un cierto múltiplo de) la base line-height que fija para el sitio.
• Crear los estilos básicos para las formas.
• Creando algunas clases del CSS utilizo siempre, por ejemplo .hide (donde fijo el valor de la exhibición a ningunos) y .mute (a que fijé a un tipo más pequeño tamaño y a veces un color más ligero).

Hay posibilidades más interesantes, también. Muchos diseñadores de la tela se encuentran el usar de la misma estructura de la rejilla básica repetidamente otra vez. ¿Por qué no muévala en su propio stylesheet y estructúrela de una manera que sea flexible bastante que se utilizará en sitios múltiples? Yahoo ha hecho esto, con sus rejillas de YUI componentes. Cuando construimos nuestro marco del CSS en el Diario-Mundo, mirábamos la puesta en práctica de Yahoo’s primero. La decidíamos wasn’t absolutamente qué deseamos, pero sirvió como ejemplo funcional agradable y nos dio porciones de ideas en cómo construir nuestros el propios. Colocamos en una rejilla 16-unit, que es bastante flexible que debemos poder utilizarla en cada de nuestro properties’ sitios, aunque cada sitio mira y siente absolutamente un pedacito diferente del siguiente.

También, la mayoría de los sitios comparten widgets comunes, como menús drop-down, lengüetas de la navegación, los botones, el etc. Éstos son candidatos primeros a la abstracción, también. Más allá de ése, usted puede tener idiomas contentos comunes de la exhibición, tales como una lista de las fotos que aparecen como thumbnails. Usted podría estandardizar en un nombre de la clase del CSS como “thumbnail-list, ” de modo que todo lo que usted necesita hacer deba agregar esa clase para conseguir su trabajo de los thumbnails.

Otra posibilidad es extraer los cortes y los workarounds (tales como ésos que acomodan más viejos browsers) en sus propios módulos externos del stylesheet. I’ve intentó esto mismo, pero encontrado que en última instancia los cortes y los workarounds tienden para ser demasiado sitio-especi'ficos sacarse en un marco genérico. Pero su kilometraje puede variar.

¿What’s la ventaja verdadera del mundo?

La belleza verdadera del tener un marco como esto está bajando a un comienzo rápido. Usted puede crear un nuevo (el documento de X)HMTL, incluye su marco, y esté apagado a las razas con el acolchado y los márgenes del reajuste, buena tipografía, formas limpias, una rejilla de la disposición, los widgets del funcionamiento, y más.

Obviamente, aunque, you’ll desean modificar la mirada para requisitos particulares y sentirse para cada sitio. Lograr esto, toda la necesidad de you’ll de hacer es sobreescribir y agregar a los estilos del defecto como necesarios. Por ejemplo, si su marco fija para arriba ba'sico-mirar las lengüetas horizontales de la navegación para cualquier UL con la clase “tabs, ” y son grises con una frontera negra, usted puede modificarlas fácilmente para requisitos particulares para emparejar la mirada y la sensación de su sitio con apenas algunas líneas (la línea envuelve "—Ed marcado.):

ul.tabs li {
 border: none;
 background-image: url('/images/tabs/ »
site-specific-tab-look.jpg');
}  

Todo el trabajo de flotar los artículos de la lista a la izquierda y de hacer los acoplamientos dentro de ellos la exhibición como bloquea (también flotado a la izquierda) con el texto se centró en el middle—ad nauseam—has hecho ya para usted. Le dejan al foco en cuál es único e interesando sobre el sitio específico you’re que trabaja encendido, más bien que escribiendo el mismo CSS you’ve escrito millón de veces antes.

¿Cómo debe un marco del CSS ser construido?

Hay varias maneras posibles de ir sobre la construcción de un marco, pero el más común y el más útil es discutible abstraer su CSS común en stylesheets individuales esa cada cubierta a la parte particular del conjunto. Por ejemplo, usted puede tener un stylesheet que instale la tipografía y otro que maneje el reajuste total. La belleza del acercamiento es la capacidad de incluir selectivamente solamente los estilos que usted necesita. Usted puede terminar para arriba con seis o siete diversos stylesheets en su marco, pero si una necesidad particular uno o dos del proyecto doesn’t de ellos, ellos don’t tiene que ser incluida. El marco que creamos en nuestra oficina tiene cinco stylesheets:

• reset.css—handles el reajuste total.
• type.css—handles la tipografía.
• grid.css—handles la rejilla de la disposición.
• widgets.csslos widgets de —handles tienen gusto de lengüetas, de menús drop-down, y de “read more” botones.
• base.css—includes el resto de stylesheets, de modo que necesitemos solamente llamar base.css de nuestro (los documentos de X)HTML para utilizar el marco entero.

Después almacenamos el marco en una sola localización y tenemos cada tirón del sitio él adentro de allí. Entonces, por supuesto, hay también los stylesheets sitio-especi'ficos para cada sitio que sobreescriben y agregan al defecto de framework’s como necesario.

Una palabra de la precaución

Este método trabaja absolutamente bien, pero hay una preocupación válida que se levantará: agrega al número de las conexiones del HTTP necesitadas para rendir cada página. En grande, los sitios del alto-tra'fico, agregando cinco más conexiones del HTTP a cada opinión de la página pueden dar lugar a administradores de sistema enojados. Dos soluciones posibles a esto son:

1. Incluya todo en un solo archivo, más bien que romperlo en los módulos. El problema aquí es que usted pierde la capacidad de incluir solamente ciertas partes del marco, y usted también hace mantenimiento más difícil.
2. Tenga un proceso del servidor-lado que aplane dinámicamente los archivos individuales en una sola respuesta. I’ve no visto esto hecha, pero él podía ser muy eficientes si estuvo hecho bien. Usando mi marco del ejemplo arriba, este proceso dinámico podría ocurrir cuando base.css se solicita, pero no cuando type.css grids.css, son los etc.. Esta manera, los componentes individuales todavía está disponible, pero el marco entero está disponible en una versión aplanada, también.

En el extremo, it’s importante tener presente ese la meta isn’t que hace cosas tan abstraen como posible de modo que usted pueda impresionar a sus amigos. Algo, la meta es bajar de usted a un comienzo rápido y hacer su proceso del diseño más eficiente. Es definitivamente posible al excedente lo hace. Si usted abstrae demasiado, las cosas comienzan a conseguir confusas, y usted extremo para arriba que lastima su funcionamiento de website’s con también muchas peticiones del HTTP.

Recuerde: un buen marco debe nunca hacer cosas más duras o más complejas que simplemente comenzando de rasguño.

En la conclusión

El fondo es que los diseñadores de la tela, apenas como nuestros amigos en el mundo de programación, tendemos para repetirnos a menudo. Nos encontramos el reajustar de los estilos del defecto del browser, setting-up una rejilla de la línea de fondo y escribir el CSS para la navegación tabula repetidamente again—on casi cada proyecto. Tomando un poco tiempo hacia fuera para abstraer algunos de estos idiomas en un marco que usted pueda utilizarle en cada sitio construya bajará de usted a un comienzo más rápido, lo hará para un mantenimiento más fácil, y ayudará a los otros diseñadores en su equipo a entender las decisiones que usted tomó. Con un poco cuidado, estas ventajas se pueden observar sin la adición hinchan o lastimar el funcionamiento de un Web site.