Preface
Goal: Using Bulma for the first time
1: Layout
No. We do not use Bulma yet. We need to talk about something more fundamental.
The Document: HTML Skeleton
This tutorial use header
, main
, and footer
.
There is html5 semantic tag for this.
But this could be as simple as html element below.
-
- tutor-01/11-html-layout.html
- gitlab.com/…/11-html-layout.html.
<html>
<head>
<title>Letters to my Bulma</title>
</head>
<body>
<!-- header -->
<p><i>My one, and only dream,</i></p>
<br/>
<!-- main -->
<div id="content">
<p>There are so many things to say
to Bulma, Chici, and that Android 18.
I don't want to live in regrets.
So I wrote this for my love.</p>
</div>
<!-- footer -->
<br/>
<p><i>Wishful thinking.</i></p>
</body>
</html>
Open this html artefact in any browser, using your favorite file manager. And have a look at the result.
2: Loading CSS
There are some alternative to load CSS.
For this tutorial. I suggest to use local CSS. Because we are going to make a custom Bulma CSS
Using CDN Bulma CSS
It is as simple as
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
-
- tutor-01/12-head-cdn.html
- gitlab.com/…/12-head-cdn.html.
Directory Preparation
Now consider create directory for respective assets:
- css
We only need css
directory for the rest of this chapter.
But later we need other directory as well such as images
, js
, and sass
.
Using Local Bulma CSS
You need to download bulma.css
first from the official site.
And put the artefact to css
directory.
<link rel="stylesheet" type="text/css" href="css/bulma.css">
-
- tutor-01/13-head-local.html
- gitlab.com/…/13-head-local.html.
And the bulma.css
is here:
-
- tutor-01/css/bulma.css
- gitlab.com/…/css/bulma.css.
Adding Meta
As the official guidance said.
We have to add a few tag on the head
.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Letters to my Bulma</title>
Bulma Example Class
We need to see if Bulma class work correctly.
Consider add this container
and box
class.
<!-- main -->
<main role="main" class="container">
<div class="box">
<p>There are so many things to say
to Bulma, Chici, and that Android 18.
I don't want to live in regrets.
So I wrote this for my love.</p>
</div>
</main>
The Preview
And have a look at the result by opening the file in Browser.
We should have white background by now, and also a box inside it.
3: Bulma: Example Class
Now consider having fun for while. And give more example class, and see what happened.
-
- tutor-01/14-hero.html
- gitlab.com/…/14-hero.html.
As Header
What lies on header part is up to you.
<!-- header -->
<header>
<div class="hero is-info">
<div class="hero-body">
<article class="container">
<p><i>My one, and only dream,</i></p>
</article>
</div>
</div>
</header>
<br/>
As Footer
What lies on footer part is also up to you.
<!-- footer -->
<br/>
<footer class="footer">
<div class="content has-text-centered">
<p><i>Wishful thinking.</i></p>
</div>
</footer>
Screenshot
And have fun with the result. Consider open the file in Browser form file manager.
4: Bulma: Navbar Class
For the rest of this show case,
I’m using navbar for both header
and footer
.
-
- tutor-01/15-navbar.html
- gitlab.com/…/15-navbar.html.
As Header
Navbar lies on header part.
<!-- header -->
<nav class="navbar is-fixed-top is-dark">
<div class="navbar-brand">
<a class="navbar-item">
Home
</a>
</div>
</nav>
As Footer
Navbar also lies on footer part.
<!-- footer -->
<footer class="navbar is-fixed-bottom
is-dark has-text-centered is-vcentered">
<div class="column">
© 2019.
</div>
</footer>
Additional CSS
To have proper layout, this navbar require additional CSS.
-
- tutor-01/css/main.css
- gitlab.com/…/css/main.css.
.layout-base {
padding-top: 5rem;
padding-bottom: 5rem;
}
You should define styles
on <head>
element.
<link rel="stylesheet" type="text/css" href="css/bulma.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
Screenshot
And have fun with the result. Consider open the file in Browser form file manager.
Fix Navbar
Notice that Bulma has these navbar class to handle padding
-
has-navbar-fixed-top
or, -
has-navbar-fixed-bottom
We can choose to use those navbar class above, or simply ignore it for more flexibility while using custom CSS.
5: Summary
As a summary from this chapter, all the html element is as shown below.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Letters to my Bulma</title>
<link rel="stylesheet" type="text/css" href="css/bulma.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- header -->
<nav class="navbar is-fixed-top is-dark">
<div class="navbar-brand">
<a class="navbar-item">
Home
</a>
</div>
</nav>
<!-- main -->
<div class="layout-base">
<main role="main" class="container">
<div class="box">
<p>There are so many things to say
to Bulma, Chici, and that Android 18.
I don't want to live in regrets.
So I wrote this for my love.</p>
</div>
</main>
</div>
<!-- footer -->
<footer class="navbar is-fixed-bottom
is-dark has-text-centered is-vcentered">
<div class="column">
© 2019.
</div>
</footer>
</body>
</html>
What is Next ?
There are, some interesting topic about Navigation Bar in Bulma. Consider continue reading [ Bulma - Navigation Bar ].
Thank you for reading.