¿Frustrado con la calidad de las plantillas gratuitas de CSS en línea pero no están al nivel de crear las suyas propias? ¿Cansado de pasar horas tratando de personalizar diseños prefabricados cojos?
Hoy le ofrecemos más de setecientas plantillas CSS que se pueden descargar libremente y que se centran en proporcionarle solo un diseño básico sobre el que construir. Usando estos diseños en varios navegadores, puede evitar interminables problemas de posicionamiento de CSS y centrarse en lo que es bueno: diseñar.
¿Para quién son estos?
Muchos de ustedes han estado en el juego de diseño durante años, pero recién ahora están empezando a crear sitios web y codificarlos a mano. Tienes suficientes habilidades de Photoshop para obtener un hermoso diseño y suficiente conocimiento básico de CSS para hacer que el texto se vea bonito.
Sin embargo, el mayor problema con el que se encuentran muchos desarrolladores nuevos puede ser simplemente lograr que su diseño básico funcione en CSS. El posicionamiento con CSS puede ser mucho más complicado que el estilo básico, especialmente cuando comienzas a tener en cuenta varios navegadores. Si no estás seguro de cómo resolver un problema, las horas de ajustes pueden llevarte de regreso al punto de partida, inmensamente frustrado y desesperado por un poco de ayuda.
Los sencillos diseños descargables a continuación le brindarán una base sólida para construir sus sitios y brindarán excelentes ejemplos para aprender a crear los suyos.
¿Por qué no plantillas completas?
Si ejecuta una búsqueda rápida en Google de plantillas CSS gratuitas, encontrará un millón. Sin embargo, la mayoría de estos no son ideales para desarrolladores web reales que desean crear sitios únicos. Lo que normalmente obtienes es algo como esto:
Las plantillas como esta realmente lo obligan a adoptar un diseño feo preestablecido que debe seguir o pasar horas separándose para intentar personalizarlo. Al final, hubiera sido más fácil codificarlo usted mismo desde cero.
Creo que es mucho más útil descargar algunos diseños CSS súper básicos que son lo más simples posible. Esto le permite hacer un prototipo rápido del diseño de una página sin perder la mitad del día clasificando el código que no necesita. El diseño típico en esta categoría se parece más a esto:
Aquí no tenemos texto ni imágenes que desechar, es solo un esqueleto listo para que lo llene. ¡Eche un vistazo a los excelentes recursos a continuación para encontrar todas las plantillas de diseño básicas que necesitará!
CSS primario: 22 diseños
"Primary es un marco de CSS simple, diseñado para desarrolladores y diseñadores para facilitar el uso de CSS".
Pequeñas cajas: 16 diseños
Una interesante colección de cuatro diseños básicos realizados a través de varios métodos diferentes.
CSS Easy: 8 Diseños
Una colección de cuatro diseños fijos y cuatro fluidos destinados a enseñarle los conceptos básicos del posicionamiento CSS.
Diseño máximo: 25 diseños
Una colección sólida de plantillas súper básicas, muchas de las cuales tienen tutoriales adjuntos para que pueda aprender cómo se hace.
Hierro Meyers: 224 Diseños
Definitivamente uno de los mejores recursos en la lista. Este sitio contiene 56 diseños básicos, cada uno con cuatro versiones: 100% Fluid, 974px, 950px y 750px.
Dynamic Drive: 47 Diseños
Estos diseños CSS se dividen en cuatro categorías: dos columnas, tres columnas, diseños fijos, diseños líquidos y marcos CSS.
Intensivstation: 16 Diseños
Una colección pequeña pero útil de diseños XHTML 1.0 y CSS2.
BlueRobot: 3 Diseños
Solo hay tres plantillas aquí, pero son diseños sólidos y populares que definitivamente querrás revisar si necesitas algo básico.
Matthew James Taylor: 7 Diseños
? No hacks CSS. SEO amigable Sin imágenes. No JavaScript. Compatible con navegador cruzado y iPhone. Estos diseños también vienen con una gran cantidad de documentación para comenzar.
CSS gratis: 252 diseños
La friolera de 252 diseños CSS que seguramente te ayudarán a comenzar por el camino correcto. Rápido de descargar y fácil de personalizar!
Código Sucks: 95 diseños
Code Sucks tiene una impresionante colección de diseños descargables gratuitos con 53 versiones de ancho fijo y 42 versiones de columna falsa. Los diseños de columnas de Faux utilizan una imagen de fondo para que se vea como las columnas izquierda y derecha tienen la misma altura e independientes entre sí.
Conclusión
Desglosar los diseños anteriores debería enseñarle mucho sobre el posicionamiento de CSS de una manera mucho más práctica que leer tres libros en CSS. Asegúrate de no solo implementar estas plantillas, sino de patear los neumáticos y modificar los números para ver cómo funcionan.
Deje un comentario a continuación y háganos saber si esta publicación le ha resultado útil. ¡También asegúrate de compartir cualquier otro gran recurso que uses para diseños CSS básicos!