Preface
Goal: Miscellanous knowledge before you make your custom theme.
This article is integral part of previous article. You should read previous article before continue.
1: Swatch
Working with theme is fun.
The Sylesheet: Original Code
There is a ready to used Bulma theme, port from Bootstrap Swatch.
Or the source code, if you prefer:
Consider have a look at the original code, at cerulean/bulmaswatch.scss.
/*! bulmaswatch v0.7.2 | MIT License */
@import "variables";
@import "bulma";
@import "overrides";
The Sylesheet: Adapted Code
Now for use with our project, adapt with our directory structure.
-
- tutor-03/sass/bulmaswatch/cerulean/bulmaswatch.scss.
- gitlab.com/…/cerulean/bulmaswatch.scss.
@import "variables";
@import "vendors/bulma";
@import "overrides";
Consider compile
$ dart-sass --watch -I sass sass/bulmaswatch:css/swatch --style=compressed --no-source-map
The Document: Example
Consider using our last example, except change the bulma.css
to any selected bulmaswatch.css
theme.
-
- tutor-03/32-swatch.html
- gitlab.com/…/32-swatch.html.
<link rel="stylesheet" type="text/css" href="css/swatch/cerulean/bulmaswatch.css">
And open the html artefact using file manager.
2: Modular SASS
You can add as many additional custom SASS in your theme.
The Sylesheet: Some Sources
For example this:
-
- tutor-03/sass/css-33/_layout.sass.
- gitlab.com/…/sass/css-33/_layout.sass.
html
height: 100%
body
min-height: 100%
.maxwidth
margin-right: 10px
margin-left: 10px
+desktop
.maxwidth
margin-right: auto
margin-left: auto
max-width: 1346px // 1366 - 10 -10
.layout-base
padding-top: 5rem
footer.site-footer
padding-top: 5rem
I put a nice background, using subtle pattern.
-
- tutor-03/sass/css-33/_decoration.sass.
- gitlab.com/…/sass/css-33/_decoration.sass.
body
background-image: url("../images/funky-lines.png")
And put that sass artefact in main css.
-
- tutor-03/sass/css-33/main.sass
- gitlab.com/…/sass/css-33/main.sass.
@import "vendors/bulma/utilities/mixins"
@import "layout"
@import "decoration"
The Sylesheet: CSS Result
Consider compile as:
$ dart-sass --watch -I sass sass/css-33:css/
Compiled sass/css-33/main.sass to css/main.css.
Sass is watching for changes. Press Ctrl-C to stop.
And the result would be:
html {
height: 100%;
}
body {
min-height: 100%;
}
.maxwidth {
margin-right: 10px;
margin-left: 10px;
}
@media screen and (min-width: 1088px) {
.maxwidth {
margin-right: auto;
margin-left: auto;
max-width: 1346px;
}
}
.layout-base {
padding-top: 5rem;
}
footer.site-footer {
padding-top: 5rem;
}
body {
background-image: url("../images/funky-lines.png");
}
/*# sourceMappingURL=main.css.map */
Maxwidth
And, what is this maxwidth
anyway ?
I have a smartphone, tablet, sometimes medium screen, and mostly I’m working with large screen. What is good for my regular screen, looks ugly in large screen. My solution is to create maxwidth, so my content would not be stretched horizontally.
3: FontAwesome
There are possibility that you need third party SASS in your theme,
such as FontAwesome
or BulmaHelpers
.
Download Source
Download FontAwesome SASS and put it on respective directory.
The Sylesheet: Custom SASS
I intentionally using .scss
format.
So you know that sass works with both format .sass
and .scss
withut an issue.
-
- tutor-03/sass/css-34/fontawesome.scss
- gitlab.com/…/sass/css-34/fontawesome.scss.
$fa-font-path: "https://use.fontawesome.com/releases/v5.2.0/webfonts";
// Import partials from `sass_dir` (defaults to `_sass`)
@import "vendors/font-awesome-5/fontawesome";
@import "vendors/font-awesome-5/solid";
@import "vendors/font-awesome-5/brands";
As you can see, I still use CDN for webfonts. But local css.
The Document: Example HTML
All you need to do is, to include stylesheed,
in the <head>
element of the html artefact.
<link rel="stylesheet" type="text/css" href="css/fontawesome.css">
4: Summary
While the complete code is below:
-
- tutor-03/34-awesome.html
- gitlab.com/…/34-awesome.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">
<script src="js/vue.min.js"></script>
</head>
<body class="has-navbar-fixed-top">
<!-- header -->
<nav role="navigation" aria-label="main navigation"
class="navbar is-fixed-top is-light maxwidth"
id="navbar-vue-app">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="images/logo-gear.png" alt="Home" />
</a>
<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">
<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 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>
<!-- main -->
<div class="layout-base maxwidth">
<main role="main"
class="column is-full 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-light has-text-centered is-vcentered">
<div class="column">
© 2019.
</div>
</div>
</footer>
<!-- JavaScript -->
<!-- Placed at the end of the document -->
<script src="js/bulma-burger-vue.js"></script>
</body>
</html>
The respective result screenshot would be as figure below:
Not pretty yet! We are going to make the color elegant in the next guidance.
What is Next ?
More SASS customization is our next topic. Just a few example, but diverse. This is going to be more interesting. Consider continue reading [ Bulma SASS - Custom ].
Thank you for reading.