Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox. Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
Otra ventaja con Bulma es que simplemente necesita tener conocimientos de HTML y CSS para implementar este marco (aunque saber JavaScript puede ayudar a las funciones existentes según sus necesidades). Bulma también nos permite agregar nuestro propio estilo CSS, pero se recomienda usar una hoja de estilo externa sobre el estilo en línea.
Uso de Bulma: si es un desarrollador web principiante, la forma más sencilla es usar un enlace CDN jsDelivr dentro de la sección principal del archivo HTML usando la etiqueta de enlace.
Enlace CDN:
https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css
Otra característica interesante de Bulma es que simplemente puede importar los archivos SASS que necesita para los elementos particulares en los que desea aplicar el estilo de Bulma. Por ejemplo, si desea el estilo de Bulma para los elementos del formulario, puede importar solo ese archivo sass. De lo contrario, puede instalar el paquete Bulma con npm.
Ejemplo: La sintaxis de Bulma es extremadamente simple, hay nombres de clase predefinidos que nos ayudan a crear elementos de acuerdo con el nombre.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <center> <strong class="has-text-success">GeeksforGeeks</strong> <br> <a class="button">Buton</a> </center> </body> </html>
Salida: El botón creado no es como el botón HTML genérico y el texto GeeksforGeeks tiene el color de la clase Bulma Color.
Ejemplo: cada elemento de Bulma tiene múltiples estilos alternativos disponibles, y estos se pueden aplicar usando modificadores de clase is- o has- .
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <center> <a class="button is-large">Hello</a> <a class="button is-medium">Hello</a> <a class="button is-small">Hello</a> </center> </body> </html>
Producción:
Estos modificadores forman la base para manipular objetos en Bulma. Algunos de los modificadores de color que proporciona Bulma son:
- es-primario
- es-info
- es-el éxito
- es-peligro
- es-advertencia
Los modificadores de tamaño van desde is-size-1 hasta is-size-6 . Esto ayuda a cambiar el tamaño de fuente. Intente usar etiquetas h1 a h6 en Bulma, pero notará que no hay cambios en el tamaño de fuente visible. Esto se debe a que Bulma solo usa los modificadores para cambiar el tamaño del texto y no en la forma estándar de HTML. Intente ejecutar este código para comprender cómo las etiquetas h1 a h6 no afectan el tamaño del texto.
Ejemplo 1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <h1>hello world</h1> <h2>hello world</h2> <h3>hello world</h3> </body> </html>
Producción:
hello world hello world hello world
Ejemplo 2: agregue múltiples variaciones dentro del atributo de clase de elemento. Prueba este código y observa que hemos usado dos modificadores uno para el color y el segundo para el tamaño.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Bulma!</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css"> </head> <body> <a class="button is-primary is-large">Hello</a> <a class="button is-primary is-medium">Hello</a> <a class="button is-primary is-small">Hello</a> </body> </html>
Producción:
ventajas:
- Diseño responsivo para todos los dispositivos (computadoras de escritorio, tabletas y móviles).
- Fácil de leer y escribir el código.
- Se puede combinar con cualquier marco de JavaScript (AngularJS, ReactJS).
Desventajas:
- En etapa de desarrollo.
- Necesita mejoras menores.
- Nuevo marco
Publicación traducida automáticamente
Artículo escrito por sreemukhikasi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA