¿Cuál es un buen recurso en línea para 'patrones de diseño' CSS?[cerrado]

Question

¿Alguien puede recomendar un buen recurso en línea para 'patrones de diseño' de CSS?

Sé que los patrones de diseño en un contexto de software generalmente se refieren a patrones de diseño basados ​​en OO, pero me refiero a patrones de diseño en el sentido más amplio del término:es decir.Soluciones comunes y limpias para problemas/tareas comunes.

Un ejemplo de tal recurso sería esta lista de diseños de mesa, esto le brinda todo lo que realmente necesita saber sobre cómo hacer que las tablas se vean bien usando un conjunto de técnicas CSS.

Otros ejemplos de problemas comunes que podrían tener buenas soluciones serían cosas como esquinas redondeadas en divs, diseños de formularios altamente utilizables, etc.

Answer 1

Me refiero a Una lista aparte artículos todo el tiempo para ese tipo de cosas.Realizan mucha investigación de prueba y error para encontrar formas realmente creativas de manejar esos problemas comunes de CSS de la manera más limpia y portátil posible.

Answer 2

A continuación se enumeran algunos sitios web que abordan patrones de diseño web..No proporcionan específicamente HTML y/o CSS para lograr los resultados deseados, pero sí proporcionan ejemplos de sitios activos que usted puede ver fuente encendido (o, mejor aún, usar insecto de fuego).

patrones de interfaz de usuario

Este es probablemente el mejor del grupo.Divide las cosas en categorías que cubren la amplitud de las tareas de diseño de páginas web.Encontrarás categorías como nubes de etiquetas, vista previa en vivo y registro de usuarios, entre muchas otras.Este es un recurso realmente completo y bien organizado.Explica cada patrón y proporciona muchos ejemplos.

Toque de patrón

Similar a UI-Patterns, aunque actualmente no es tan completo.Se necesita un enfoque más social para recopilar patrones de diseño al permitir a los usuarios crear sus propias categorías ("conjuntos de usuarios") y completarlas con su propia selección de sitios.

Biblioteca de patrones de diseño de Yahoo

A diferencia de los otros dos, éste no proporciona muchos ejemplos de sitios reales.Está bien organizado y es bastante completo.

Elementos de diseño

Este es un blog que muestra varios elementos del diseño web.No analiza los patrones, pero es bueno como fuente rápida de inspiración o como medio para iniciar su propio análisis.

Answer 3

El flotatutorial es un excelente punto de partida para aprender el importante atributo CSS "flotante" y cómo usarlo para diseñar contenido usando algunos patrones comunes, incluidos diseños líquidos de dos y tres columnas.

Floatutorial lo lleva a través de los conceptos básicos de los elementos flotantes, como imágenes, tapas de caída, botones de próxima y retención, galerías de imágenes, listas en línea y diseños de múltiples columnas.

Answer 4

lo ya mencionado Una lista aparte Es realmente bueno.Otro sitio que he utilizado desde que comencé con el desarrollo web es SitePoint.com.Aquí está su Referencia CSS.Si quieres un buen libro de CSS, este es uno de mis favoritos.

Answer 5

Lo más parecido a un "patrón de diseño" en CSS son los diseños comunes.La mejor herramienta para aprovechar diseños comunes, anchos de columnas, etc.es sistema de rejilla 960, en 960.gs

Mire este screencast para ver una breve introducción.Ahorra mucho tiempo y le ayuda a aplicar todos los patrones de diseño comunes con un código mínimo:

http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

Todo lo que tienes que hacer es aplicar las clases adecuadas y hacer un poco de aritmética para asegurarte de que todos los anchos de las columnas sumen.

El libro que más recomiendo sobre CSS es Dominio de CSS por Andy Budd (cssmastery.com).Es algo pequeño, pero me ha ayudado más que cualquier otro libro de CSS.