DEV Community

loading...
Cover image for Creating a simple landing page with navbar using Bulma

Creating a simple landing page with navbar using Bulma

redlotusdesignz profile image Diana Chin ・3 min read

What is Bulma?

According to their official website, Bulma is a free, open-source CSS framework based on Flexbox and used by more than 200,000 developers.

Why use Bulma?

If you’ve been using Bootstrap for a while and wanted something lightweight, Bulma is a great choice that provides easy to read syntax when adding the classes. It’s not bloated with features compared to Bootstrap. With Bulma, the intention behind the framework is designed to be mobile-first. The documentation on their website provides examples of code and explanations on creating a website with Bulma.

Here is an example of the syntax when creating a stylized button:

<button class=“button is-success”>Success</button>

With the given code, it will end up creating a button using the success style (in this case, it’s green) with white text and has a hover state to show a slightly darker version of the button style.

While you can customize Bulma’s theme using your own Sass setup - for the purpose of this post, I’ll be using the predefined styles from the Bulma CSS file.

Here’s my CodePen to view the entire landing page I’ve created:

As you can tell by now, I love cows. So why not make a fun landing page on promoting a startup company in helping cows find love? I know, super cheesy.

My thought process when creating the landing page:

  1. To start off with the basics, I’ve gone ahead in centering the entire document using text-align:center within the body section in CSS.
  2. To ensure that I maximized the entire screen, I added the following code: <section class=“hero is-success is-fullheight is-bold”>. By adding this line, you’re making the entire page set to full height with the success (green) background color with a slight dark gradient.
  3. Adding the navbar-brand logo requires a bit of nesting. Not to mention that within the navbar group, I’ve also included the span tag where I’m declaring the navbar-burger burger and indicated the data target to point to the div section where it houses the links. When viewing it on the desktop, you’ll be able to see the hover effect, which is slightly darker and adds a nice contrast against the background.
  4. One caveat of using Bulma - Javascript / JQuery is not built into the framework (as it is seen with Bootstrap). To make the drop-down effect appear when the user clicks on the hamburger icon, I opted to have the vanilla Javascript included on the CodePen. This was provided by Bulma, which you can view here.
  5. I chose a simple picture from Unsplash and made the edges of the picture rounded, along with adding a box shadow effect.
  6. No additional formatting for the h1 and h2 tags is needed since I’m utilizing the title and subtitle classes that were predefined by Bulma.
  7. Finally, I added a button that is the lighter version of the success button. It’s a nice contrast against the green gradient background that was defined earlier. 


If you happen to like this post, feel free to share! For more updates on my web development journey, be sure to follow me at Twitter.

Discussion (4)

pic
Editor guide
Collapse
waylonwalker profile image
Waylon Walker

Thanks for sharing your thought process, I used bootstrap a long time ago. It's cool to see the comparison.

Collapse
redlotusdesignz profile image
Diana Chin Author

Thanks, Waylon! Bootstrap (for now) is still my go-to CSS framework, especially if I'm planning to work on more intricate websites. But Bulma has some pretty good advantages in terms of the loading time and the clean UI setup.

Collapse
ethantoney profile image
Ethan Toney

My side project was built using Bulma: Project Matcher
Bulma is a pretty good framework. Fun too!

Do you plan on using Bulma more often or are you sticking to Bootstrap?

Collapse
redlotusdesignz profile image
Diana Chin Author

I love your project, Ethan! Looks really neat :) I think for more business based / apps websites, I'll go with Bulma. I still use Bootstrap for my projects. I'm continuing to explore other CSS frameworks and see what advantages/disadvantages they have when building out websites.