Bootstrap - Sass - Bootswatch

   
   
 bootstrap  sass  
 frontend  
Article Series

This article series contain few sections.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

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.

Bootstrap SASS: Bootswatch Animation

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.

Bootstrap SASS: Compile Bootstrapswatch

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">
      &copy; 2020.
    </div>
  </footer>

</body>
</html>

And open the html artefact using file manager.

Bootstrap SASS: Bootswatch Theme

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.