html - paginas - ¿Qué es un buen recurso en línea para los patrones de diseño de CSS?
etiquetas html (5)
El Floatutorial es un excelente punto de partida para aprender el importante atributo de CSS "flotante" y cómo usarlo para diseñar el contenido utilizando algunos patrones comunes, incluidos los diseños de líquidos de dos y tres columnas.
Floatutorial te lleva a través de los elementos básicos de elementos flotantes como imágenes, mayúsculas, botones siguiente y posterior, galerías de imágenes, listas en línea y diseños de múltiples columnas.
¿Alguien puede recomendar un buen recurso en línea para los "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 dicho recurso sería esta lista de diseños de tablas , esto le brinda todo lo que necesita saber sobre cómo hacer que las tablas se vean bien utilizando un conjunto de técnicas de CSS.
Otros ejemplos de problemas comunes que podrían tener buenas soluciones de conjuntos serían cosas como esquinas redondeadas en divs, diseños de formularios altamente utilizables, etc.
El ya mencionado A List Apart es realmente bueno. Otro sitio que he usado desde que comencé el desarrollo web es SitePoint.com. Aquí está su Referencia de CSS . Si quieres un buen libro CSS, el suyo es uno de mis favoritos.
Me refiero a los artículos de A List Apart todo el tiempo para ese tipo de cosas. Hacen una gran cantidad de investigaciones de prueba y error para encontrar formas realmente creativas de manejar esos problemas comunes de CSS de la forma más limpia y portátil posible.
Algunos sitios web que abordan los patrones de diseño web se enumeran a continuación . No proporcionan específicamente el HTML y / o CSS para lograr los resultados deseados, pero proporcionan ejemplos de sitios en vivo en los que puede ver el código fuente (o, mejor aún, usar Firebug ).
Patrones de UI
Este es probablemente el mejor del grupo. Desglosa las cosas en categorías que cubren la amplitud de las tareas de diseño de la página web. Encontrará categorías como tag-clouds, vista previa en vivo y registro de usuarios, entre muchos otros. Este es un recurso realmente completo que está bien organizado. Explica cada patrón y proporciona muchos ejemplos.
Patrón Tap
Similar a UI-Patterns aunque actualmente no es tan completo. Se necesita un enfoque más social para cotejar los patrones de diseño, ya que permite a los usuarios crear sus propias categorías ("conjuntos de usuarios") y rellenarlos con su propia selección de sitios.
Biblioteca de patrones de diseño de Yahoo
A diferencia de los otros dos, este 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 discute los patrones, pero es bueno como una fuente de inspiración rápida o como un medio para comenzar su propio análisis.
Lo más parecido a un "patrón de diseño" en CSS son diseños comunes. La mejor herramienta para aprovechar diseños comunes, anchuras de columna, etc. es el sistema de grilla 960 , en 960.gs
Mire este screencast para una breve introducción. Ahorra mucho tiempo y te 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 columna se suman.
El único libro que más recomiendo para CSS es CSS Mastery de Andy Budd ( cssmastery.com ). Es algo pequeño, pero me ha ayudado más que cualquier otro libro de CSS.