Stantzouris Thanos Industrial Engineer & Web Developer

Hey Duthcode, I am so glad you are here! 

I woke up today at 10 in the morning just to witness the rainiest of days. We all know that, in general, when it rains we are kinda underproductive, I know I am! It's because of the lifeless environment that surrounds me, I mean, that's the way it feels being greek and all. 

So I decided to sit down and share a bit of cool code with you all, instead of doing my job! hehe... 

Ok, to the point. I have been creating websites for a while now (Front-End and Back-End), and for some reason, the majority of my clientele are restaurants, barbershops and other small businesses like these that require a menu section on their websites, which is absolutely understandable.

In this blog post, I will be sharing with you a cool way to create the following menu that I coded for a local neighborhood barbershop. 

Custom Responsive Menu using Bulma CSS Framework

Are you in a hurry? Do you have to create a restaurant menu ASAP? Clone the repo at the end of this Article.
 

To achieve this FULLY RESPONSIVE beauty I used a CSS framework called Bulma.  Bulma was love at first sight, there is a simplistic and minimalistic design on any of its components that when used correctly can produce a real eye candy result. The best part is, that Bulma's Documentation is nearly perfect. Oh yes, did I mention that you only need 1 CSS file to use Bulma? 

 

Bulma one link CDN

 

By using only this link you now have full access to the entirely free and open-source Bulma CSS Framework.

Let's create. 

Grab Bulma's starter template and create a new project named bulma_menu. Paste the starter template code on your index.html and you are set. 

Now, let's call our HERO!!!

Deku from Boku no hero academia

 

NOT YOU DEKU! FOR GOD'S SAKE!!!!

Sorry for that guys... Back to code! 

Bulma code for main banner

 

As you see there are a lot of heroic things going on in this junk of code. Well, in Bulma, Hero is a component that allows you to add a full-width banner to your webpage, which can optionally cover the full height of the page as well. Isn't that awesome? Here is the output. 

 

Main banner of Bulma Project

 

So far so good and a good intro to Bulma. But it's time to start building with columns

Columns in Bulma are what cols are in Bootstrap, a simple way to build responsive layouts. 

The main structure of columns is: 

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

 

and furthermore, you can give them any size you want with these very cool Bulma helper classes.

To achieve the menu structure I used though, we need a simple but quite complex combination of the columns > column classes nested to each other. In simple words, I made a columns class which is like a bootstrap row class inside a container class, then I divide it by two with the use of column is-half classes. Now, every half column it's divided it by three for the

  • #1 Menu Item
  • #2 the Dashes 
  • #3 The Price Tag

and so on giving the following result. 

Structure of a Bulma Menu

To be honest I needed some extra Bulma Classes to create this colorful extravaganza. 

<div class="container">
            <div class="columns has-pb-2">
                <div class="column is-half">
                    <p style="padding: 10px 0; border-radius: 5px;" class="has-background-primary has-text-centered"><code>First Column</code></p>
                    <div class="columns is-multiline is-mobile">
                        <div class="column is-narrow">
                            <p style="padding: 10px 0; border-radius: 5px;" class="has-background-info">First Menu Item</p>
                        </div>
                        <div style="border-bottom:1px dashed #636166;" class="column"></div>
                        <div class="column is-narrow">
                            <p style="padding: 10px 0; border-radius: 5px;" class="has-background-warning">Price tag</p>
                        </div>
                    </div>
                </div>
                <div class="column is-half">
                    <p style="padding: 10px 0; border-radius: 5px;" class="has-background-primary has-text-centered"><code>Second Column</code></p>
                    <div class="columns is-multiline is-mobile">
                        <div class="column is-narrow">
                            <p style="padding: 10px 0; border-radius: 5px;" class="has-background-info">Second Menu Item</p>
                        </div>
                        <div style="border-bottom:1px dashed #636166;" class="column"></div>
                        <div class="column is-narrow">
                            <p style="padding: 10px 0; border-radius: 5px;" class="has-background-warning">Price tag</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

What a flamboyant beast... I am in awe...

As you barely see I used a bunch of not mentioned classes like is-multiline, is-mobile, is-narrow, and has-background-primary, well I did write that Bulma has nearly perfect documentation, didn't I? So Google is your buddy.
Note: (Ko-Fi blurs my images, apologies for that, the code will be given in the end with a GitHub link)

Another Note: You maybe hate me for posting images with code instead of the code itself but if this was a video you would still not be able to copy code HA!!! And also you would have to stop the video to see the code! Your welcome guys. Also, Ko-Fi WYSIWYG Editor doesn't give a choice for code junks.

That was it! By duplicating the above code you will create the structure of a perfect menu for all your websites! :)  

Get your hands on the Code by cloning the following GitHub repo:

-->https://github.com/athanstan/bulma_menu.git 

 

Thank you for reading my mates! I wish you all the best and I hope that you will love Bulma as much as I did! See you at the next Post! 
Also, take a look or even follow me on my Ko-Fi page for more content! Cheers!!!


That's my favorite pokemon : Bulbasaur

If you caught the reference you are my friend!!!

Thank you very much for reading through and stay tuned for more coding articles and tutorials!

You can show your support by liking our Facebook Page !

Thanks again! Have a lovely day... Or night!