Creating a simple landing page with navbar using Bulma
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:
- To start off with the basics, I’ve gone ahead in centering the entire document using
text-align:centerwithin the body section in CSS.
- 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.
- Adding the
navbar-brandlogo requires a bit of nesting. Not to mention that within the
navbargroup, I’ve also included the
spantag where I’m declaring the
navbar-burger burgerand 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.
- I chose a simple picture from Unsplash and made the edges of the picture rounded, along with adding a box shadow effect.
- No additional formatting for the
h2tags is needed since I’m utilizing the title and subtitle classes that were predefined by Bulma.
- 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.