Crear paginas web con Bulma CSS Framework

 in Web Example by

Bulma css es un framework que sirve para crear front end, vistas, paginas web, etc y esta creciendo y siendo usado por mas personas, empresas, etc.

Vamos a darle un recorrido a lo que nos ofrece Bulma Css framework.

Dentro de las caracteristicas pricipales se encuentran:

  • Gratis
  • Codigo abierto
  • Framework css basado en flexbox

Componentes

En cuanto a componentes, tenemos los clasicos que no pueden faltar.

  • Sistema de filas y columas responsivas/adaptables.
  • Contenedores
  • Levels
  • Object media
  • Hero / Texto destacado
  • Footer
  • Tiles / Mosaicos
  • Formularios: Entrada de texto, textarea, select, checkbox, file, etc.
  • Botones
  • Progressbar
  • Tablas
  • Notificaciones
  • Box / Cajas
  • Breadcrumb
  • Card / Tarjetas
  • Menu
  • Navbar
  • Modal
  • Paneles
  • Y mucho mas

Ademas cada componente cuenta con sus propios parámetros de configuración y existen clases helpers para personalizar todo aun mas.

Para empezar a crear paginas web o Bulma, primero debemos descargar los archivos css de la pagina oficial: https://bulma.io/

Bulma CSS solo contiene archivos CSS por lo que las funciones javascript hay que programarlas a mano, sin embargo por la facilidad de Bulma css, las funciones javascript solo serian agregar y quitar clases.

Codificando una pagina web

Primero debemos crear una pagina html por ejemplo index.html, colocar la carpeta de bulma en la carpeta del archivo html e incluir el archivo bulma.min.css.

<head><link rel="stylesheet" type="text/css" href="bulma-0.7.5/css/bulma.min.css"></head>

Después en el body podemos empezar agregando un menu.

<nav class="navbar" role="navigation" aria-label="main navigation">
	<div class="container">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
    	<b>EVILNAPSIS</b>
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a href="index.html" class="navbar-item">
        Inicio
      </a>
    </div>

  </div>
</div>
</nav>

También podemos agregar un hero.

<section class="hero is-medium is-primary is-bold">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Primary bold title
      </h1>
      <h2 class="subtitle">
        Primary bold subtitle
      </h2>
    </div>
  </div>
</section>

Después agregamos una fila de columnas que contienen tarjetas (en el ejemplo pongo solo una fila con una tarjeta)

<div class="container">
<div class="columns">
<div class="column is-3">

<div class="card">
<header class="card-header">
<p class="card-header-title">
Imagen
</p>

</header>
<div class="card-content">
<div class="content">
<img src="image/casa.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.

</div>
</div>

</div>

</div>

</div>
</div>

Y finalizamos con un pie de pagina o footer.

<footer class="footer">
  <div class="content has-text-centered">
    <p>
      <a href="http://evilnapsis.com">Evilnapsis</a> © 2019    </p>
  </div>
</footer>

Resultado

Ahora les muestro el resultado.

Descargar

Pueden descargar el ejemplo + la libreria usando el siguiente enlace.

Link: https://drive.google.com/file/d/1T0dvvD4p2pxjUl7grBPes885WLKZHg-l/view

Finalizando

Bulma parece ser una buena opcion para crear sitios web de prueba o ligeros, tambien algun sistema web.

En la pagina oficial podrán encontrar toda la documentación necesaria para sacarle provecho a este framework.

Eso seria todo, ustedes que opinan, usarían Bulma CSS para algún proyecto?

Leave a comment