Bootstrap - Sass - Custom Class

   
   
 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: Making modular SASS for your theme.

Understanding SASS is a must for theme maker. You should be able to make your tailor made stylesheets.

Reading

Again, the official documentation is your friend. If you do not have any idea about SASS you should read this first:

3: Example: Modular SASS

You can add as many additional custom SASS in your theme.

For a starter, this SASS is completely separated with bootstrap. We are going to use bootstrap variables inside additional SASS later, in the next chapter.

Directory Preparation

We need proper looks for our project. From the beginning, consider organizer your stuff well.

❯ tree sass/css/main
sass/css/main
├── _decoration.scss
├── _icons-feather.scss
├── _layout-content.scss
├── _layout-page.scss
├── _logo.scss
└── _sticky-footer.scss

0 directories, 6 files

Bootstrap SASS: Additional Directory Preparation

  • __

The Sylesheet: Additional SASS

And of course the main.scss will follow the above file list, to relative to sass/css directory.

@import 
  "main/layout-page",
  "main/layout-content",
  "main/logo",
  "main/decoration",
  "main/sticky-footer",
  "main/icons-feather"
;

The Sylesheet: Compiled CSS

The result of compiled CSS can be seen in left pane in figure below:

Bootstrap SASS: Compiled CSS

In the right pane is, simple example of modular SASS. The SASS is exactly the same as CSS, without nested curly bracket.

Stylesheets: Some Sources

If you wish this is the stylesheets in SASS, required for this page. We can make this very modular, as shown in below file artefacts:

I put a nice background, using subtle pattern.

body {
  background-image: url("../images/light-grey-terrazzo.png");
}
.layout-base {
  padding-top: 5rem;
  padding-bottom: 1rem;
}

And grabbed from official bootstrap site.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

We have to make these stylesheets modular, because we are going to make a lot of changes for each step, for the rest of article series.

More Stylesheets

We also require these for later use:

  • _logo.scss,

  • _icons-feather.scss

  • _layout-content.scss

But for now just leave it empty.

Generated Stylesheet

You should see the result of the compilation in

.layout-base {
  padding-top: 5rem;
  padding-bottom: 1rem;
}

...

The original file is so long. You can check at the repository.

Prepare The Head

Consider the <head> element.

<head>
  ...

  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>

The Document: Example Page.

What good is it SASS compilation without example page? Here we are, I represent a page, complete with header (Navigation Bar), main content and footer.

<!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/bootstrap.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">
        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>

You can have a look at the expected result in image below:

Bootstrap SASS: Example: Navigation Bar

What is Next ?

There is, a topic about Theme in Bootstrap. Using ready to use theme with Bootswatch. Consider continue reading [ Bootstrap - SASS - Bootswatch ].

Thank you for reading.