Recientemente, echamos un vistazo a un marco realmente sólido de la gente buena en Twitter llamada Bootstrap. Este kit de herramientas es una gran variedad de utilidades e incluye una cuadrícula de diseño funcional y suficientes elementos de estilo previo para obtener un gran impulso en cualquier proyecto.
Hoy vamos a ver una herramienta muy similar de Joshua Gatcke llamada HTML KickStart. Este marco simplemente está repleto de grandes cosas que te permitirán construir prototipos de páginas web a la velocidad de la luz. Vamos a saltar y construir una página con él para ver lo que pensamos.
Lo que estamos construyendo
Antes de pasar a lo que es HTML KickStart y cómo puede usarlo, he aquí un adelanto del resultado final del tutorial de hoy:
Manifestación: Haga clic aquí para iniciar.
¿Qué es HTML KickStart?
De acuerdo con 99Lime.com (página de inicio del proyecto), KickStart HTML es un conjunto ultra delgado de HTML5, CSS y jQuery (javascript) archivos, diseños y elementos diseñados para darle una ventaja inicial y ahorrarle 10 horas de sus próximo proyecto web.
Según esta declaración, este proyecto podría, en teoría, ahorrarnos uno o incluso varios días completos de trabajo. ¡Eso es ciertamente una pequeña promesa! ¿Cómo se hace bueno en tal afirmación? Al proporcionar un gran conjunto de características. No te molestes en preguntar qué hay en HTML KickStart. En lugar de preguntar, ¿qué es no en HTML KickStart? La respuesta es, por supuesto, "no mucho".
Primeros pasos: menú de navegación
Para ver cómo funciona todo esto, vamos a realizar un proyecto rápido. Si desea seguir adelante, descargue el proyecto y comience con la página HTML de muestra, solo asegúrese de eliminar cualquier elemento de marcador de posición para tener una pizarra nueva en blanco.
Lo primero que vamos a hacer es agregar una navegación superior. Si pasamos por la página de elementos HTML KickStart, encontraremos tres opciones de menú integradas para elegir.
Queremos la opción de menú horizontal, por lo que hacemos clic en? Horizontal? y busque algún código de ejemplo que podamos usar para nuestros propios fines.
El sistema aquí es realmente sencillo, simplemente creas una lista desordenada con el menú? clase y cada elemento de la lista se convertirá en un elemento de menú. La clase? Actual? se agrega a la página actual y se pueden usar las sublistas para crear menús desplegables.
Con solo un poco de HTML y cero trabajo CSS, nuestro menú se ve excelente y es perfectamente funcional. Al igual que con el CSS, la magia de JavaScript ya está siendo atendida por nosotros.
Tenga en cuenta que ya hay una imagen de fondo aplicada a nuestro cuerpo. Esta es la imagen de cuadrícula predeterminada que viene con el marco, veremos cómo cambiar esto más adelante.
Mensaje de bienvenida
A continuación, queremos agregar un buen titular en nuestra página para dar la bienvenida a los visitantes. Esto hará uso de los estilos de tipografía pre-construidos.
Las etiquetas h1 y p ya contendrán un estilo predeterminado, pero en este punto no hay nada que rija nuestro diseño, así que tendremos que ayudarlo con algunos CSS personalizados.
Para empezar, queremos centrar ese texto en la ventana. El párrafo y el encabezado también tienen un gran margen entre ellos, así que tendremos que ajustar eso. Entra en el? Style.css? Archiva y comienza una nueva sección con tus propios estilos. Luego inserte este código:
Con eso, nuestro titular se ve genial. Está perfectamente centrado tiene una altura vertical muy reducida.
Usando la cuadrícula
Todavía no lo hemos necesitado realmente, pero KickStart HTML viene con una cuadrícula de diseño pre-compilada. Si alguna vez has usado algo como 960.gs antes, no habrá sorpresas aquí. Es su cuadrícula básica de 12 columnas que utiliza clases numeradas (por ejemplo, col_5).
Como puede ver, para obtener el ancho completo, necesita el total de sus números de clase de columna para sumar 12. Así que si desea dividir la página a la mitad, creará dos divs, cada uno de los cuales tiene la clase ? col_6? (6 + 6 = 12). Puedes hacer esto con cualquier combinación que agregue hasta 12: col_7 + col_5, col_2 + col_10, etc.
Para probar esto, haremos lo que siempre hago para probar un sistema de cuadrícula, codificar un diseño básico de tres columnas. El CSS para esto ya está en su lugar, por lo que eliminar un diseño de tres columnas es tan fácil como crear tres divs, cada uno con el? Col_4? clase.
En cada división, lanzaremos tres elementos: un título (h3), un párrafo y una imagen. Las imágenes de marcadores de posición se capturan a través del servicio placehold.it.
Todo lo que tienes que hacer es reemplazar el? Grid.png? Imagen con su propio patrón de fondo. Agarré este y lo coloqué solo para darle un poco de contraste a nuestra página.
Presentaciones de diapositivas y botones
Todavía apenas hemos raspado la superficie de los grandes elementos que están disponibles en este marco. Vamos a sacar una nueva sección rápida que utiliza algunas características más.
Aquí se usa una división fea, no semántica, para despejar las carrozas, pero esta es una práctica bastante común y realmente no es el fin del mundo, así que no te metas demasiado.
Para diseñar la división de pie de página, se aplicó un poco de relleno y color y el pequeño enlace a la parte superior de la página se recortó un poco. Esta transición se anima a través de un JavaScript incorporado más elegante.
Producto final
Podríamos seguir durante días con todo lo que hay en este kit de herramientas. También encontrará tablas, formularios, galerías de imágenes, migas de pan, tabuladores, reglas horizontales e incluso fragmentos de código anteriores.
Con lo que hemos pasado, tienes la idea básica de cómo funciona todo. La documentación es muy completa, por lo que todo lo que tiene que hacer es encontrar el elemento que desea insertar, luego pegar el código en su HTML y modificarlo según sea necesario. Aquí hay otro vistazo a la página que acabamos de construir:
Manifestación: Haga clic aquí para iniciar.
¿Para quien es esto?
Ahora que hemos visto cómo Para usar HTML KickStart, es importante discutir por qué lo usarías Quizás aún más relevante es quién debería pensar en darle una oportunidad a esto.
Al igual que la mayoría de los frameworks y placas de características, HTML KickStart le proporciona un punto de partida realmente sólido para sus proyectos de desarrollo, no solo desde un punto de vista HTML, sino también para CSS e incluso JavaScript. Debe pensar en darle un vistazo si actualmente no tiene un sistema implementado que facilite el inicio de nuevos proyectos.
? La verdadera fuerza en este tipo de herramientas es la creación rápida de prototipos?Tenga en cuenta que hay mucho en este kit de herramientas, demasiado para el gusto de muchos desarrolladores. Puede elegir y elegir lo que desea y omitir el resto, pero también considerar que la verdadera fortaleza en este tipo de herramientas es la creación rápida de prototipos. En un producto terminado, es posible que desee tomarse el tiempo para elaborar un esquema de diseño y todos estos elementos de diseño de forma manual, pero en las etapas iniciales del concepto, ¿por qué no actualizar sus wireframes no funcionales a algo como lo que construimos hoy? Es mucho más interactivo que un boceto plano y realmente no se necesita mucho más tiempo para reventar.
¿Tiene algo de bueno?
Sin duda, este no es el único producto de su tipo en el mercado. Hay un millón de marcos gratuitos diferentes por ahí, cada uno con su propio grado de estilo personalizado. Como mencioné anteriormente, lo más cercano que he visto de HTML KickStart es el Bootstrap de Twitter. De hecho, los dos proyectos son casi idénticos de un vistazo.
Habiendo probado ambos, definitivamente hay mucho que me gusta de Bootstrap mejor. Para empezar, el diseño es un poco más apretado y los documentos pasan por funciones avanzadas como compensar columnas. También me gustan más los estilos de tipografía de Bootstrap y realmente aprecio la integración LESS.
Dicho esto, hay algunas cosas que me gustan de HTML KickStart que no encontrarás en Bootstrap. Por ejemplo, la función de presentación de diapositivas es una gran ventaja y algo que realmente usaría bastante. Además, todo el JavaScript en HTML KickStart? Simplemente funciona? mientras que tuve que hacer muchas trampas para que las cosas funcionaran en Bootstrap.
En última instancia, te recomiendo que pruebes dos de ellos para ver cuál te gusta más. Aún mejor, utilice ambos como inspiración para desarrollar su propio marco personal que se adapte a sus necesidades.
Conclusión
HTML KickStart es un proyecto increíble y realmente aprecio todo el trabajo manual que se ha realizado. Cuando los miembros de la comunidad de desarrollo distribuyen proyectos como este libremente, siempre me sorprende su generosidad y disposición para ayudar a los demás.
A estas alturas ya debe tener una comprensión sólida de qué es HTML KickStart, qué hace, cómo usarlo y si es o no el adecuado para usted. Deja un comentario abajo y déjanos saber lo que piensas. ¿Cómo se compara este proyecto con otros kits de herramientas similares que has usado?