TL;DR: Overcome Nuxt.js, Bulma and Sass shenanigans with this quick article to help you start developing your next App in less than 10 minutes.

Hi everyone ❤️! Few days ago I found myself struggling a bit to put Nuxt.js, Bulma and Sass to work correctly and the info I found on google didn't help too much.

Most of the configurations I found were not working, because they were outdated or didn't explain quite well how to do it. So I deep dived a little bit on this subject and decided to write an article to help you do the same in less than 10 minutes.

Let's have some fun and get our hands dirty while grokking a few concepts needed to do this.

1. Scaffolding Nuxt.js

Nowadays, to get started quickly with Nuxt.js we use a scaffolding tool called create-nuxt-app. Please make sure you have npx installed on your machine.

Let's open a terminal and do: npx create-nuxt-app nuxt-bulma-sass, where nuxt-bulma-sass is the name of the project we're scaffolding for the purpose of this article.

create-nuxt-app will ask you some questions before creating the scaffold. For the purpose of this article I've chosen the following setup:

create-nuxt-app init questions

So, the next step will be to change directory into our project folder:

cd nuxt-bulma-sass

and launch the project with: yarn run dev. (you can also use npm if you like it)

At this point we have our project running:

And if we open our browser on localhost:3000 we'll be getting this screen:

localhost:3000 pages/index.vue

So at this point we have the pages/index.vue on the screen, which is the first page to be rendered in your project by default.

Let's replace the content of this file by the following one:

If we inspect our page in the browser we see we got bulma installed because section is formatted according to it.

Easy peasy lemon squeezy.

Let's add a class and choose some colors:

What if we want to nest .hello-nuxt inside .edo-theme? We're going to need SASS to be able to do it.

2. Adding Sass

So, to add Sass to our project we'll need to stop our running app (Ctrl+c) and do the following:

yarn add node-sass sass-loader --dev

These are the two packages needed as dev-dependencies to be able to have Sass in our boilerplate.

Note that we're adding it as a dev dependency because we only need it while developing and at build time. After that Sass is transformed into CSS and we don't need it anymore.

Let's sneak peek my package.json for you to check it:

package.json with sass added to the project

Okay everyone ❤️, at this point we're able to nest the classes we wanted to.

Let's run our boilerplate again: yarn run dev and do the tweaks needed ?

Noice! We already did a lot today! Go grab a coffee ☕, I'll wait for you here ?

Okay, let's abstract things a bit and create this file ~/assets/scss/main.scss and put there some classes and variables:

new ~/assets/scss/main.scss

Nice! It's working!

Now we have two problems:

1. We need to import main.scss into each one of our pages/components, which is not nice. We want to import it only once and have it available in all our

KAMEHAMEHAAAA ?

Free Course: Level Up ? With Bulma CSS

The best CSS framework since Bootstrap

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

_The OG Bulma. [→](http://dragonball.wikia.com/wiki/Bulma" rel="noopener" target="blank" title=")

Meet Bulma CSS! Free course ? here

Apart from being the second longest-standing character in Dragon Ball Z, Bulma is a modern CSS framework based on Flexbox from Jeremy Thomas @jgthms. And Bulma is gaining adoption fast with 150K+ downloads a month and 26K+ stars on GitHub. OK…tell me more. ?

With Bulma, we can create beautiful and responsive websites with ease. Jeremy designed Bulma as a reusable set of Sass patterns to kickstart new projects. Don’t know Sass? Sass compiles to CSS. And once Flexbox became standardized, Jeremy used it to power what we now know as Bulma.

In this article, I detail how Bulma works and what we can build with it.

_Want to learn how to build this 3D graphic? [Let me know!](http://bit.do/subscribe-d82dcb4b980a" rel="noopener" target="blank" title=")

I also taught Bulma CSS on Scrimba, where we build these websites. It’s free — click here to enroll! ?

Scrimba.com is a platform for front-end development, where websites are recorded as events — not videos — and can be edited. ?

How does Bulma work?

Bulma is 4.5K lines of Sass and 9.5K lines when compiled to CSS. What in the heck is all this code doing?! Bulma addresses 90% of common website patterns, like columns, forms, components, modifiers, layouts, and elements. The code is also responsive and can be further themed and customized.

Bulma doesn’t solve all problems, but can be far more productive than hand-coding Sass or CSS. And because Bulma compiles to CSS, it’s adaptable to JavaScript frameworks and libraries like Angular, React, and Vue. In short, Bulma works like Bootstrap but without JavaScript.

Unlike Bootstrap, Bulma relies on CSS — not JavaScript. But like Bootstrap, ships with its own CSS Reset. Now, let’s walk through how Bulma works from first principles. I’m assuming you’re familiar with HTML/CSS but no more, thus this is what classic CSS looks like:

Note: While this isn’t Bulma, it does demonstrate how Bulma works.

<!DOCTYPE html><html>  <head>    …    <style>

p {  line-height: 2;}

    </style>  </head>  <body>    <p>      A long time ago in a galaxy far far away…    </p>  </body></html>

Here we defined a p in our HTML, and in our CSS defined all p’s as having double-spaced lines, for example line-height: 2. Wait — what if we don’t want all ps to be double-spaced? Or what if we want some but not all to be double-spaced? Then we can instead opt-in to CSS using classes:

<!DOCTYPE html><html>  <head>    …    <style>

.double-spaced {  line-height: 2;}

    </style>  </head>  <body>    <p class="double-spaced">      A long time ago in a galaxy far far away…    </p>  </body></html>

So we defined a class named double-spaced that we opt into versus having elements inherit CSS, like in the first example. And this is more sensible because it makes it harder for us to later overwrite our CSS. Still, we can go even further to make it harder, and we can make our class conditional:

<!DOCTYPE html><html>  <head>    …    <style>

p.double-spaced {  line-height: 2;}

    </style>  </head>  <body>    <p class="double-spaced">      A long time ago in a galaxy far far away…    </p>  </body></html>

And now double-spaced requires the presence of a p element. This is conditional CSS, and we can go even further! We can use just classes, for example class-1.class-2 to create conditional classes. This is one of the techniques Bulma uses to create HTML/CSS contracts.

AHEM Are we just writing CSS in our HTML now…?

(ง •̀_•́)ง

The difference here is that Bulma emphasizes common patterns using semantics — not one-to-one CSS rules. This means we use Bulma to describe relationships — not rules — and therefore is more powerful. Also, Bulma’s new documentation is amazing and takes a lot of the guesswork out of CSS.

In addition to conditional classes, Bulma defines plentiful HTML/CSS contracts, which leads to more flexible CSS and more idiomatic code. And this is great for sharing code across teams. These contracts detail the relationship of classes to one another. Here’s a simple example of an HTML/CSS contract:

<section class="section">  <div class="container">    ...  </div></section>

Given enough well-designed classes and contracts, we can create all kinds of beautiful and responsive websites backed with Bulma. Check out the expo! ⭐️ Now, before we get ahead of ourselves, let’s start with a “Hello World” and then the following slide — that’s no slide, it’s a website.

Click either one to open in Scrimba’s interactive playground. ?

And in the near future, I’ll be releasing two ✌️ more articles detailing how we can build a beautiful blog and a Tesla launch page with Bulma! For updates, Follow me on Medium ✍️ and Twitter. ? I do, however, teach these in the free interactive Scrimba course. Click here to enroll for free! ?

And without further ado…

“Hello World”

A little zoomed in. ? Click to open in Scrimba’s interactive playground. ?

Now that we understand how Bulma works, let’s learn how to “Hello World”:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta        name="viewport" content="width=device-width,        initial-scale=1">    <title>Hello Bulma!</title>    <link rel="stylesheet" href="https://…/bulma.min.css">    <script defer src="https://…/all.js"></script>  </head>  <body>    <section class="section">      <div class="container">        <h1 class="title">          Hello World        </h1>        <p class="subtitle">          My first website with <strong>Bulma</strong>!        </p>      </div>    </section>  </body></html>

Come back — don’t be scared! ? All Bulma websites start from this template. Let’s focus on the head element first; the link pointing to bulma.min.css loads Bulma, and the script pointing to all.js loads Font Awesome icons. Note: Bulma supports all icon font libraries.

And Bulma prefers to use HTML5 elements, for example section versus div where appropriate. It’s more readable and idiomatic. Wait — what if the client’s browser is outdated and thus doesn’t acknowledge HTML5 elements? Bulma takes care of that, too!

/* bulma.css#L312 */

article,aside,figure,footer,header,hgroup,section {  display: block;}

Thanks Bulma! ?‍ This guarantees that HTML5 elements are rendered as block elements despite the client’s browser. OK — let’s review the body:

<section class="section">  <div class="container">    <h1 class="title">      Hello World    </h1>    <;p class="subtitle">      My first website with <strong>Bulma<;/strong>!    </p>  </div></section>

When I first learned Bulma, I (╯°□°）╯︵ ┻━┻ because it’s so terse. But once I calmed down, I began to recognize an emergent pattern: the shape of our website’s tree. And it’s much simpler than I thought:

   .section       |  .container     /   \.title  .subtitle   /       \ ...       ...

Ahhhh. Where .section defines the start of new content, .container is a wrapper class for content (like text) and is used for responsive design. And .title and .subtitle are for aesthetics. Having done so, Bulma took care of dozens of details like best practices and responsive design. ??

Beyond “Hello World” ?

Click to open in Scrimba’s interactive playground. ?

Think of Bulma as lego pieces with modifiers, like color variants. And so, composing this website requires just a few pieces and modifiers, such as .columns, .media, .icon — that’s it. Though the code is more complex, that’s because it’s code. The composition of the website is what’s simple:

         .column            |         .media          /   \.media-left  .media-content        /       \    .icon      .content      /           \    ...           ...

The above is what one Bulma column looks like as a tree. And in code:

…<div class="column">  <article class="media notification is-info">    <figure class="media-left">      <span class="icon is-medium">        <i class="fab fa-2x fa-css3-alt"></i>      </span>    </figure>    <div class="media-content">      <div class="content">        <h1 class="title is-size-4">          Bulma        </h1>        <p class="is-size-5">          <strong>Bulma</strong> is a modern CSS framework...        </p>      </div>    </div>  </article></div>…

Note: Modifiers such as .notification, .is-info, .is-medium, and so on help personalize our website. Some modifiers are conditional and require another class, and some are general-use. You can learn more about them here. And for an interactive playground of the complete website, click here. ?

Click to open in Scrimba’s interactive playground. ?

Bulma is fascinating! We can design beautiful and responsive websites using semantics — without writing CSS.

Final thoughts ?

The thing I love most about Bulma is that it’s a means to understand how its creator thinks without having to ask him. How do I do X? Look it up! This is a powerful idea — that we can look into a CSS guru’s mind for answers, rather than hack unideal solutions ourselves.

Thanks for reading! I was hesitant to learn Bulma at first, but then came to appreciate how powerful and idiomatic it can be. So I decided that Bulma shouldn’t go unnoticed, because designing and developing websites can often be much harder than anticipated. Again — thanks for reading! ???

Like this? There’s two more — click here and here!

_Want to learn how to build this 3D graphic? [Let me know!](http://bit.do/subscribe-d82dcb4b980a" rel="noopener" target="blank" title=")

Consider supporting jgthms on Patreon! He’s determined to make Bulma his livelihood and full-time commitment. ?‍?

I recently decided to try out a CSS framework. As a journalist, I’ve been taught to work from the ground up, do things thoroughly, and never “borrow” stuff from others (in the news industry, that’s considered plagiarism). Therefore I’ve been kind of reluctant to use frameworks since starting my coding journey. Simply because I felt that it would be like cheating, if you know what I mean.

I couldn’t have been more wrong.

First things first. After experimenting a little bit on my own with video as fullscreen background — a very fun and interesting challenge, by the way — I wanted more actual content to work with before diving head first into Bulma, a modern framework based on Flexbox created by Jeremy Thomas.

That’s why I eventually decided not to experiment with Bulma on my May The Code website.

Instead, I chose to redesign a website I created for my now defunct Swedish rock band Evangeliet (we’ve been on a hiatus since 2014).

In this story, I will tell you why I felt bullied by PHP, how I failed and failed again despite reading through the documentation over and over, and what I finally learned by screwing everything up.

The New Front Page

I had already implemented a first iteration of a front page with fullscreen video as background and a simple nav bar, so the first thing I did was to replace my somewhat ugly navigation bar with a Bulma navigation.

Adding the nav wasn’t particularly hard. At least not after reading the documentation a bunch of times. But the fullscreen video as background was a bit trickier. After some fruitless experimentations with different Bulma layout elements, such as .hero and .container is-fluid, I created a custom CSS to handle the fullscreen background:

My custom CSS.

It worked! At least on desktop. As soon as I grabbed my phone to check it out on a smaller viewport, I quickly found out that I had been brutally punished by my outdated desktop-first approach:

The GIF image I made didn’t override the video on mobile.

And as you can see, I accidentally put the nav bar and the fullscreen background video in separate sections in the HTML document, resulting in the former being detached from the latter.

I was nevertheless motivated to move forward, so I left it the way it was for the time being.

The Audio Page

Next, I wanted to create a neat audio page. The page itself is pretty straightforward: it’s composed of three album “blocks” with Spotify lists. First, I created a fluid container with an image:

<div class="container is-fluid">  <figure class="image">    <img src="/smoke.jpeg" alt="Evangeliet">  </figure></div>

Then, I scanned the Bulma documentation in the hopes of finding a component that would fit my need. I eventually settled on a card:

<div class="card">          <div class="card-image">            <figure class="image is-square">              <img src="/Konturen.jpeg" alt="Konturen av en dröm">            </figure>          </div>          <div class="card-content">            <div class="media">              <div class="media-left">              </div>              <div class="media-content">                <p class="title is-4">Konturen av en dröm</p>                <p class="subtitle is-6">2013</p>              </div>            </div>

I then nestled a .card-content class inside the card component:

<div class="content">              <iframe src="https://open.spotify.com/embed?uri=spotify:album:2bXUzHUmEZpXpTc6mNbQgH&theme=white" width="100%" height="380" frameborder="0" allowtransparency="true"></iframe>              <br>              <small><strong>UPC:</strong> 0885014300335</small>              <small><strong>Catalog Number:</strong> RU 27130</small>              <br>              <small><strong>Release date:</strong> 18 Dec 2013</small>            </div>          </div>        </div>

To get a nice Spotify player, I fetched an embed code from the Spotify Developer docs. (I changed the width from 300px to 100%, and the theme from default black to white, which suits my design better.)

I created three cards, added some album info, and bundled them with column elements. The result was pleasing:

The Image Grid

After that, I wanted to create some sort of page containing pictures of the band. I wanted something more challenging than a standard “band member biographies” page, which wouldn’t have differed all that much from the audio page.

I scanned the documentation once again and decided to do something with the tiles element. This element is

“[a] single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids.”

I read and contemplated the docs over and over, and reached a conclusion: since I still consider myself a markup beginner, I needed to do some hands-on experimentation in order to wrap my head around the Bulma tiles. Because reading… well, it didn’t get me anywhere.

So I basically copy-pasted one of the examples from the docs and altered the content. I flipped stuff around, effectively breaking everything. Learning by screwing up, right? :)

After messing around with the different classes, I opted for a 3 column grid structure, composed of various tile elements. Here’s an example of the markup:

<div class="tile is-ancestor">        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="/bilder/molotov.jpg">              <figcaption>                Henrik lägger mjuka riff i <strong>Molotov Studios</strong> 2010. Inspelningen rattades av Martin Karlsson.              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <p class="title">Stadsmissionen&lt;/p>            <p class="subtitle">2009</p>            <figure>              <img src="/bilder/duo.jpg">              <figcaption>                På den här tiden var <strong>Evangeliet</strong> fortfarande en duo.                <br>                FOTO: Noelia Ivars Rico              </figcaption>            </figure>          </article>        </div>        <div class="tile is-parent">          <article class="tile is-child box">            <figure>              <img src="/bilder/bandbild2.jpg">              <figcaption>                Cristóbal, David, Henrik R och Henrik S i replokalen i Fruängen, januari 2011.              </figcaption>            </figure>          </article>        </div>      </div>

The example above is the three top images on the webpage. The structure of the tile boxes on the page are more or less the same as in the docs, except for the fact that I added images in all boxes except one. Also, I inserted column elements and added three images in one of the boxes.

Which required a bit of patience, given the fact that:

1. I still get dizzy quite easily by all the tags and end tags when nesting stuff, and
2. I wasn’t aware of the visual feature in Atom highlighting opening and closing HTML tags. ??‍

I could have gone for either of the different structures I tested during the experimental phase, but I considered the layout provided in the Bulma docs the best fit. Why fix something that isn’t broken?

And honestly, I like the fact that the mobile users see a few images before getting to the text chunk. That’s why I switched back to the current structure after initially mirroring the 2nd column and placing its five boxes in the top of the page, effectively positioning the tall vertical box in the top left corner on desktop.

The Contact Page

Last but not least, I wanted a contact page. With an email form and everything.

Again, the documentation provided everything I needed in terms of markup. A no-brainer. Fortunately, I had already tried to learn just a tiny bit of PHP with the sole purpose of creating an online form (for a different website though).

And I had failed. Hard.

I don’t know why other people seem to hate PHP, I guess it’s for various reasons. But I do know that personally, I dislike PHP because I felt bullied by it.

It felt like I’d tried everything. I read a bunch of blog posts and worked through the entire W3Schools tutorial. But I still didn’t grasp a fraction of PHP.

Anyway, during my short stint as a PHP marauder, I stumbled upon Formspree, an online form service created by Rohit Datta.

As I had previously used Formspree both on the May The Code website with great results, I knew that it would work for my band’s website as well.

I added the field and label classes needed, as well as the required form action=”https://formspree.io/xx@xx.se" method=”POST" class — and that was it!

After submitting the form and confirming my email, everything worked like a charm.

I fixed the size of the form on desktop with a few lines of CSS in my custom stylesheet, but not until way later. The form was up and running and I was happy.

What about the ??

Now I was left with just one challenge: how can I make the hamburger menu on mobile actually work? ?

The Bulma documentation provided markup only. The functionality itself was up to me to fix.

Since then, Jeremy has updated the docs and replaced the old nav component with the new navbar component. Here’s an example of the old one:

<!-- This "nav-toggle" hamburger menu is only visible on mobile -->  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->  <span class="nav-toggle">    <span></span>    <span></span>    <span></span>  </span>  <!-- This "nav-menu" is hidden on mobile -->  <!-- Add the modifier "is-active" to display it on mobile -->  <div class="nav-right nav-menu">    <a class="nav-item">      Home    </a>    <a class="nav-item">      Documentation    </a>    <a class="nav-item">      Blog    </a>

I’ve gained a lot of ground in the few months, but I’m not yet comfortable enough with HTML and CSS to make the leap to real programming, so I really wanted to make this work without diving into the vast sea of JavaScript.

I had no idea how.

That’s why I opted for a horizontal menu bar all the way down to the smallest viewports, after what felt like hours of investigations. All I needed to do was add the is-mobile modifier to the nav-item class:

<nav class="nav has-shadow">    <div class="container">      <div class="nav-left">        <a class="nav-item is-tab is-mobile" href="/">Hem</a>        <a class="nav-item is-tab is-mobile" href="/musik">Musik</a>        &lt;a class="nav-item is-tab is-mobile" href="/bandet">Bandet</a>        <a class="nav-item is-tab is-mobile is-active" href="/kontakt">Kontakt</a>      </div>  </nav>

I could do this because my menu consisted of just four components: front page, audio page, band page, and contact page. Because of this, everything was visible — and accessible — even in smaller viewports.

A week or so later, I stumbled upon this great thread on GitHub. The user rudedogg had the exact same problem as I did. Many different solutions are provided in the thread, such as

Yeah you simply need a JS event to handle the click and “add” or “remove” the ‘.is-active’-class on ‘#nav-menu’.

and

React snippet (w/o jQuery) on an element with className="nav-toggle" onClick={() => { let toggle = document.querySelector(".nav-toggle"); let menu = document.querySelector(".nav-menu"); toggle.classList.toggle("is-active"); menu.classList.toggle("is-active"); }}

Nothing seemed to completely fill my need. Until I scrolled down and found this incredibly humble, short, and brilliant comment by shaneturner:

A bit more succinct on the nav item itself: <span class="nav-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('is-active');">

I’m in no position to determine if this is the best solution, neither if it’s actually better than any other suggestion in the GitHub thread. But I tried it out and it worked immediately, right out of the box.

_Photo by [Unsplash](https://unsplash.com/@mkwlsn?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" rel="noopener" target="_blank" title="">Mike Wilson on <a href="https://unsplash.com/photos/vAqmcvSMWMU" rel="noopener" target="blank" title=").

Iterations

I was done. Mission complete.

It felt so good! Not only had I been able to build an entire website using Bulma — I had also learned a great deal about HTML and CSS scanning through the documentation and experimenting with the different elements.

What had first felt like a mountain to climb turned into a medium-sized hill, and here I was standing at the top.

I wasn’t fully satisfied though. Now I knew how to use Bulma to build a website, but the website I’d built wasn’t anyway near perfect. Next, I wanted to climb the next hill, the higher one, and come just a little bit closer to perfection. In other words: using Bulma to build a website I’m actually proud of.

And I did.

But that’s another story.

Henrik Ståhl is a journalist with more than 15 years of experience, recently turned Product Owner at Bonnier News, working with the digital development of Dagens industri and Dagens Nyheter. In his spare time, he’s trying to learn programming.