Preface
Goal: Custom sass for each part of the layout.
Especially the panel.
1: Main Page
Sure, we have to start from content page container. Decorate the blog post first, before junmp into the panel. This is not a Bulma part, but more like a custom SASS. We need to make it a little bit pretty before continue.
The Document: Example Code
-
- tutor-05/52-responsive.html
- gitlab.com/…/52-responsive.html.
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
<main role="main"
class="column is-two-thirds blog-column box-deco has-background-white">
<article class="blog-post">
<h4 class="title is-4">Letters to my Bulma</h4>
<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>
</article>
</main>
<aside class="column is-one-thirds box-deco has-background-white">
<div class="blog-sidebar">
Side menu
</div>
</aside>
</div>
The Sylesheet: Example Class
Most of this style
I grab from Bootstrap example.
-
- tutor-05/sass/css-52/_blog.sass
- gitlab.com/…/sass/css-52/_blog.sass.
/* stylelint-disable selector-list-comma-newline-after */
h1, h2, h3, h4, h5, h6
font-family: "Playfair Display", Georgia, "Times New Roman", serif
/*
* Blog posts
*/
.blog-post
margin-bottom: 4rem
.blog-post-title
margin-bottom: .25rem
font-size: 2.5rem
.blog-post-meta
margin-bottom: 1.25rem
color: #999
.blog-sidebar, .blog-post
margin-left: 20px
margin-right: 20px
.blog-post-meta
margin-bottom: 5px
+mobile
.blog-column
margin-bottom: 20px
+tablet
.blog-column
margin-right: 20px
The Preview
If you want you can add this font that I took from Bootstrap example.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900">
2: Side Panel
I also use a modified version of,
Bulma’s message.sass
class to enhance my panel.
Bulma Original Message Class
Consider have a look at this original Bulma box:
-
- tutor-05/sass/vendors/bulma/components/message.sass
- gitlab.com/…/sass/vendors/bulma/components/message.sass
.message
@extend %block
background-color: $message-background-color
...
.message-header
align-items: center
background-color: $message-header-background-color
...
.message-body
border-color: $message-body-border-color
border-radius: $message-body-radius
...
Custom Box Class
Consider have a look at this altered Bulma message, that I turned into panel class:
-
- tutor-05/sass/css-53/_panel.sass.
- gitlab.com/…/sass/css-53/_panel.sass.
.panel
//@extend %block
background-color: $panel-background-color
font-size: $size-normal
...
.panel-header
align-items: center
background-color: $panel-header-background-color
...
.panel-body
color: $panel-body-color
padding: $panel-body-padding
...
The Main Stylesheet
And consider make the main
sass a line longer.
-
- tutor-05/sass/css-53/main.sass.
- gitlab.com/…/sass/css-53/main.sass.
...
@import "blog"
@import "panel"
Always recompile the CSS.
$ dart-sass --watch -I sass sass/css-53:css/
Compiled sass/css-53/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.
The Document: Example Code
Now execute the panel stylesheet in respective hypertext markup language.
-
- tutor-05/53-panel.html
- gitlab.com/…/53-panel.html.
<aside class="sidebar column is-one-thirds is-paddingless">
<section class="panel is-light">
<div class="panel-header">
<p>Isle of Friends</p>
<span class="fa fa-child"></span>
</div>
<div class="panel-body has-background-white">
Side Menu
</div>
</section>
</aside>
The Preview
And voila!. The white magic happened.
3: List
With the same method, we can make a lot of panel in right side. But we still need to adjust to make it prettier.
The Stylesheet: Altered Class
-
- tutor-05/sass/css-54/_list.sass.
- gitlab.com/…/sass/css-54/_list.sass.
// -- -- -- -- --
// _list.scss
ul.panel-list li:hover
background: lighten($yellow, 15%)
ul.panel-list
padding: 0px
ul.panel-list
padding-left: 0
list-style: none
font-size: 13px
margin-left: 20px
ul.panel-list li:before
font-family: "Font Awesome 5 Free"
//font-weight: 900
content: '\f054'
color: $gray
margin: 0 5px 0 -12px
ul.panel-list li:hover:before
color: $yellow
What is this $gray
and $yellow
anyway?
It is time to add _initial-variables
.
-
- tutor-05/sass/css-54/_initial-variables.sass.
- gitlab.com/…/sass/css-54/_initial-variables.sass
// Initial Variables
$brand-red: #802020
$brand-gray: #404040
$gray: #7b8a8b
$yellow: #f7d316
$blue: #2980b9
$dark: $brand-red
$navbar-breakpoint: 769px
The Main Stylesheet
And consider make the main
sass a line longe, again.
...
@import "blog"
@import "panel"
@import "list"
The Document: Example Code
-
- tutor-05/54-list.html
- gitlab.com/…/54-list.html.
<aside class="sidebar column is-one-thirds is-paddingless">
<section class="panel is-light">
<div class="panel-header">
<p>Isle of Friends</p>
<span class="fa fa-child"></span>
</div>
<div class="panel-body has-background-white">
<ul class="panel-list">
<li><a href="http://epsi-rns.github.io/">Linux/BSD Desktop Customization</a></li>
<li><a href="http://epsi-rns.gitlab.io/">Web Development Blog</a></li>
<li><a href="http://oto-spies.info/">Car Painting and Body Repair.</a></li>
</ul>
</div>
</section>
</aside>
The Preview
This is not magic. Just an ordinary regular styleheet.
4: Tags
Multi Panel Sidebar Example
This one example is easier, instead of making new class, we can utilize Bulma built in class. Just go straight to HTML without any custom stylesheet.
The Document: Example Code
-
- tutor-05/55-tags.html
- gitlab.com/…/55-tags.html.
<aside class="sidebar column is-one-thirds is-paddingless">
<section class="panel is-light">
<div class="panel-header">
<p>Categories</p>
<span class="fa fa-folder"></span>
</div>
<div class="panel-body has-background-white">
<a class="tag is-small is-info" href="#">
love <span class="fa fa-folder"></span>
</a>
<a class="tag is-small is-info" href="#">
lyric <span class="fa fa-folder"></span>
</a>
</div>
</section>
<section class="panel is-light">
<div class="panel-header">
<p>Tags</p>
<span class="fa fa-tag"></span>
</div>
<div class="panel-body has-background-white">
<a class="tag is-small is-light has-background-white"
href="#">
<span class="fa fa-folder"></span> indie
</a>
<a class="tag is-small is-light has-background-white"
href="#">
<span class="fa fa-folder"></span> pop
</a>
<a class="tag is-small is-light has-background-white"
href="#">
<span class="fa fa-folder"></span> rock
</a>
</div>
</section>
</aside>
Well, a lot of font awesome involved.
The Preview
It is just pretty code. No Magic.
What is Next ?
More SASS customization is our next topic. This is going to be more interesting. Consider continue reading [ Bulma SASS - Post ].
Thank you for reading.