Hoy vamos a ver un nuevo proyecto de la Red Enavu llamado 52 Framework.
Se afirma que es el primer marco creado específicamente para HTML5 y CSS3. A continuación veremos algunas de las características básicas y profundizaremos en el código para ver qué podemos encontrar.
Respecto a los marcos
Los marcos son un tema interesante. Algunos desarrolladores confían en ellos e incluso llegan a decir que no se debería iniciar una página web sin una, otros los ven como complicaciones innecesarias que agregan una gran cantidad de peso superfluo a lo que de otra manera sería un código bastante simple.
Personalmente estoy en algún punto intermedio. Definitivamente estoy de acuerdo en que muchos marcos, si no se modifican, contienen una gran cantidad de pelusas que podrían ser destruidas. Sin embargo, también los encuentro bastante útiles y que ahorran tiempo.
La clave es la personalización. Cada marco que encontrará en línea fue creado por alguien con un flujo de trabajo diferente al suyo e incluso una forma diferente de pensar sobre los sitios web y su estructura. Esta es una de las razones principales por las que los marcos están tan cargados: para que puedan satisfacer las necesidades de todos. Cada pequeño archivo y pieza de código incluido en la descarga no está destinado a todas las personas, solo sirve como punto de partida para su propio marco personal.
Cuando le pides prestado el auto a otra persona, no solo te subes y conduces. Ajusta el asiento del conductor y los espejos para que se ajusten a sus especificaciones. De la misma manera, no esperes simplemente tomar un framework prefabricado y ejecutarlo. El primer paso debería ser pasar y filtrar todo lo que nunca necesitarás. El segundo paso debe ser agregar los elementos faltantes que siempre necesitarás. Y el tercer paso debe ser modificar las cosas que desea, pero debe modificar ligeramente para su propio uso.
A medida que nos adentramos en el marco a continuación, piense en cada parte y cómo la personalizaría para que se ajuste a sus propias necesidades específicas.
El Marco 52
El Marco 52 es un marco nuevo, y en gran medida en construcción, creado específicamente para utilizar HTML5 y CSS3 de forma compatible con los distintos navegadores y navegadores.
¿Demasiado pronto?
HTML5 y CSS3 son todavía nuevas tecnologías, ¿no es demasiado pronto para comenzar a crear marcos para ellos? Absolutamente no. El soporte para estos dos nuevos estándares está aumentando rápidamente y está siendo impulsado por una gran cantidad de desarrolladores que simplemente no podían esperar para implementarlos.
Si es o no el momento de comenzar a usar HTML5 y CSS3 es otro debate por completo, la idea aquí es que es el momento perfecto para comenzar a construir sistemas para facilitar su uso en el futuro cercano. Nunca habrá un momento en que los estándares web dejen de evolucionar y, por lo tanto, creen el clima perfecto para crear marcos. En lugar de quedarse atrás, herramientas como estas deberían mantenerse al día con las nuevas tecnologías y evolucionar con ellas. De esa manera, a medida que los desarrolladores deciden que es hora de comenzar a implementar HTML5 y CSS3, las herramientas ya estarán disponibles para que lo hagan.
La descarga
Como puede ver, el marco es bastante pequeño en tamaño de archivo, incluso con los PSD incluidos, que obviamente se pueden eliminar por sitio.
La descarga consta de tres archivos CSS, dos archivos HTML, un archivo JS, un archivo JPG y dos PSD. Echaremos un vistazo al papel que desempeña cada uno de estos en la explicación a continuación.
El archivo demo
Una vez que descargues el framework, abre index.html. Este es el corazón de todo el marco y lo que quiero pasar la mayor parte del tiempo discutiendo.
Como puede ver, el marco le ayuda a configurar un número de los elementos más comunes. Sus etiquetas de encabezado (h1, h2 y h3) tienen un estilo junto con la tipografía básica de la página, los elementos de formulario están listos para usar y cuentan con un diseño de botón personalizado adicional, hay un método para mostrar el código e incluso un montón de estilos adicionales en su lugar para diferentes elementos como fuerte, negrita, cursiva, texto insertado, texto grande, etc.
El código
Para ver mejor lo que hay en el archivo de demostración, mire debajo del capó para ver el código. Vamos a analizar esta pieza por pieza a continuación.
DOCTYPE
Lo primero que verá en el archivo .html es el nuevo DocType HTML5, hermosamente sencillo.
Esta es una declaración obligatoria que le dice a los navegadores cómo interpretar su código. Es agradable y sucinto y lo prefiero mucho a las versiones anteriores, más complicadas.
JavaScript
Lo siguiente que verás es un enlace a un archivo JavaScript externo.
No se preocupe, no necesita comprender una sola línea de JavaScript para usar este marco. El JS incluido simplemente usa un par de líneas de código para crear soporte para nuevos elementos en navegadores más antiguos. Es un buen truco que te permite usar muchas de las bondades de HTML5 sin preocuparte por a quién dejas atrás.
Semántica
Lo siguiente que debe notar sobre este documento es cómo se construye el HTML. Utiliza el nuevo marcado semántico que ya deberías estar aprendiendo a seguir. Aquí hay una versión simplificada y simplificada de la estructura.
Como puede ver, aquí se están utilizando una serie de nuevos elementos HTML5. La página está dividida en áreas de encabezado, navegación, apartado, sección, artículo, código y pie de página. Usando el marco, estos elementos proporcionarán la estructura básica para todo lo que crees. Tenga en cuenta que muchas de las piezas para las que normalmente crearía divs tienen soporte nativo en HTML5.
El uso del Marco 52 lo obligará a crear sus páginas con estos nuevos elementos y, por lo tanto, es una excelente manera de saltar a HTML5 cuando llegue el momento.
Restablecer y sistema de red
Hay tres archivos CSS incluidos en el marco: general, cuadrícula y reinicio.El archivo de restablecimiento es bastante básico y es esencialmente una versión modificada del popular restablecimiento de CSS de Eric Meyer. Esta versión fue creada por Richard Clark.
El CSS de la cuadrícula está allí porque, como cualquier buen marco, este utiliza las cuadrículas en gran medida.
Definitivamente no hay nada innovador aquí, es básicamente un sistema de cuadrícula de 16 columnas 960 exactamente como está acostumbrado a usar en otros marcos. Las columnas disponibles varían en ancho desde 40px hasta 940px y cada una contiene un margen izquierdo y derecho de 10px.
CSS general
El CSS principal contiene una serie de estilos útiles para comenzar. Todo en el código HTML mencionado anteriormente tiene estilos específicos en su lugar, junto con una serie de otros elementos básicos como clases de compensación flotante y citas de bloque.
Una característica interesante aquí es que puede configurar el color de selección de una página web para anular el valor predeterminado del navegador. Esto significa que cuando selecciona una línea de texto, el resaltado será el color que defina.
En los estilos de conjuntos de campo, encontrará algunos estilos para crear esas esquinas redondeadas CSS3, que son muy populares.
Finalmente, en el CSS incrustado contenido en el archivo HTML, verás que se aplica algo más de CSS3 para crear sombras.
Más por venir
Como dije anteriormente, el Marco 52 está definitivamente en las primeras etapas y seguirá creciendo y mejorando. Por ejemplo, la versión beta más reciente ha agregado soporte para elementos de lienzo y video.
Me gustaría ver el CSS para esquinas redondeadas y sombras extraídas de elementos específicos en clases generales o elementos de muestra más notables para que no tenga que buscarlos en el código si desea usarlos como iniciador tus propios estilos
Aparte de eso, creo que el marco ha tenido un buen comienzo y realmente puedo verme construyendo sobre él para crear algo que sea perfecto para mi propio uso.
¿Qué cambiarías?
Deja un comentario a continuación y dinos qué te parece el Marco 52. ¿Qué te gusta de ello? ¿Qué odias? Los desarrolladores están buscando sugerencias de características para agregar, así que asegúrese de enumerar las que se les ocurran.