Bootstrap Expanded Features

About ๐Ÿง

Too many new features for bootstrap made with javascript for better performance and more options without a large css file.

The problem ๐Ÿ˜ญ

Bootstrap doesn't support options of they classes like w-33 to have width: 33%; on an element or things more especific like h-20vh to have an element with: height 20vh;, that can be more efficient and responsive and whenever we need those, we need to get it though a css style sheet and thats not the main point of using Bootstrap.

First I tried to make a library for sass to get to many more options for the classes but there was one problem, it was an 50mb size file after beeing compiled, and we know that 50mb its a large file to be downloaded only to use a few classes that are on the file, but then I get one idea that can let anybody to get all the css that they want without having all the options that they dont use and having the option to create more colors that can be used with bg-newcolorname to get background-color: newcolor; and many more options.

The solution ๐Ÿ˜Ž

We can now use this js library that creates all the css with the classes that are like in bootstrap just in the load of your pages, that mean that your users will only need to download the js and not a css file of 50mb+ and speed up you charge with a simple task that only consumes a few memory of the ram of the user.

Getting Started ๐Ÿ

Download Option:

CDN:

<script src="https://cdn.jsdelivr.net/gh/LynxPardelle/bootstrap-expanded-features@latest/bootstrap-expanded-features.min.js"></script>

Angular library:

npm i ngx-bootstrap-expanded-features

On Your Module

import { NgxBootstrapExpandedFeaturesService } from "ngx-bootstrap-expanded-features"; providers: [NgxBootstrapExpandedFeaturesService],

On Your Component

import { NgxBootstrapExpandedFeaturesService as BefService } from "ngx-bootstrap-expanded-features"; constructor ( private _befService: BefService ) { this._befServicecssCreate() } ngDoCheck(): void { this._befService.cssCreate() }

How To Use โœ๏ธ

Basic

<p class="bef" >
Some text.
</p>

Example

Box with a 14px padding.

Code

<p class="bg-primary text-light bef bef-p-14px" >
 Box with a 14px padding.
</p>

New Colors

List of Bootstrap original colors
  • Primary
  • Secondary
  • Success
  • Info
  • Warning
  • Danger
  • Light
  • Dark
List of New Bootstrap original colors
  • Indigo
  • Purple
  • Pink
  • Orange
  • Teal
  • White
  • Gray
List of New Custom colors
  • Mystic
  • Lavender
  • Fairy
  • Summer
  • Old
  • Friend
  • Tree
  • Blood
  • Beast
  • Abyss
Adding new colors
For the CDN version

<!-- SOME CODE -->
<script>
 var colors = {
  monster: "#00AA00",
  futurePop: "#9700FF",
 };
</script>
<!-- SCRIPT LINKED TO THE CDN VERSION -->

For the npm version

import { cssCreate, pushColors } from 'bootstrap-expanded-features';
const my_new_colors = {
 monster: "#00AA00",
 futurePop: "#9700FF",
};
pushColors(my_new_colors);
cssCreate();

For the Angular Library version
import { NgxBootstrapExpandedFeaturesService as BefService } from "ngx-bootstrap-expanded-features"; export class YourComponent {
 public my_new_colors = {
 monster: "#00AA00",
 futurePop: "#9700FF",
 };
}
constructor ( private _befService: BefService ) {
 this._befService.pushColors( this.my_new_colors )
 this._befService.cssCreate()
}
ngDoCheck(): void {
 this._befService.pushColors( this.my_new_colors )
 this._befService.cssCreate()
}

BreakPoints

Example

Some text with the color indigo before sm, purple on sm, pink on md, orange on lg, teal on xl and lavender on xxl.

Code

<p class="bef bef-text-indigo bef-text-sm-purple bef-text-md-pink bef-text-lg-orange bef-text-xl-teal bef-text-xxl-lavender" >
 Some text with the color indigo before sm, purple on sm, pink on md, orange on lg, teal on xl and lavender on xxl.
</p>

Reserved Words

  • "per" : "%"
    You can use it with numbers to get percentages, example:
    bef-w-50per = width: 50%
  • "MIN" : "-"
    You can use it to get negative numbers, example:
    bef-mt-MIN1rem = margin-top: -1rem
  • "_" : "."
    You can use it to put a point between the numbers, example:
    bef-mt-MIN1_5rem = margin-top: -1.5rem
  • "__" : " "
    You can use it to get a space in the class, example:
    bef-boxShadow-0__2px__4px__lavender =
    box-shadow: 0 2px 4px #D6BCFF
  • "COM" : " , "
    You can use it to separate words, example:
    bef-boxShadow-0__2px__4px__lavenderCOMinset__2px__0__4px__fairy =
    box-shadow: 0 2px 4px #D6BCFF , inset 2px 0 4px #D680FF
  • "__OPA" : " OPA"
    You can use it to active a opacity mode of a color, example:
    bef-bg-fairy__OPA__0_5 =
    background-color: rgba(214, 128, 255, 0.5)
  • "SD" : "(" and "ED" : ")"
    You can use it to use some CSS functions like calc(), example:
    bef-w-calcSD50per__+__2remED =
    width: calc(50% + 2rem)
  • "HASH" : "#"
    You can use it to choose an especific Hex color, example:
    bef-bg-HASH990099 =
    background-color: #990099

Background

Example

Box with indigo background.

Code

<p class="text-light bef bef-bg-indigo" >
 Box with indigo background.
</p>

Hover background

Example

Box with indigo background and a mystic background on hover.

Code

<p class="text-light bef bef-bg-indigo bef-bgHover-mystic" >
 Box with indigo background and a mystic background on hover.
</p>

Active background

Example

Box with indigo background and a mystic background on active.

Code

<p class="text-light bef bef-bg-indigo bef-bgActive-mystic" >
 Box with indigo background and a mystic background on active.
</p>

Border

Border Width

  • bef-border-value = border-width: value
  • bef-bordert-value = border-top-width: value
  • bef-borderb-value = border-bottom-width: value
  • bef-borders-value = border-left-width: value
  • bef-bordere-value = border-right-width: value
  • bef-borderx-value = border-right-width: value ; border-left-width: value
  • bef-bordery-value = border-top-width: value ; border-bottom-width: value

Border Style

  • bef-borderStyle-value = border-style: value
  • bef-borderStylet-value = border-top-style: value
  • bef-borderStyleb-value = border-bottom-style: value
  • bef-borderStyles-value = border-left-style: value
  • bef-borderStylee-value = border-right-style: value
  • bef-borderStylex-value = border-right-style: value ; border-left-style: value
  • bef-borderStyley-value = border-top-style: value ; border-bottom-style: value

Border Color

  • bef-borderColor-value = border-color: value
  • bef-borderColort-value = border-top-color: value
  • bef-borderColorb-value = border-bottom-color: value
  • bef-borderColors-value = border-left-color: value
  • bef-borderColore-value = border-right-color: value
  • bef-borderColorx-value = border-right-color: value ; border-left-color: value
  • bef-borderColory-value = border-top-color: value ; border-bottom-color: value

Radius

Example

Paragraph with a border-radius of 30px.

Code

<p class="bg-dark text-light p-3 bef bef-rounded-30px" >
 Paragraph with a border-radius of 30px.
</p>

Button

Normal Button

Example
Code

<button class="btn bef bef-btn-mystic text-light" >
 Button
</button>

Outline Button

Example
Code

<button class="btn bef bef-btnOutline-mystic-light" >
 Button Outline
</button>

Opacity

Example

Box with 0.5 opacity.

Code

<p class="text-dark bef bef-opacity-0_5" >
 Box with 0.5 opacity.
</p>

Position

Example

Box with top 15px and start 30 percent.

Code

<div class="position-relative bef bef-h-200px bef-w-300px bef-bg-beast mx-auto" >
 <p class="text-light position-absolute bef bef-top-15px bef-start-30per bef-w-150px bef-bg-abyss" >
  Box with 0.5 opacity.
 </p>
</div>

Example

Box with position static below the md breakpoint and absolute above the breakpoint.

Code

<div class="bef bef-position-static bef-position-md-relative bef-h-200px bef-w-300px bef-bg-beast mx-auto" >
 <p class="text-light bef bef-position-static bef-position-md-absolute bef-top-15px bef-start-30per bef-w-150px bef-bg-abyss" >
  Box with position static below the md breakpoint and absolute above the breakpoint.
 </p>
</div>

Shadows

Example

Box with a dark shadow and a text with a pink shadow.

Code

<p class="text-light fw-bold h3 bef bef-p-30px bef-bg-blood bef-textShadow-8px__4px__2px__pink bef-boxShadow-0px__8px__8px__dark" >
 Box with a dark shadow and a text with a pink shadow.
</p>

Sizing

Width & Height

Example

Box with a width of a 150px and an height of a 150px.

Code

<p class="bg-dark text-light bef bef-w-150px bef-h-150px" >
 Box with a width of a 150px and an height of a 150px.
</p>

Example

Box with a width of a minimum of 100px, 75 percent standard and a maximum of 450px and an height of a minimum of a 100px, 50 percent standard and a maximum of 250px.

Code

<p class="bg-dark text-light bef bef-w-clampSD100pxCOM__75perCOM__450pxED bef-h-clampSD100pxCOM__50perCOM__250pxED" >
 Box with a width of a minimum of 100px, 75 percent standard and a maximum of 450px and an height of a minimum of a 100px, 50 percent standard and a maximum of 250px.
</p>

Width Min, Width Max, Height Min & Height Max

Example

Box with a width of a minimum of 100px, 75 percent standard and a maximum of 450px and an height of a minimum of a 100px, 50 percent standard and a maximum of 250px.

Code

<p class="bg-dark text-light bef bef-wmn-100px bef-w-75per bef-wmx-450px bef-hmn-100px bef-h-50per bef-hmx-250px" >
 Box with a width of a minimum of 100px, 75 percent standard and a maximum of 450px and an height of a minimum of a 100px, 50 percent standard and a maximum of 250px.
</p>

Padding & Margin

Example

Box with a padding of a 30px and an margin of a 50px.

Code

<p class="bg-dark text-light bef bef-p-30px bef-m-50px" >
 Box with a padding of a 30px and an margin of a 50px.
</p>

Padding options
  • bef-p-value = padding: value
  • bef-pt-value = padding-top: value
  • bef-pb-value = padding-bottom: value
  • bef-ps-value = padding-left: value
  • bef-pe-value = padding-right: value
  • bef-px-value = padding-right: value ; padding-left: value
  • bef-py-value = padding-top: value ; padding-bottom: value
Margin options
  • bef-m-value = margin: value
  • bef-mt-value = margin-top: value
  • bef-mb-value = margin-bottom: value
  • bef-ms-value = margin-left: value
  • bef-me-value = margin-right: value
  • bef-mx-value = margin-right: value ; margin-left: value
  • bef-my-value = margin-top: value ; margin-bottom: value

Gap

Example

Gap 30px 15px.

Gap 30px 15px.

Gap 30px 15px.

Gap 30px 15px.

Code

<div class="d-flex flex-wrap bef bef-gap-30px__15px" >
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Gap 30px 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Gap 30px 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Gap 30px 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Gap 30px 15px.
 </p>
</div>

Example

Row gap 30px and column gap 15px.

Row gap 30px and column gap 15px.

Row gap 30px and column gap 15px.

Row gap 30px and column gap 15px.

Code

<div class="d-flex flex-wrap bef bef-rowGap-30px bef-columnGap-15px" >
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Row gap 30px and column gap 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Row gap 30px and column gap 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Row gap 30px and column gap 15px.
 </p>
 <p class="bg-dark text-light m-0 bef bef-w-calcSD50per__MIN__7_5pxED" >
  Row gap 30px and column gap 15px.
 </p>
</div>

Text

Example

Paragraph with indigo text color.

Code

<p class="bef bef-text-indigo" >
 Paragraph with indigo text color.
</p>

Hover Text Color

Example

Paragraph with indigo text color and a mystic text color on hover.

Code

<p class="bef bef-text-indigo bef-textHover-mystic" >
 Paragraph with indigo text color and a mystic text color on hover.
</p>

Active Text Color

Example

Paragraph with indigo text color and a mystic text color on active.

Code

<p class="bef bef-text-indigo bef-textActive-mystic" >
 Paragraph with indigo text color and a mystic text color on active.
</p>

Link Color

Example
Code

<p class="text-dark bef bef-link-indigo">
 Paragraph with indigo <a href="#">links</a> .
</p>

Hover Link Color

Example
Code

<p class="text-dark bef bef-link-indigo bef-linkHover-mystic" >
 Paragraph with indigo color and a mystic color on hover in the <a href="#">links</a> .
</p>

Active Link Color

Example
Code

<p class="text-dark bef bef-link-indigo bef-linkActive-mystic" >
 Paragraph with indigo color and a mystic color on active in the <a href="#">links</a> .
</p>

Font Size

Example

Text with a font size of 23px.

Code

<p class="bg-dark text-light bef bef-fs-23px" >
 Text with a font size of 23px.
</p>

Line Height

Example

Text with a line height of 50px.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Code

<p class="bg-dark text-light bef bef-lh-50px" >
 Text with a line height of 50px.
 <br />
 Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>

Z Index

Example

Paragraph with a z-index of 10.

Code

<p class="bef bef-z-10" >
 Paragraph with a z-index of 10.
</p>