Bulma - Guía rápida

¿Qué es Bulma?

Bulma es un marco CSS de código abierto, simple y moderno, que depende del módulo flexbox (se utiliza para desarrollar una estructura de diseño receptiva).

Historia

Bulma fue publicada en el año 2016 y distribuida bajo licencia MIT. La versión actual de Bulma es 0.7.1, fue lanzada el 18 de abril de 2018.

¿Por qué utilizar Bulma?

Bulma es muy fácil de aprender y configurar. Está construido con SASS y dividido por 39 archivos .sass . El código se puede personalizar fácilmente dividiéndolo en archivos separados y permite personalizar la parte de la aplicación para obtener el resultado esperado.

Caracteristicas

Es un marco CSS moderno y ligero, que utiliza Flexbox.
Contiene los primeros estilos móviles en un solo archivo, en lugar de en archivos separados.
Es personalizable y modular.

Ventajas

Proporciona un diseño receptivo para computadoras de escritorio, tabletas y móviles.
Es un marco CSS puro, por lo que puede combinarlo con cualquier marco JavaScript como AngularJS, ReactJS, etc.
Utiliza un código HTML mínimo, lo que facilita la lectura y escritura del código.

Desventajas

Es un nuevo marco, que no es una comunidad tan grande.
Tiene menos documentación y necesita algunas mejoras menores.
Este marco aún se encuentra en fase de desarrollo.

Descripción

Bulma es un marco CSS moderno y liviano, que depende del módulo flexbox (se utiliza para desarrollar una estructura de diseño receptiva y diseños elegantes).

La descripción general de Bulma incluye comenzar con Bulma, capacidad de respuesta (puede ver las páginas web en diferentes dispositivos como computadoras de escritorio, tabletas y teléfonos), colores, funciones para definir colores y valores, y mixins (grupo de propiedades CSS que le permiten utilizar propiedades de una clase para otra clase) en Bulma.

La siguiente tabla enumera los diferentes tipos de utilidades que puede utilizar para utilizar Bulma CSS:

S.No.	Utilidad y descripción
1	Empezando con Bulma Puede comenzar con Bulma usando un archivo css.
2	Capacidad de respuesta y colores Es un desarrollo compatible con dispositivos móviles, que se puede combinar con dispositivos grandes, pequeños y medianos.
3	Funciones y Mixins Bulma usa algunas funciones y mixins para definir valores y elementos respectivamente.

Descripción

Los modificadores en Bulma incluyen estilos alternativos para los elementos mediante el uso de clases, clases receptivas para alterar estilos, ayudantes de color para cambiar el color de los elementos, ayudantes de tipografía para cambiar el tamaño y el color del texto.

La siguiente tabla enumera los diferentes tipos de modificadores que puede utilizar para utilizar Bulma CSS:

S.No.	Modificadores y descripción
1	Modificadores de sintaxis y Responsive Helpers Puede crear estilos alternativos para los elementos utilizando clases modificadoras.
2	Ayudantes de color y tipografía Puede utilizar los ayudantes de color para cambiar el color del texto o del fondo.

Descripción

Bulma proporciona un sistema de cuadrícula sensible (creando diseño de página a través de una serie de filas y columnas), que escala hasta 12 columnas dentro de un contenedor. Las columnas se reorganizarán a medida que aumente el tamaño del dispositivo o la ventana gráfica.

La siguiente tabla enumera las variaciones de columnas que puede usar para utilizar Bulma CSS:

S.No.	Tipos y descripción de columnas
1	Diseño y tamaños de columnas Bulma permite construir un diseño de columna muy fácilmente agregando clases de columnas en el contenedor.
2	Capacidad de respuesta y anidamiento de columnas Bulma proporciona columnas receptivas en los diferentes tipos de pantallas, como dispositivos móviles, tabletas y computadoras de escritorio.
3	Espacio entre columnas y opciones Las columnas crean un espacio igual entre el contenido de la columna.

Descripción

El diseño de Bulma describe la estructura de la página web, que está diseñada utilizando sus clases CSS.

La siguiente tabla enumera las variaciones de diseño que puede utilizar para utilizar Bulma CSS:

S.No.	Tipos de diseño y descripción
1	Contenedor y niveles Bulma usa contenedores para representar el diseño básico y envolver el contenido del sitio.
2	Objeto multimedia El objeto multimedia se utiliza para especificar estilos de objetos abstractos para construir varios tipos de componentes.
3	Bandera de héroe Bulma proporciona un banner de héroe para especificar el banner de ancho completo en la página web.
4	Losas Bulma crea un diseño bidimensional utilizando una clase de elemento único.

Descripción

El elemento de formulario Bulma especifica los datos de entrada del usuario mediante el uso de elementos de entrada (como campos de texto, casillas de verificación, botones de opción y más) y los envía a un servidor para procesar los datos.

La siguiente tabla enumera variaciones de formularios que puede usar para utilizar Bulma CSS:

S.No.	Tipos de formulario y descripción
1	Controles de formulario Bulma contiene diferentes tipos de clases de control de formularios para crear una variedad de formularios.
2	Entrada Bulma proporciona un campo de entrada para ingresar datos del usuario junto con diferentes tipos de variaciones.
3	Textarea Bulma textarea se utiliza cuando necesita varias líneas de entrada.
4	Seleccione Bulma select se usa cuando desea permitir que el usuario elija entre múltiples opciones.
5	Casilla de verificación y radio Las casillas de verificación y los botones de opción se pueden utilizar cuando desee que los usuarios elijan de una lista de opciones predeterminadas.
6	Archivo Se utiliza para cargar los archivos de los datos del usuario.

Descripción

Bulma proporciona diferentes tipos de elementos, como el elemento de caja que se puede utilizar como contenedor, elemento de botón, contenedor de imagen para especificar la imagen, elemento de tabla, etc.

La siguiente tabla enumera variaciones de elementos que puede utilizar para utilizar Bulma CSS:

S.No.	Tipos de formulario y descripción
1	Botón Un elemento de botón proporciona interacción del usuario con estilos de botón personalizados.
2	Contenido Bulma proporciona clases de contenido para usar etiquetas HTML directamente.
3	Caja e icono La clase .box define un contenedor que incluye un borde, un radio y un relleno.
4	Imagen Bulma usa la clase .image para mostrar las imágenes en la página.
5	Barras de notificación y progreso Bulma especifica mensajes de alerta predefinidos para mostrar la notificación.
6	Mesa Bulma envuelve los elementos para mostrar datos en formato tabular.
7	Etiqueta y título Bulma proporciona pequeñas etiquetas llamadas etiquetas para mostrar la información adicional.

Descripción

Bulma viene con componentes prediseñados, que proporcionan menús desplegables, modal, paginación, barra de navegación, pestañas, etc. para facilitar la experiencia del usuario en la página.

La siguiente tabla enumera las variaciones de los componentes que puede utilizar para utilizar Bulma CSS:

S.No.	Descripción de Componente
1	Migaja de pan Bulma utiliza el componente de ruta de navegación como método de navegación para indicar la ubicación de la página actual al usuario en la aplicación.
2	Tarjeta El componente de tarjeta muestra el contenido en un cuadro para una mejor apariencia.
3	Desplegable Bulma proporciona menús desplegables que se pueden alternar para mostrar enlaces relacionados en un formato de lista.
4	Mensaje Bulma proporciona bloques de mensajes para mejorar el aspecto de su página.
5	Modal Modal es una ventana secundaria que se coloca en capas sobre su ventana principal.
6	Barra de navegación Las barras de navegación sirven como encabezados de navegación para su sitio.
7	Paginación El componente de paginación proporciona una serie de enlaces relacionados en varias páginas.
8	Pestañas Bulma proporciona un menú de navegación con pestañas con diferentes estilos para mostrar el contenido.