bp-scss v1.0.0

BP Theme

A BP style theme for Bootstrap v4.

Table of contents

1. Quick start
2. What's included
3. Documentation
4. Versioning
5. License

Quick start

1. Install node.
2. Install this package ... npm install bp-scss --save
3. Include the main scss file in your scss code.

What's included

This package requires Bootstrap 4 and as a result it will be automatically added by this package.

Within the download you'll find the following files:

bp-scss
 └── src/
     ├── scss/
     │   ├── button.scss
     │   ├── colour.scss
     │   ├── custom.scss
     │   ├── document.scss
     │   ├── form.scss
     │   ├── main.scss
     │   ├── nav.scss
     │   ├── table.scss
     │   └── typography.scss
     ├── .gitignore
     ├── LICENSE
     ├── package.json
     └── README.md

You only need to include the bp-scss/src/scss/main.scss file in your scss.

Documentation

How to use

Copy HTML code from Bootstrap's website into your web page and hey presto it will have BP's look and feel, if it has been coded for.

button.scss

Buttons have been re-styled to reflect BP's look and feel.

Bootstrap code with btn class removed from buttons (not links), because it is automatically added by button.scss.

<a class="text-green" href="#">Link</a>
<a class="btn btn-primary" href="#" role="button">Link</a>
<button type="button" class="btn-link">Button</button>
<button type="button" class="btn-primary">Button</button>
<button type="submit" class="btn-secondary">Button</button>

colour.scss

Contains all BP's colour codes.

The colour variables can be used directly in your scss code to give an element the right colour.

In your SCSS

.my-style {background-color: $green;]

custom.scss

Contains custom classes which desiners will find useful.

document.scss

Contains specific chunks of HTML code has been created in order to produce a specific BP block.

<div class="document-header primary contains-buttons">
    <div class="row">
        <div class="col-sm-8">
            <ul class="separators">
                <li>Info 1</li>
                <li>Info 2</li>
                <li>Info 3</li>
            </ul>
        </div>
        <div class="col">
            <ul class="justify-content-end flex-wrap">
                <li><a class="btn-primary" href="#" role="button">Primary Button</a></li>
                <li><a class="btn-secondary" href="#" role="button">Secondary Button</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="document-header secondary contains-buttons">
    <div class="row">
        <div class="col-sm-8">
            <ul class="separators">
                <li>Info 1</li>
                <li>Info 2</li>
                <li>Info 3</li>
            </ul>
        </div>
        <div class="col">
            <ul class="justify-content-end flex-wrap">
                <li><a class="btn-primary" href="#" role="button">Primary Button</a></li>
                <li><a class="btn-secondary" href="#" role="button">Secondary Button</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="document-header primary">
    <div class="row">
        <div class="col">
            <ul class="separators">
                <li>Info 1</li>
                <li>Info 2</li>
                <li>Info 3</li>
            </ul>
        </div>
        <div class="col">
            <ul class="separators d-flex justify-content-end">
                <li>Info 1</li>
                <li>Info 2</li>
                <li>Info 3</li>
            </ul>
        </div>
    </div>
</div>

form.scss

Contains form styling.

Bootstrap code with form-control, form-check-input, form-check-label and btn classes removed, because it is automatically added by form.scss.

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" id="exampleCheck1">
        <label for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn-primary">Submit</button>
</form>

main.scss

This file loads all the other scss files. This is the main file to include in your scss file.

nav.scss

Contains navigation styling.

Bootstrap tabs code with nav-tabs class added. You can change nav-tabs to sub-nav-tabs to get a subset of tabs

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

class: nav-tabs

class: sub-nav-tabs

Bootstrap navbar code with navbar-light and bg-light classes removed.

<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

table.scss

Contains table styling.

Bootstrap table code

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

There is a class .table-tools which when used with the appropriate Angular components you will get a table that has the ability to be searched, filtered and apply column sorting.

typography.scss

Contains typography styling.

Here we specify the default size font and some colour classes which can be used in your SCSS files.

In your SCSS

.my-style {color: $green;]

In your HTML code

.text-green

.background-green

Versioning

This package is an extension of Bootstrap v4. See the Releases section of the GitHub project for changelogs for each release version of Bootstrap.

See the versioning section of the GitHub project for changelogs for each release version of BP-SCSS.

License

Code released under the MIT License.