Preface
This article series is successor of previous bulma article series.
Goal: A Bulma Material Design Experiment.
After using Bulma for a while, I decide to add custom classes for my tailor made flat theme.
Previous Article
This Bulma MD article series start from Step-04. Step-01 until step-03 contain Bulma preparation. You can read those article here:
In fact, you should read this first, before you continue with step-04 and after.
Repository
Tools
Opening Example in Browser
You can open the html
file artefact directly from your file manager
,
or alternatively setup simple web server example such as browsersync
,
and enjoy the localhost:3000
.
Table of Content
The table content is available as header on each tutorial. There, I present a Bootstrap Tutorial, step by step, for beginners.
Begin The Guidance
Material Design start from Step-04. Step-01 until step-03 contain Bulma preparation.
Step 01
Adding Bulma CSS
-
Without Bulma
-
Using CDN
-
Using Local
Step 02
Using Bulma CSS: Navigation Bar
-
Simple
-
Full Featured
-
With jQuery
-
With Vue JS
-
Adding Font Awesome
Step 03
Bulma Custom SASS
-
Custom maximum width class
-
Responsive gap using custom sass
Step 04
Material Design
-
Material Color Demo
-
Spacing Helper Demo
Step 05
HTML Box using Material Design
- Main Blog and Aside Widget
Step 06
Finishing
- Blog Post Example
Repository
Have fun, and enjoy coding.
Thank you for cloning the repository.
Begin The Guidance
Let’s get the tutorial started.
Consider continue reading [ Bulma MD - Helper ].
Thank you for reading.