Es difícil apreciar completamente todo lo que hay en un sitio web hasta que intentas construirlo tú mismo.
Desde el alojamiento hasta el contenido, desde el diseño hasta la seguridad, construir y mantener una presencia en línea puede ser increíblemente gratificante y exigente. Entonces, cuando haya algo para aligerar la carga de trabajo, puede estar seguro de que la comunidad de desarrolladores web estará ansiosa por probarlo.
Este es el caso de los frameworks CSS. CSS Structure es un conjunto de herramientas que facilita la escritura de código CSS; la mayoría de ellas tienen bibliotecas integradas de elementos HTML que se adhieren a las mejores prácticas de diseño e incorporan compatibilidad con dispositivos móviles sin mucho esfuerzo de su parte.
En resumen, los marcos CSS lo ayudan a crear una mejor interfaz de usuario en menos tiempo.
En este post te presentaré Bulma, un jugador relativamente nuevo en el espacio CSS. Exploraremos qué hace de Bulma un framework único, por qué deberías probarlo y cómo empezar a usar algunos de sus elementos principales. Por las razones que veremos, Bulma es una gran herramienta tanto para los desarrolladores novatos como para los experimentados para diseñar sus páginas, así que comencemos.
¿Qué es CSS Bulma?
Bulma es un marco CSS gratuito basado en clases. Permite a los desarrolladores implementar CSS de manera más eficiente en páginas web que CSS simple. Lanzado por primera vez en 2016, Bulma ha ganado popularidad entre los desarrolladores front-end lo suficiente como para competir con otros marcos CSS conocidos como Bootstrap.
Bulma se basa en Flexbox, un modelo de diseño CSS que ajusta automáticamente el ancho de un elemento de página en función del ancho de su contenedor. Flexbox requiere que los desarrolladores escriban HTML y CSS para crear elementos que se ajusten a este modelo. Gracias a Bulma, el comportamiento de Flexbox y la mayoría de las demás cosas se pueden manejar con clases HTML.
Bulma CSS también es de código abierto: puede ver su código fuente en Repositorio de Bulma en GitHub – que permite a los desarrolladores crear nuevas funciones dentro del marco.
¿Por qué deberías usar Bulma CSS?
Si recientemente aprendió CSS como lenguaje, aprender un marco como Bulma puede parecer excesivo. Pero si bien los marcos de CSS no son necesarios para crear un sitio web, pueden aliviar muchos desafíos de CSS.
Si quieres construir un sitio web desde cero, aquí hay algunas razones por las que Bulma es tu amiga:
- Eficiencia: Los marcos como Bulma ahorran tiempo al implementar efectos CSS más complicados para usted.
- Sencillez: Como veremos, Bulma es fácil de agregar al código. Si entiendes las clases de CSS, puedes entender a Bulma. Además, Bulma no se abruma con muchas opciones, todo es CSS.
- Cohesión: Asimismo, la sintaxis de Bulma es coherente e intuitiva, por lo que es fácil de aprender y de interpretar si no has escrito el código tú mismo.
- Capacidad: La biblioteca de componentes de la interfaz de usuario de Bulma maneja la mayoría de las cosas que los sitios web necesitan en una interfaz de usuario, incluidos encabezados, menús, formularios y pestañas. Cada uno de estos componentes en sí requiere una gran cantidad de CSS simple para implementar. En Bulma, los mismos elementos se pueden diseñar con algunos comandos básicos.
- Modularidad: Bulma incluye ~ 40 archivos .sass (Sass es el lenguaje de extensión CSS que usa Bulma), cada uno de los cuales admite un componente de interfaz diferente. Pero no tienes que importar todos estos archivos si no quieres, solo los que necesitas. Lea cómo aquí.
- Sensibilidad: Como Bulma se basa en Flexbox, sus componentes integrados responden por diseño, lo que significa que los elementos se moverán y escalarán para adaptarse a cualquier tamaño de pantalla o vista.
Estos beneficios le han dado a Bulma una buena reputación. Y con un poco de práctica, puede lograr resultados impresionantes. Compruébelo. presentación de bulma para tener una idea de lo que es posible y usar la herramienta de auditoría de su navegador para ver cómo se construyen estos sitios.
Bulma contra Bootstrap
Si está familiarizado con los marcos CSS, probablemente esté familiarizado con Bootstrap, el marco CSS más popular en la actualidad. Tanto Bootstrap como Bulma son marcos CSS móviles gratuitos y de código abierto que hacen cosas similares pero difieren en popularidad, capacidades y complejidad.
Bootstrap existe desde 2011 y, como resultado, tiene una base de usuarios y una comunidad de soporte más grandes. Esto significa que es más probable que encuentre soluciones a problemas avanzados con Bootstrap que con Bulma. Sin embargo, la documentación de Bulma es detallada y simple, y la comunidad de desarrolladores está creciendo.
También hay más elementos y más opciones de estilo e implementación en la biblioteca de Boostrap. Hay muchas cosas que puedes hacer con Bulma, pero vale la pena echarle un vistazo. Componentes de arranque para conocer mejor las diferentes ofertas. También se debe tener en cuenta que Bulma no tiene las capacidades de accesibilidad que ofrece Bootstrap, pero Bulma se actualiza con frecuencia y puede mejorar la accesibilidad en versiones futuras.
Otra diferencia importante entre los dos es que Bootstrap incluye JavaScript, el lenguaje de secuencias de comandos para crear contenido de sitios web dinámicos, mientras que Bulma no. JavaScript puede resultar intimidante para los nuevos desarrolladores web. Si no está listo para un nuevo idioma, Bulma puede ser un paso más amigable hacia los marcos CSS. Si bien no necesita saber JavaScript para usar Bootstrap, algunos componentes de Bootstrap, como carruseles y alertas, sí lo requieren.
Cómo usar Bulma CSS
Basta de hablar, empecemos a programar. En esta sección, te mostraré cómo agregar Bulma a los archivos de tu sitio web y luego te familiarizaré con algunas de las características básicas de Bulma.
¿Cómo configurar Bulma?
Primero, debemos preparar nuestros archivos HTML para usar el marco Bulma. Asegúrese de que el siguiente código esté en la parte superior de todos sus archivos HTML:
<!DOCTYPE html>
Luego pon lo siguiente etiqueta w
<meta name="viewport" content="width=device-width, initial-scale=1">
Ahora que sus archivos HTML están listos, tiene varias formas de agregar la funcionalidad de Bulma:
Usar NPM
Para instalar Bulma desde MNP bibliotecas, ejecute el siguiente comando en la terminal:
https://www.npmjs.com/
Usar CDN Bulma CSS
Pon el siguiente código en el
<link rel="stylesheet" target="_blank" rel="noopener" href="https://cdn.jsdelivr.net/npm/Bulma@0.9.1/css/Bulma.min.css">
Este es el método que usaré más adelante como ejemplos.
Descargar archivos de Bulma directamente
También puede descargar los archivos que necesita directamente desde Web de Bulma. Después de la descarga, abra el paquete y consulte los archivos necesarios de Bulma en los archivos HTML.
Cómo escribir Bulma CSS
La sintaxis de Bulma se basa en clases HTML. Si desea diseñar un elemento de página, simplemente agregue una o más clases dentro de la etiqueta HTML del elemento. Primero veamos esto en acción con el componente de botón.
botones
Para implementar el botón Bulma, agregue botón clase a HTML ,
ver la pluma Bulma CSS – Botón de Christina Perricone (@hubspot) en CódigoPen.
Bulma reconoce botón clase y aplica un estilo básico para que se vea bien. Pero lo podemos hacer mejor.
Además de las clases básicas de elementos, Bulma tiene clases de modificadores que añaden estilos alternativos a los elementos. Los nombres de las clases de modificadores comienzan con es- o mamá- seguido de un estilo.
Echemos un vistazo a cómo puede usar modificadores en un botón, comenzando con es redondeado clase. Esta clase de modificador redondea las esquinas de nuestro botón:
ver la pluma Bulma CSS – botón redondeado de Christina Perricone (@hubspot) en CódigoPen.
Las clases de modificadores también cambian el color y el sombreado del botón:
ver la pluma Bulma CSS – Color del botón de Christina Perricone (@hubspot) en CódigoPen.
Como habrás adivinado, podemos usar múltiples clases de modificadores en el mismo elemento. A continuación, apliquemos una clase de modificador para el color y una segunda clase de modificador denominada esta rayado:
ver la pluma Bulma CSS – Esquema del botón de Christina Perricone (@hubspot) en CódigoPen.
Podemos usar algunos para agregar más detalles. mamá- clases de modificadores para cambiar el texto y rellenar los botones interiores:
ver la pluma Bulma CSS – Color del texto del botón de Christina Perricone (@hubspot) en CódigoPen.
Finalmente, podemos controlar el tamaño del botón con varias clases de modificadores:
ver la pluma Bulma CSS – Tamaño del botón de Christina Perricone (@hubspot) en CódigoPen.
Esto es solo el comienzo de lo que puede hacer con los botones. Compruébelo. Documentación del botón Bulma para obtener una lista completa de modificadores y más.
Barras de progreso
Veamos otro artículo genial en la biblioteca de Bulma, barra de progreso. Para colocarlos, agrega la clase Bulma Progreso abajo
ver la pluma Bulma CSS – Barra de progreso de Christina Perricone (@hubspot) en CódigoPen.
Al igual que los botones, también puede agregar clases de modificadores a sus barras de progreso:
ver la pluma Bulma CSS – Barra de progreso estilizada de Christina Perricone (@hubspot) en CódigoPen.
El último efecto de movimiento de barra se crea por exclusión. valor atributo de la etiqueta.
Entrada del usuario
Bulma se entrega con el kit controles de formulario, elementos utilizados para recopilar información enviada por los usuarios. Esto incluye elementos de texto. Entraday radio botón, un casilla de verificacióny Elegir Menú desplegable:
ver la pluma Bulma CSS – Controles de formulario de Christina Perricone (@hubspot) en CódigoPen.
columnas
Concluiremos con una introducción a Bulma. columnas una clase que le permite crear columnas cuyo tamaño cambia según el ancho del contenedor y la cantidad de columnas en la página.
Las columnas son una parte integral del formato de su sitio web, pero una de las más difíciles de formatear, especialmente si se adapta a diferentes tamaños de ventana. Bulma lo hace todo por nosotros si nos unimos columnas clase a padre div y columna clase a cada div. niño.
ver la pluma Bulma CSS – Columnas 1 de Christina Perricone (@hubspot) en CódigoPen.
Para establecer diferentes anchos de columna, intente agregar uno de los modificadores de ancho de columna de Bulma a uno o más de los elementos secundarios de la columna: las otras columnas ajustarán sus anchos automáticamente.
ver la pluma Bulma CSS – Columnas 2 de Christina Perricone (@hubspot) en CódigoPen.
el esta de nuevo gráfico se puede hacer más con las columnas en Bulma CSS; estos son solo los conceptos básicos. Mirar documentación de las columnas para todas las posibilidades.
Deje que los marcos hagan el trabajo
Aprender el marco de trabajo de CSS a partir de su conocimiento actual de CSS puede parecer un trabajo adicional a corto plazo. Sin embargo, cuanto más tiempo pase aprendiendo y practicando el desarrollo front-end, más apreciará los beneficios de herramientas como Bulma.
Bulma no es el mejor marco CSS para todos, por lo que es mejor evaluar otras opciones como Bootstrap CSS mencionada anteriormente para ver cuál es más natural para su estilo. Cualquiera que sea el marco que elija, apuesto a que es mejor que perder horas diseñando el sitio web de sus sueños sin uno.
