Preface
Goal: Make custom class based on Bulma class.
1: Prepare
The Sylesheet: Brand Color
As a summary, I change the color, and put brand color, for theming. But we won’t use brand color yet, but we are going to use this brand color, s preparation for the rest of the show case.
-
- tutor-04/sass/css-41/_initial-variables.sass.
- gitlab.com/…/sass/css-41/_initial-variables.sass
// Initial Variables
$brand-red: #802020
$dark: $brand-red
$navbar-breakpoint: 769px
The primary colour has been restored. Now we don’t have pink as primary colour anymore.
2: Decoration
My first impression of Bulma is the lack of helper, such as hover on shadow, border, rounded corner, and such stuff. Or things are hardcoded in Bulma class, and other stuff I cannot get rid of.
But this give me better idea, to use css class instead of, styling on html using a lot of class. Now I ended up with a more consistent web looks, becuase all it takes is just one pack of additional class.
Looks like this easy to custom, is the power of Bulma.
Bulma Box Original Class
Consider have a look at this original Bulma box:
-
- tutor-04/sass/vendors/bulma/elements/box.sass
- gitlab.com/…/sass/vendors/bulma/elements/box.sass
$box-color: $text !default
$box-background-color: $white !default
$box-radius: $radius-large !default
$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link !default
.box
@extend %block
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box-color
display: block
padding: $box-padding
a.box
&:hover,
&:focus
box-shadow: $box-link-hover-shadow
&:active
box-shadow: $box-link-active-shadow
Custom Box Class
Consider have a look at this altered Bulma box:
-
- tutor-04/sass/css-41/_box-decoration.sass.
- gitlab.com/…/sass/css-41/_box-decoration.sass.
/* copy-paste from box.sass */
$box-color: $text !default
/* decoration : border, shadow, rounded */
$deco-radius: 10px
.box-deco
border-radius: $deco-radius
color: $box-color
display: block
a.box-deco
&:hover,
&:focus,
&:active
box-shadow: 0 1rem 3rem rgba($black, .175)
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
.box-deco
border: 1px solid darken($light, 10%)
.box-deco
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
&:hover,
&:focus
box-shadow: 0 1rem 3rem rgba($black, .175)
border: 1px solid darken($light, 20%)
And do not forget to add the sass artefact in main
:
- tutor-04/css/main.sass
@import "initial-variables"
@import "vendors/bulma/utilities/initial-variables"
@import "vendors/bulma/utilities/functions"
@import "vendors/bulma/utilities/derived-variables"
@import "vendors/bulma/utilities/mixins"
@import "layout"
@import "decoration"
@import "box-decoration"
We also need functions.sass
in order this box decoration to works.
Header and Footer
Still in the same artefact we can class for header and footer.
- tutor-04/css/_box_decoration.sass
/* copy-paste from box.sass */
$box-color: $text !default
/* decoration : border, shadow, rounded */
$deco-radius: 10px
.header-deco,
.footer-deco
border: 1px solid $dark
.header-deco,
.footer-deco
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
&:hover,
&:focus
box-shadow: 0 1rem 3rem rgba($black, .175)
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
.header-deco
border-bottom-left-radius: $deco-radius
border-bottom-right-radius: $deco-radius
.footer-deco
border-top-left-radius: $deco-radius
border-top-right-radius: $deco-radius
.blog-item
border-bottom: 1px solid $dark
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)
padding: 10px
&:hover,
&:focus
box-shadow: 0 1rem 3rem rgba($black, .175)
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
The Document: Example Page
Now add this box decoration to each element, with the complete code as below:
-
- tutor-04/41-decoration.html
- gitlab.com/…/41-decoration.html.
<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/fontawesome.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- header -->
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-white maxwidth header-deco"
id="navbar-vue-app">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="images/logo-gear.png" alt="Home" />
</a>
<a class="navbar-item">
Blog
</a>
</div>
<div id="navbarBulma" class="navbar-menu">
<div class="navbar-start">
</div>
<div class="navbar-end">
</div>
</div>
</nav>
<!-- main -->
<div class="layout-base maxwidth">
<main role="main"
class="column is-full box-deco has-background-white">
<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>
</main>
</div>
<!-- footer -->
<footer class="site-footer">
<div class="navbar is-fixed-bottom maxwidth
is-white has-text-centered is-vcentered footer-deco">
<div class="column">
© 2019.
</div>
</div>
</footer>
</body>
</html>
We can expect the page in the browser to show as this figure below:
Now we can have our custom class with behaviour that we need.
3: Navigation Bar
Sometimes, make custom class is not the best choice. I once had an issue with navigation bar, while putting dropdown on small screen. After a while, I realize that this is a responsive issue. Finally I ended up with altering the internal Bulma.
Bulma Navigation Bar Original Class
Consider have a look at this original Bulma navigation bar:
-
- tutor-04/sass/vendors/bulma/components/navbar.sass
- gitlab.com/…/sass/vendors/bulma/components/navbar.sass
...
+until($navbar-breakpoint)
.navbar > .container
display: block
.navbar-brand,
....
+from($navbar-breakpoint)
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
...
.navbar-item
display: flex
...
...
.navbar-dropdown
...
...
The Document: Example Code
And if I put dropdown element navigation bar as below:
-
- tutor-04/42-navbar.html
- gitlab.com/…/42-navbar.html.
<!-- header -->
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-white maxwidth header-deco"
id="navbar-vue-app">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="images/logo-gear.png" alt="Home" />
</a>
<a class="navbar-item">
Blog
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Archives
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
<span class="fa fa-tags"></span> By Tags
</a>
<a class="navbar-item">
<span class="fa fa-folder"></span> By Category
</a>
<hr class="navbar-divider">
<a class="navbar-item">
<span class="fa fa-calendar"></span> By Date
</a>
</div>
</div>
<a role="button" class="navbar-burger burger"
aria-label="menu" aria-expanded="false" data-target="navbarBulma"
@click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBulma" class="navbar-menu"
v-bind:class="{'is-active': isOpen}">
<div class="navbar-start">
<a class="navbar-item">
About
</a>
</div>
<div class="navbar-end">
<form class="is-marginless" action="/pages/search/" method="get">
<div class="navbar-item">
<input class="" type="text" name="q"
placeholder="Search..." aria-label="Search">
<button class="button is-light"
type="submit">Search</button>
</div>
</form>
</div>
</div>
</nav>
This will show undesired result in 480px;
screen.
Altered Navigation Bar Class: Bulma 7.x
The point of that sass
below is,
changing the responsive by using +from(0)
for only the needed behaviour.
Consider have a look at this altered Bulma navigation bar:
-
- tutor-04/sass/vendors/bulma/components/navbar-altered.sass
- gitlab.com/…/sass/vendors/bulma/components/navbar-altered.sass
+until($navbar-breakpoint)
.navbar > .container
display: block
.navbar-brand,
....
+from($navbar-breakpoint)
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
....
+from($navbar-breakpoint)
.navbar-item
&.has-dropdown
align-items: stretch
+from(0)
.navbar-item
display: flex
...
.navbar-dropdown
...
Do not forget to change the source import
of the altered sass
.
- tutor-04/sass/vendors/bulma/components/_all.sass
@charset "utf-8"
...
@import "navbar-altered.sass"
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"
This will show desired result in 480px;
screen.
Now it fixed. Done!
Altered Navigation Bar Class: Bulma 8.x
Bulma 8.0 has been released. And I have to update this article.
+from($navbar-breakpoint)
.navbar,
.navbar-menu,
.navbar-start,
.navbar-end
align-items: stretch
display: flex
.navbar
min-height: $navbar-height
...
.navbar-link
...
// Move this: .navbar-item
.navbar-menu
...
.navbar-end
...
// Move this: .navbar-dropdown
.navbar-divider
...
+from($navbar-breakpoint)
.navbar-item
&.has-dropdown
align-items: stretch
+from(0)
.navbar-item
// &.has-dropdown
// align-items: stretch
&.has-dropdown-up
...
...
.navbar-dropdown
...
The changes in 8.x is more complex than in 7.x.
What is Next ?
More SASS customization is our next topic. Mostly about layout, a little spacing trick to enhance responsive experience. Consider continue reading [ Bulma SASS - Layout ].
Thank you for reading.