Evilnapsis

Programming, Hacking and More

Web Example

Crear paginas web con Bulma CSS Framework

Agustin Ramos

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?

Agustin Ramos

Desarrollador de Software

Leave a Reply