Preface
Goal: Using a ready to used Bootstrap SASS theme.
This article is integral part of previous article. You should read previous article before continue.
1: Bootstrap Swatch
Working with theme is fun.
The Sylesheet: Original Code
There is a ready to used Bootstrap theme named Bootstrap Swatch.
Or the source code, if you prefer:
Consider have a look at the original code:
// Cerulean 4.1.3
// Bootswatch
@mixin btn-shadow($color){
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
}
...
This is along code
The Sylesheet: Using Bootswatch
Now for use with our project, adapt with our directory structure.
@import
"../bootswatch/cerulean/variables",
"../bootstrap/bootstrap",
"../bootswatch/cerulean/bootswatch"
;
Consider compile
$ dart-sass --watch -I sass sass/css:assets/css --style=compressed --no-source-map
Sass is watching for changes. Press Ctrl-C to stop.
Compiled sass/css/bootswatch.scss to assets/css/bootswatch.css.
Prepare The Head
Consider the <head>
element.
<head>
...
<link rel="stylesheet" type="text/css" href="assets/css/bootswatch.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
The Document: Example
Consider using our last example, except change the bootstrap.css
to any selected bootswatch.css
theme.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Desperate times, desperate measures.</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootswatch.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<!-- header -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</nav>
<!-- main -->
<div class="layout-base">
<main role="main" class="container">
<ul class="list-group">
<li class="list-group-item active">
<h4>Your Mission!</h4></li>
<li class="list-group-item">
To have, to hold, to love,
cherish, honor, and protect?</li>
<li class="list-group-item">
To shield from terrors known and unknown?
To lie, to deceive?</li>
<li class="list-group-item">
To live a double life,
to fail to prevent her abduction,
erase her identity,
force her into hiding,
take away all she has known.</li>
</ul>
</main>
</div>
<!-- footer -->
<footer class="footer">
<div class="bg-primary text-light text-center">
© 2020.
</div>
</footer>
</body>
</html>
And open the html artefact using file manager.
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 [ Bootstrap - SASS - Responsive ].
Thank you for reading.