Preface
Goal: Building multicolor widget with flat design.
Since I’m not a web designer, I rarely make my own theme. I simply don’t have the sense of art to make the mockup with inkscape. So here is what I do, I make a pure css theme. One of them is this flat design, featuring multicolored widget.
Responsive Requirement
This article is not a bootstrap tutorial anymore, but more like a custom theme tutorial. Even though the page based on bootstrap.
Custom Class
Yes. I have to do it myself. And it is fun.
Multicolor Requirement
Palette
We can either use Google Materialize Color, or Open Color.
1: Responsive Gap
Consider go further from our previous chapter. From plain looks, to multicolor.
How does it Works?
putting
wrapper
class insidecolumn
class.
You can use div
element inside div
element,
or for html5
you can utilize section
inside main
.
Other Reference
I don’t want to repeat myslef.
To see more thorough example of how the responsive gap works,
you might consider to look at this bootstrap
article.
If you don’t understand, just do fast-reading the article below:
The difference is responsive in Bulma is easier.
And this article series is using .sass
format,
rather than .scss
.
Stylesheet
The very basic part of this multicolor is, adding padding to our previous layout.
// gap main and aside
.blog
padding: 10px
.widget
padding: 10px
// decoration
main.column,
aside.column
padding: 0 !important
.main-wrapper,
.aside-wrapper
padding: 0 10px 0 10px
// responsive
.main-wrapper,
.aside-wrapper
margin-bottom: 20px
+tablet
.main-wrapper
margin-right: 10px
margin-left: 10px
.aside-wrapper
margin-left: 10px
margin-right: 10px
+widescreen
.main-wrapper
margin-left: 0px
.aside-wrapper
margin-right: 0px
HTML Skeleton
The basic layout is the same as previous, except with additional colors.
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
<main role="main"
class="column is-two-thirds">
<div class="main-wrapper blue">
<div class="blog white z-depth-3 hoverable">
Page Content
</div>
</div>
</main>
<aside class="column is-one-thirds">
<div class="aside-wrapper green">
<div class="widget white z-depth-3 hoverable">
Side Menu
</div>
</div>
</aside>
</div>
In mobile screen it is simply as below:
HTML Content
Consider give a horizontal padding to a content, and see how it looks in desktop screen.
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
<main role="main"
class="column is-two-thirds">
<section class="main-wrapper blue">
<div class="blog px-2 white z-depth-3 hoverable">
<article class="blog-post">
<h4 class="title is-4">Cause You're Different!</h4>
<p>When you can do the things that I can, but you don't,
and then the bad things happen,
they happen because of you.</p>
</article>
</div>
</section>
</main>
<aside class="column is-one-thirds">
<section class="aside-wrapper green">
<div class="widget px-2 white z-depth-3 hoverable">
<p>How many times has he been,
betrayed, disavowed, cast aside?</p>
</div>
</section>
<section class="aside-wrapper teal">
<div class="widget p-x-10 white z-depth-3 hoverable">
<p>And how long before a man like that has had enough?</p>
</div>
</section>
</aside>
</div>
2: Header and Footer
Consider separate design in each multicolor section,
so that each have their own header
and footer
.
Stylesheet
The very basic part of this multicolor is, adding padding to our previous layout.
// gap main and aside
.blog
padding: 0px
.blog-header
padding: 5px 10px 5px 10px
.blog-body
padding: 5px 10px 5px 10px
.widget
padding: 0px
.widget-header
padding: 5px 10px 5px 10px
.widget-body
padding: 5px 10px 5px 10px
And the vertical gap between widget can be solved with :last-child
.
.main-wrapper,
.aside-wrapper
margin-bottom: 20px
.aside-wrapper:last-child
margin-bottom: 0px
HTML Skeleton
We have many additional element
layer here.
Each blog
and the widget
, has header
and body
.
- Blog:
main.column > section.main-wrapper > div.blog > article.blog-body
<main role="main" class="column is-two-thirds">
<section class="main-wrapper blue">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header blue lighten-5">
...
</section>
<article class="blog-body">
...
</article>
</div>
</section>
</main>
- Widget:
aside.column > section.aside-wrapper > div.widget > div.widget-body
<aside class="column is-one-thirds">
<section class="aside-wrapper green">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header green lighten-4">
...
</div>
<div class="widget-body">
...
</div>
</div>
</section>
</aside>
HTML Content
Consider give multiple widget content, and see how it looks in desktop screen.
<!-- main -->
<div class="columns is-8 layout-base maxwidth">
<main role="main"
class="column is-two-thirds">
<section class="main-wrapper blue">
<div class="blog white z-depth-3 hoverable">
<section class="blog-header blue lighten-5">
<div class="main_title">
<h4 class="title is-4" itemprop="name headline">
<a href="#">Cause You're Different!</a></h4>
</div>
</section>
<article class="blog-body" itemprop="articleBody">
<p>When you can do the things that I can, but you don't,
and then the bad things happen,
they happen because of you.</p>
</article>
</div>
</section>
</main>
<aside class="column is-one-thirds">
<section class="aside-wrapper green">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header green lighten-4">
<strong>How many times ?</strong>
<span class="fas fa-biking is-pulled-right"></span>
</div>
<div class="widget-body">
<p>Has he been, betrayed, disavowed, cast aside.</p>
</div>
</div>
</section>
<section class="aside-wrapper teal">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header teal lighten-4">
<strong>And how long?</strong>
<span class="fas fa-cat is-pulled-right"></span>
</div>
<div class="widget-body">
<p>Before a man like that has had enough.</p>
</div>
</div>
</section>
</aside>
</div>
3: List
I have four blogs, and each blog contain nine different widgets. These two are the basic most widget.
-
List
-
Tags
Consider begin with List.
Stylesheet
Using font such as FontAwesome
with CSS
is easier than using SVG
.
// -- -- -- -- --
// _list.scss
ul.widget-list li:hover
background: map-get($yellow, 'lighten-2')
ul.widget-list
padding: 0px
ul.widget-list
padding-left: 0
list-style: none
font-size: 13px
margin-left: 20px
ul.widget-list li:before
font-family: "Font Awesome 5 Free"
font-weight: 900
content: "\f054"
color: map-get($grey, 'base')
margin: 0 5px 0 -12px
ul.widget-list li:hover:before
color: map-get($yellow, 'base')
map-get
is sass
language.
Do not forget to alter the main.scss
.
...
// Tailor Made
@import "main/layout-page"
@import "main/layout-content"
@import "main/decoration"
@import "post/content"
@import "main/list"
HTML Content
Consider this list widget content.
<section class="aside-wrapper green">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header green lighten-4">
<strong>Isle of Friends</strong>
<span class="fa fa-child is-pulled-right"></span>
</div>
<div class="widget-body">
<ul class="widget-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>
</div>
</section>
4: Tags
Other basic widget example is the tags
widget.
Stylesheet
We don’t need any. Tag class have been provided by Bulma.
HTML Content
Consider this list widget content.
<aside class="column is-one-thirds">
<section class="aside-wrapper green">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header green lighten-4">
<strong>Categories</strong>
<span class="fa fa-folder is-pulled-right"></span>
</div>
<div class="widget-body">
<a class="tag is-small green lighten-4 z-depth-1" href="#">
mission <span class="fa fa-folder"></span>
</a>
<a class="tag is-small green lighten-4 z-depth-1" href="#">
accomplished <span class="fa fa-folder"></span>
</a>
</div>
</div>
</section>
<section class="aside-wrapper teal">
<div class="widget white z-depth-3 hoverable">
<div class="widget-header teal lighten-4">
<strong>Tags</strong>
<span class="fa fa-tag is-pulled-right"></span>
</div>
<div class="widget-body">
<a class="tag is-small is-light white"
href="#">
<span class="fa fa-folder"></span> command
</a>
<a class="tag is-small is-light white"
href="#">
<span class="fa fa-folder"></span> agent
</a>
<a class="tag is-small is-light white"
href="#">
<span class="fa fa-folder"></span> duty
</a>
</div>
</div>
</section>
</aside>
What is Next ?
The last part is about content, the blog post and its decoration. Consider continue reading [ Bulma MD - Blog Post ].
Thank you for reading.