Bulma: Un moderno framework CSS

¿Qué es Bulma?

Bulma es un framework basado en Flexbox, en el que sólo necesitas un archivo CSS para comenzar a utilizarlo en tus proyectos o puedes optar por la versión en la que descargas los archivos Sass y modificar las variables a tu gusto.

En Bulma no existe ningún archivo JavaScript, así que lo puedes usar tranquilamente sin necesidad de ninguna librería o plugin extra.

Características

• Sistema grid muy simple: Sólo basta con añadir columnas. ¡Se redimensionan sin necesidad de añadir una clase extra que le diga cómo actuar!

<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>

• Barra de navegación flexible: No importa qué tipo de elemento incluyas se alinea verticalmente.
• Composición de elementos con clases modificadoras: Sus clases son precedidas por is-*, las cuales puedes añadir o quitar para modificar elementos más rápidamente … Y son fáciles de recordar.

<a class="button is-primary"> Botón is-primary </a>
<a class="button is-info"> Botón is-info </a>
<a class="button is-success"> Botón is-success </a>
<a class="button is-warning"> Botón is warning </a>
<a class="button is-danger"> Botón is-danger </a>

• Elementos verticalmente centrados: No importa dónde, cómo … ni que; cualquier elemento que quieras poner estará justo al centro.
• Además contiene los elementos básicos que cualquier framework must to have:  botones, menú, cards, notificaciones.

Compatibilidad

Podemos usar Bulma con las siguientes versiones de navegadores.

• Chrome 45+
• Edge 13+
• Firefox 43+
• Internet Explorer 10+
• Safari 9+
• Opera 37+

¿Cómo empezar?

Tenemos tres forma de instalarlo:

1. Usando NPM (se necesita NODEJS):  npm install bulma
2. Usa el cdnjs CDN: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css
3. Descarga desde el  repositorio: https://github.com/jgthms/bulma/tree/master/css

… y ¡listo! puedes comenzar a usarlo.

Te recomiendo la documentación en el siguiente enlace para que lo revises y puedas implementarlo en tus proyectos web: Bulma.io