Going Deeper With Bulma

Yesterday we saw Bulma in Action, providing us with the tools to quickly generate mobile responsive UI Elements for our application. Bulma is just one of many CSS frameworks for building our UI elements. Here are some articles to learn about many of the other popular CSS frameworks.

• Top 14 CSS Frameworks
• Top CSS Animation Libraries

Setup

• generate a project using the EJS/Express/Mongo Supreme template npx degit AlexMercedCoder/ejs-express-supreme#main bulmapractice
• cd into the bulmapractice folder
• install dependencies npm install
• rename template.env into .env and add your mongodb url to the MONGODB_URL variable

Installing Bulma

While this template already has Bulma installed, like most CSS frameworks, it can be installed by adding a link tag in the html head tag.

We see this in the views/partials/head.ejs file.

<!-- BULMA CSS - https://bulma.io/ -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
/>

Title

BULMA TITLE DOUCMENTATION

To give us some more control over titles on our page, Bulma gives us the title and subtitle class whose size can be controlled by adding the is-x class to specify a size from 1(largest) to 6(smallest).

Let's add the following to our views/home.ejs file.

<main>
  <h1 class="title is-1">This is my Title</h1>
  <h2 class="subtitle is-2">This is my subtitle</h2>
</main>

A CSS framework alone isn't often alone going to do everything we need. Luckily, our template has a css file already connected so we can supplement Bulma's styling. Let's use our css file by centering our titles.

public/css/style.css

h1.title {
  text-align: center;
}

h2.subtitle {
  text-align: center;
}

Columns

Bulma Columns Documentation Bulma Colors Documentation

While flex-box and grid have really made creating layouts much easier in native CSS. Frameworks like Bulma make creating your layout even easter. Let's quickly create a two column layout with a main column that is 2/3 of the width and a side-bar.

• the columns class defines a container of columns
• the column class defines one of the blocks in the container as a column
• the is-two-thirds class defines the column as taking 2/3 of the width.
• the has-background-grey-light makes the background of the columns grey

So let's apply this into our views/home.ejs.

<main>
  <h1 class="title is-1">This is my Title</h1>
  <h2 class="subtitle is-2">This is my subtitle</h2>

  <div class="columns">
    <div class="column is-two-thirds has-background-grey-light">
      The Main Columns
    </div>
    <div class="column has-background-grey-light">
      Sidebar
    </div>
  </div>
</main>

What's nice is that if you place with the viewport size, it'll auto stack the columns when in a smaller size making mobile responsiveness, a breeze!

Let's add even more content and flesh this out!

<main>
  <h1 class="title is-1">This is my Title</h1>
  <h2 class="subtitle is-2">This is my subtitle</h2>

  <div class="columns">
    <div class="column is-two-thirds has-background-grey-light">
      <h2 class="title is-2">Main Area</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
        consequuntur fuga totam vero ipsa error aperiam nulla qui laborum iure
        hic porro omnis non in voluptates deserunt saepe, harum possimus?
      </p>
    </div>
    <div class="column has-background-grey-light">
      <h3 class="subtitle is-3">Side Menu</h3>
      <ul>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
    </div>
  </div>
</main>

Notification Blocks

Bulma Notification Documentation

Notification blocks are styled to standout, great for toasts, models or just content you want to highlight. Let's try one out in our side menu.

Hero

The hero class allows use to create a visual banner we can use anywhere in our page for a nice visual effect. Let's add a hero below our two columns.

<main>
  <h1 class="title is-1">This is my Title</h1>
  <h2 class="subtitle is-2">This is my subtitle</h2>

  <div class="columns">
    <div class="column is-two-thirds has-background-grey-light">
      <h2 class="title is-2">Main Area</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
        consequuntur fuga totam vero ipsa error aperiam nulla qui laborum iure
        hic porro omnis non in voluptates deserunt saepe, harum possimus?
      </p>
    </div>
    <div class="column has-background-grey-light">
      <h3 class="subtitle is-3">Side Menu</h3>
      <ul>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
        <li>Menu Item</li>
      </ul>
      <div class="notification is-primary">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet quis
        voluptatem dolorem dolore voluptatibus aliquam porro itaque repellendus
        laboriosam! Saepe aperiam error tenetur quasi. Aperiam repellat
        perferendis velit quas error!
      </div>
    </div>
  </div>
  <section class="hero is-link">
    <div class="hero-body">
      <p class="title">
        This is our hero
      </p>
      <p class="subtitle">
        Our hero subtitle
      </p>
    </div>
  </section>
</main>

Lab Time

Now that you know more about Bulma, let's visit our Lab from yesterday and apply some of what you learned in styling your pokemon page. (Do explore the Bulma documentation for ideas!)

• Lab: - Non-Deliverable

Some additional challenges to spice up your pokemon app!

• Create a show page that'll allow you to see more details for each pokemon

• Refactor your app that you seed the api data into your database so your app can instead work off your database (then you can do the seven restful routes)

  • Create a Pokemon Model
  • Import the Model and axios into your seed file
  • Use the data from the api to create more pokemon