Ha pasado un tiempo desde Azulejos de estilo fueron traídos a este mundo por el genio de uno Samantha Warren . Para aquellos de ustedes que podrían haberlos mirado una vez, y luego haber olvidado lo que son, aquí hay una explicación rápida:
Las fichas de estilo son una especie de plantilla que le permite probar y previsualizar rápidamente varios colores, fuentes, texturas y otras opciones estéticas relacionadas con el estilo para sus diseños antes de crear una maqueta de alta fidelidad, pero después de que se hayan hecho los marcos. Deben presentarse a clientes, partes interesadas u otras partes interesadas desde el principio del proceso de diseño. De esta forma, puede superar preocupaciones sobre la elección de la fuente y preguntas como "¿Podemos tener un rojo más llamativo?"
En pocas palabras, debe usarlos, incluso si solo para usted. Puede parecer un gran problema añadir un paso más al proceso de diseño; pero puedo decirte por experiencia personal que vale la pena. Diseño en el navegador: mirar un lienzo en blanco de Photoshop puede ser desalentador; mirando a una ventana en blanco del navegador parece golpear mucho más difícil.
El sentido de dirección que proporciona la creación de un Estilo de mosaico hace que el diseño del resto del sitio sea mucho más fácil. No es nada tan complejo o restrictivo como una guía de estilo; por lo tanto, le da a ambos un lugar para comenzar, y la libertad de ajustar las cosas a medida que avanza.
Sin embargo, esto plantea un pequeño problema con los mosaicos de estilo originales. Son PSD. Los diseñadores basados en navegadores como yo querremos Style Tiles basados en navegador. Después de todo, queremos ver cómo se verán estas cosas en la Web y en tantos dispositivos como sea posible.
Varias personas ya nos han adelantado en ese frente. Hay plantillas prefabricadas para las personas que desean comenzar a crear Style Tiles en su navegador. Échales un vistazo:
La gente encantadora de Sparkbox creó un plantilla de mosaico de estilo receptivo basado en HTML y Sass. Es una de las opciones más simples, como se ve en la demostración, pero el código está bien comentado. Incluso fueron e incluyeron scripts opcionales para hacerlo compatible con IE 7 y versiones posteriores, en caso de que su cliente no haya actualizado su navegador en ... para siempre.
Creado por Namanyay Goel , Webstiles tienen mucho en común con las otras soluciones en esta lista. Lo que los hace diferentes es que fueron construidos con el preprocesador Stylus CSS menos conocido (algunos dirían que infravalorado).
Si trabajas con el framework Compass, junto con cosas como Ruby y Sass, prueba éste para el tamaño Puede instalarse como cualquier otra gema de Ruby, por lo que debe caer perfectamente en su flujo de trabajo. Curiosamente, la copia del cuerpo se puede "generar" a través de una variable Sass y el contenido: atributo. Todo está diseñado para que nunca tengas que tocar el HTML.
los Redacte repetitivo para baldosas de estilo trae algunas sombras bastante duras con ella, pero responde y no usa nada más complicado que el clásico HTML y CSS. Sin marcos, sin preprocesadores, nada. Es un buen punto de partida si solo quieres abrirlo en un editor de texto y listo.
Con estas muchas opciones prefabricadas, ¿por qué querrías crear tus propias fichas de estilo HTML / CSS desde cero? ¿Parece una pérdida de tiempo? Bueno, sí y no.
Si está creando un sitio simple, y aún no tiene todo el contenido planeado o el cliente no lo envió, una de las opciones prefabricadas funcionará bien. Sin embargo, si está creando una aplicación web compleja, o un sitio muy grande con muchos tipos de contenido o elementos de interfaz de usuario distintos, es posible que desee crear una plantilla de mosaico de estilos desde cero.
Los existentes simplemente no tienen en cuenta el amplio rango de posibles contenidos y tipos de elementos que existen. Por lo tanto, es posible que desee un mosaico de estilos que incluya un video, reproductor de audio o mapa incrustado. Es posible que desee uno que muestre una interfaz con pestañas, o un menú de acordeón.
Si está creando un sitio que depende de ciertos elementos de interfaz de usuario poco comunes, es posible que desee crear una plantilla de mosaico de estilos que incluya esas características.
No tiene que ser tan difícil. Simplemente configure un diseño simple de dos y tres columnas, y comience a incluir los elementos visuales que serán más importantes para su diseño, en función del contenido / funcionalidad. Estos incluirán:
En general, no es necesario convertirlo en un código de producción listo para todos los navegadores. Mantenlo simple, mantenlo en HTML5. A menos que esté utilizando un elemento de IU no estándar que deba codificarse desde cero en HTML y CSS, no se moleste con JavaScript.
¿La mejor parte? ¡Usted puede refinar y reutilizar todos los CSS relevantes a medida que comienza a codificar su maqueta basada en navegador!
Las fichas de estilo son más que vale la pena investigar si aún no las estás usando.
Muéstrelos a los clientes, guárdelos para usted, use las opciones prefabricadas o enrolle los suyos ... no importa. Tener ese sentido de la dirección estilística hará que llenar esa ventana en blanco del navegador sea mucho más fácil.