# bp-scss

> BP theme for Bootstrap 4.

Latest version **1.0.0** (published 2019-10-04) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install bp-scss
pnpm add bp-scss
yarn add bp-scss
bun add bp-scss
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-10-04 |
| First published | 2019-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Oval Business Solutions |
| Maintainers | oval-npm |
| Keywords | bp, theme, bootstrap |

## Links

- npm: https://www.npmjs.com/package/bp-scss
- npm.io page: https://npm.io/package/bp-scss

## Dependencies (1)

- [bootstrap](https://npm.io/package/bootstrap.md) ^4.3.1

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-10-04

## README

# BP Theme
A BP style theme for Bootstrap v4.

## Table of contents
1. Quick start
2. What's included
2. Documentation
3. Versioning
4. License


### Quick start
1. Install [node](https://nodejs.org).
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>
```
![button example](src/images/buttons_scss.png)

#### 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>
```
![document example](src/images/document_scss_1.png)

```
<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>
```
![document example](src/images/document_scss_2.png)

```
<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>
```
![document example](src/images/document_scss_3.png)

#### 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>
```
![form example](src/images/form_scss.png)

#### 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

![nav example](src/images/nav_scss_1.png)

class: sub-nav-tabs

![nav example](src/images/nav_scss_2.png)

*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>
```
![nav example](src/images/nav_scss_3.png)



#### 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>
```
![nav example](src/images/table_scss_1.png)

*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](https://github.com/twbs/bootstrap/releases) for changelogs for each release version of Bootstrap.

See [the versioning section of the GitHub project](https://bitbucket.org/oval/bp-scss) for changelogs for each release version of BP-SCSS.

### License
Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/master/LICENSE).

---
_Source: https://npm.io/package/bp-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._