Génesis CSS

Un framework css ligero, sencillo y versátil.

Fernando Vázquez

Creador de Génesis CSS

Genesis CSS cuenta con las utilidades básicas para poder tener un sitio web con lo imprescindible; conoce en los siguientes bloques una pequeña parte de las utilidades con las que cuenta Genesis CSS.

#Sistema de cuadrícula

Una forma de ordenar contenido que ya conocerás por otros frameworks; una forma sencilla de ordenar y adaptable a los distintos dispositivos conoce paso a paso como entenderlo y establecer los puntos de corte en el mismo

#Textos de encabezado

A diferencia de las etiquetas nativas de html para texto de encabezado h, se incluyen clases en el mismo orden para poder insertar texto a imitación en tamaño de las nativas. Cabe destacar que tanto las clases con las etiqueta h incluyen variaciones en márgenes sobre los puntos Y

Etiqueta de encabezado h1

Etiqueta span con clase .h1

Con una diferencia notable a las etiquetas h podrás destacar texto con fuentes de mayor tamaño; para esto tienes disponible cinco clases ordenadas de menor a mayor, siendo la última la de menor tamaño de fuente. Clases desde .f7 a .f12

Texto de encabezado .f9

Texto de encabezado .f12

#Formularios

Añade a los formularios los estilos e iconos que se incluyen y, adapta los campos con los distintos puntos de corte y el sistema de cuadrícula. Los estilos estan incluido con la clase form, de esta manera si no estás conforme con ellos, añade tus propios estilos.

#Navbar

Una barra de navegación adapatabe a los distintos dispositivos de la que puedes conseguir varias utilidades, desde poder utilizarla como barra de menú deslizante hacia los laterales, hasta poder tener un bloque de menú lateral, conoce sus posibilidades.

#Mensajes de alerta

Envía avisos a los usuario mediante las alertas estableciando las prioridades a través de sus colores.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, incidunt.

#Tarjetas

Presenta a los usuarios contenidos en tarjetas; ordena estas con el sistema de cuadrícula, o con las diferentes utilidades que ya ofrece el framework. Conoce en la sección como puedes crearlas.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate possimus earum repellat eum dolorem itaque velit nemo laboriosam. Ullam, repellendus.

#Normalize CSS 8.0.1

Normalize.css se entrega junto a los archivos de Genesis css, si tú te sientes más cómodo con otros archivos resets para obtener resultados parecidos; puedes utilizarlo, ya que normalize.css no ha sido modificado para poder utilizarlo junto a Genesis css, ¡pero recuerda una cosa! no olvides el orden de colocación de las etiquetas link rel="stylesheet" ....
Conoce normalize css

#jQuery 3.7.1 min

Esta es la versión de jQuery que se está utilizando en este sitio web, si deseas utilizar alguna versión anterior, no debería presentar problemas, aunque no sería recomendable. Tienes que saber también que se está haciendo uso de jquery-ui.min.js (1.13.2) para desplegar y plegar los contenedores de HTML de las utilidades de Genesis CSS.
Ir al sitio web de jQuery

#Fontawesome 6.5.1 Fuente: cdnjs/libraries

El sitio web está haciendo uso de los iconos de fontawesome 6 y mayormente se está utilizando para los iconos de dirección y enlaces a redes sociales. (Estos pueden variar según las necesidades).
Icons fontawesome 6

Nota jQuery-ui y Fontawesome no se encuentrán incluidos en la descarga.