Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Bulma: Un moderno framework CSS


  Publicado hace |  Etiquetas: , , , , ,

¿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

comments powered by Disqus