Los desarrolladores web están constantemente generando herramientas gratuitas que son increíblemente útiles para reducir la cantidad de tareas pequeñas y molestas con las que tienes que lidiar al crear un sitio web o una maqueta.
Hoy veremos tres nuevas herramientas que puede modificar a través del diseño, imágenes de marcadores de posición y estilos de texto en su próximo sitio.
Plancha
La primera herramienta que veremos nos ayuda a especificar rápidamente un diseño de página basado en una cuadrícula. Sé lo que estás pensando, odias los marcos de cuadrícula, ¿verdad? Toneladas de pelusa, nombres de clases no semánticas, complejidad innecesaria; Todos hacen que los frameworks CSS sean odiados por muchos desarrolladores.
Afortunadamente, Griddle. ¡No es un marco CSS en absoluto! Es simplemente un gráfico de fondo personalizable que le ayuda a alinear su contenido mediante la inserción de columnas y anchos de píxeles.
Cómo usarlo
Las instrucciones para usar Griddle. Están justo en el sitio web y no podrían ser más sencillas, pero para que realmente puedas tener una idea de cómo funciona la herramienta, comenzaremos con el proyecto de hoy y continuaremos con las siguientes herramientas. .
Todo lo que necesita hacer para implementar Griddle. Se establece el fondo del cuerpo de su archivo CSS en una URL personalizada que construye la cuadrícula para usted. La estructura de la URL es la siguiente:
Entonces, digamos que desea que su sitio web tenga 1.200 píxeles de ancho con 12 columnas cada una con un margen de 20 píxeles. Simplemente suelte el siguiente CSS en su documento:
¿Ves cómo? ¿1200-12-20? define los términos que estábamos buscando? Ahora, si quisiera cambiar esto a algo un poco más típico, digamos 960 píxeles de ancho con 12 columnas y un canal de 30 píxeles, el fragmento sería:
Esto aplica automáticamente la siguiente imagen al fondo de su página web. Es bastante difícil verlo en la pequeña vista previa a continuación, haga clic aquí para ver un ejemplo real. Intenta jugar con los números en la URL para ver cómo se actualiza la imagen.
Hay algunas características más básicas, como cambiar de color y agregar líneas horizontales, pero para nuestros propósitos esto funcionará bien. Desde aquí podemos comenzar a desarrollar un diseño de página web básico.
Agregar contenido basado en la cuadrícula
Para comenzar, lanzaremos un div en nuestro documento que contendrá tres columnas de texto. Por ahora, solo incluiremos un párrafo de marcador de posición y luego agregaremos algo de CSS para colocarlo en su lugar.
Ahora, dado que nuestra cuadrícula es de 960 píxeles de ancho con canales de 30 píxeles, sabemos que queremos configurar el ancho de nuestra div a 960px con un margen de? Auto? para centrarlo Del mismo modo, al mirar nuestra imagen de la cuadrícula, podemos ver que para dividir la página en tres columnas, queremos ir con un ancho de 300 px para los párrafos.
He hecho algunas otras cosas importantes aquí también como configurar mi flotador para los siguientes párrafos y lanzar en algunos márgenes. Observe que el margen derecho es igual al margen de la columna.
Este código nos da el resultado a continuación. Como puede ver, nuestro texto se alinea muy bien con nuestra cuadrícula de fondo. La configuración justificada ha hecho algunos huecos feos en el texto, pero solo estamos haciendo una maqueta rápida para que pueda vivir con eso.
Esta estructura es bastante buena y funciona bien con nuestra cuadrícula, pero mira lo que sucede cuando agregamos dos párrafos más. El margen en nuestro último párrafo está arruinando nuestro diseño.
Esto puede solucionarse fácilmente usando el pseudo selector del último hijo, pero por lo que puedo decir, el soporte de IE en este es cero, así que básicamente hice lo mismo con una clase que podemos usar más tarde.
Con eso tenemos un bonito diseño de tres columnas. ¿Podríamos haberlo hecho sin la imagen de fondo? ¡Ciertamente! Pero Griddle. Nos ayudó a visualizar nuestro diseño para que pudiéramos omitir las matemáticas involucradas al dividir tres columnas en un espacio de 960px de ancho con canales uniformes.
Es importante tener en cuenta que nuestro CSS aquí es súper mínimo en comparación con lo que se obtiene al utilizar un sistema de cuadrícula estándar como 960.gs.
Lorempixum
Nuestro sitio web de texto plano se ve bastante aburrido! En este punto, aunque realmente no tenemos ninguna imagen para darle sabor, ¿qué podemos hacer para completar nuestro diseño?
Ingrese a Lorempixum, un pequeño servicio realmente genial que conceptualmente es casi idéntico a Griddle.It. Utiliza una URL personalizable para insertar una imagen, esta vez, aunque la imagen será un marcador de posición de contenido, no una cuadrícula de fondo utilizada para el diseño.
Usando la aplicación web que se muestra arriba, puede generar una imagen del tamaño correcto. También puede simplemente colocar la URL a continuación. El primer número es el ancho y el segundo es la altura.
Hay varias maneras de hacer esto más específico. Puede elegir entre color o blanco y negro o incluso especificar su categoría de un conjunto de once opciones. Por ejemplo, aquí está la URL de una imagen de ciudad aleatoria de 510px de ancho por 310px de altura y la imagen resultante.
Vamos a poner esto en uso en nuestra pequeña página web. Para empezar, agregaremos una imagen de encabezado grande de 960px de ancho por 350px de alto.El ancho es obviamente el de nuestro sitio, pero la altura es algo que acabo de agarrar al azar. Aquí está el HTML:
El resultado es una presencia tipográfica muy mejorada en nuestra página. Tenga en cuenta que no hemos utilizado una fracción de lo que está incluido en los estilos Type-a-file, asegúrese de buscar y ver todo lo que la hoja de estilos tiene para ofrecer. Una vez que haya terminado, es posible que también desee ejecutar un servicio de limpieza de CSS como el CSS no utilizado para borrar todas las propiedades de la descarga Tipo-a-archivo que no terminó usando.
Conclusión
Tenga en cuenta que este tutorial no presenta un flujo de trabajo para que lo siga mientras crea sus propios sitios. La intención es simplemente hacerle conocer algunas excelentes herramientas gratuitas que puede utilizar para acelerar la creación de maquetas de sitios web o estructuras de alambre que luego se pueden expandir a sitios completos.
Con Griddle.It puede omitir marcos de CSS complicados y construir rápidamente una cuadrícula personalizada basada en su propio CSS. Lorempixum luego interviene y lo ayuda a llenar los espacios en blanco de la imagen hasta que finalmente reciba las fotografías que su cliente le prometió hace dos semanas. Finalmente, Type-a-file proporciona un montón de estilos de texto preconfigurados que puedes implementar rápidamente para hacer que toda la tipografía en tu página se vea perfecta como píxel.
Deje un comentario a continuación y háganos saber acerca de cualquier otra herramienta web que haya encontrado que haga su trabajo un poco más fácil.