Cómo iniciar tu HTML
Un objetivo principal de todos los desarrolladores es un desarrollo más rápido, especialmente un arranque rápido. Hay docenas de marcos disponibles en los últimos años que apuntan a tener nuestros prototipos listos en minutos.
Lamentablemente, muchos de esos marcos datan rápidamente, a medida que evolucionan los requisitos del proyecto y deben actualizarse o reemplazarse.
Si está buscando un marco reciente que resuelva los problemas que las soluciones antiguas están encontrando, al tiempo que maximiza su flujo de trabajo, no se puede equivocar demasiado con HTML Kickstart.
La cuadrícula
La grilla es uno de los aspectos más importantes de cualquier marco, especialmente porque una grilla flexible determina cuán receptivo puede ser un sitio.
HTML Kickstart nos proporciona la opción de una grilla flexible, o una grilla estándar (no flexible), aunque no está claro cuándo utilizaría esta última dado el dominio creciente de los dispositivos móviles.
Para crear una grilla flexible con dos columnas de igual tamaño, usaríamos:
Content HereContent HereComo puede ver, todo lo que hemos hecho es agregar algunas clases simples a tres divisiones. Si prefieres la grilla no flexible, todo lo que tienes que hacer es eliminar el nombre de clase flexible del div externo.
(Tenga en cuenta que la cuadrícula flexible se extenderá al ancho de toda la pantalla, mientras que la cuadrícula no flexible tiene un ancho máximo de 1024px).
Además de las clases basadas arriba, hay varias clases de ayuda que podemos usar, por ejemplo:
- show-desktop y hide-desktop con estas clases puede decidir si desea que esa cuadrícula sea visible en una computadora de escritorio.
- show-tablet y hide-tablet se aplica el mismo concepto aquí, pero para tabletas.
- show-phone y hide-phone una vez más, estas clases dictan visibilidad, esta vez para teléfonos inteligentes.
Si quisiéramos ocultar nuestra grilla de dos columnas en teléfonos inteligentes, por ejemplo, usaríamos un código como este:
Navegación
HTML Kickstart nos ofrece tres opciones de menú: vertical izquierda, vertical derecha y horizontal.
La versión que más deseará es el menú horizontal. Para codificarlo, solo necesitamos listas desordenadas:
Si desea un menú vertical a la izquierda, simplemente agregue vertical a la abertura ul, y si desea un menú vertical a la derecha, agregue vertical a la derecha , como sigue:
Realmente es tan simple codificar los menús receptivos con HTML Kickstart.
Estilos predeterminados
HTML Kickstart le ofrece algunos estilos básicos geniales desde el principio. Obviamente, querrá refinarlos para su proyecto, pero para la creación rápida de prototipos, son más que suficientes.
Cuando se trata de tipografía, HTML KickStart usa Steve Matteson Es Arimo fuente por defecto. Puede ver la gama completa de configuraciones de tipo aquí.
Los estilos de botones son siempre el centro de mucha atención en cualquier marco, y HTML Kickstart viene con botones en todas las formas y tamaños. Ni siquiera necesita usar clases para esto, solo cree una etiqueta de botón y los estilos se aplicarán automáticamente.
Si prefiere que los estilos de botón se apliquen a una etiqueta de anclaje, solo tiene que agregarle la clase de botón :
También hay varios estilos diferentes que podemos aplicar:
Finalmente, también tenemos la opción de crear una barra de botones, con una sintaxis similar al menú horizontal:
Imágenes
HTML Kickstart ayuda a mejorar UX al generar ventanas emergentes para galerías e imágenes para usted. Es una solución mucho mejor que abrir una nueva ventana.
Para crear una galería emergente completamente funcional basada en JavaScript, todo lo que necesitamos es el siguiente código:
Es simple de implementar y no necesitabas una sola línea de JavaScript.
Las imágenes también tienen algunas grandes clases de ayuda, como subtítulos. Esta clase aplicada a una imagen muestra el título de la imagen como un título con estilo:
También tenemos las clases alinear-derecha y alinear-izquierda que podemos usar para flotar imágenes hacia la izquierda y hacia la derecha. (HTML Kickstart agregará un pequeño margen para que las imágenes no estén en contra del texto).
Y, por supuesto, HTML Kickstart también nos proporciona presentaciones de diapositivas simples. Usa BXSlider control deslizante para manejar esto.
El código para un control deslizante simple se verá más o menos así:
A Content Slider
This slider handles HTML content as well as images.
El control deslizante está habilitado para dispositivos móviles y, una vez más, no necesitas una sola línea de JavaScript.
Formularios
Lo último que quiero presentarte es formularios. Las formas son vitales para cualquier marco, porque son una de las cosas más difíciles de diseñar en una página web.
HTML Kickstart mantiene su simplicidad cuando se trata de formularios, y se puede crear una forma vertical tan simple como:
Como puede ver, casi no tuve que usar ninguna clase para este formulario. Todo lo que he hecho es agregar la clase vertical en la parte superior para que los elementos del formulario no sean tratados como en línea.
Una de mis partes favoritas de HTML Kickstart son los simples avisos de error que se usan con los formularios:
Conclusión
Hay toneladas de opciones que vienen con HTML Kickstart, realmente solo hemos arañado la superficie; hay un gran conjunto de iconos, información sobre herramientas e incluso pestañas.
La verdadera fuerza de HTML Kickstart es la simplicidad de su código. La falta de divs y clases extraños hace que sea un gran ahorro de tiempo, menos código significa menos errores. Si está buscando comenzar a codificar su propio HTML desde cero, o si está buscando un marco simple para prototipar rápidamente un diseño, HTML Kickstart es una gran opción.
¿Has usado HTML Kickstart? ¿Prefieres un marco diferente? Háganos saber en los comentarios.