Too many new features for bootstrap made with javascript for better performance and more options without a large css file.
Too many new features for bootstrap made with javascript for better performance and more options without a large css file.
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.
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.
You can download this repo here and copy the bootstrap-expanded-feature.js and the bef-styles.css on your site and link it into your html files.
Or you can copy and paste the CDN and create a CSS file with the name "bef-styles.css" and link it to your html files.
<script src="https://cdn.jsdelivr.net/gh/LynxPardelle/bootstrap-expanded-features@latest/bootstrap-expanded-features.min.js"></script>
Or you can download the Angular Library with npm and import the Service.
npm i ngx-bootstrap-expanded-features
Import the Service:
import {
NgxBootstrapExpandedFeaturesService
} from
"ngx-bootstrap-expanded-features";
And add it to your providers on the @NgModule:
providers: [NgxBootstrapExpandedFeaturesService],
Import the Service (you can change the name as it follows):
import {
NgxBootstrapExpandedFeaturesService
as BefService
} from
"ngx-bootstrap-expanded-features";
Put in on your constructor and initialize the cssCreate() function:
constructor (
private _befService:
BefService ) {
this._befServicecssCreate()
}
You can also put in on any function that change the elements on the screen or with any change like with the DoCheck() function on Angular:
ngDoCheck(): void {
this._befService.cssCreate()
}
To start using this library, you only need to use some classes that seems to much alike the bootstrap classes, but the key to use this tool is to use the bef class like in this example:
<p class="bef" >
Some text.
</p>
After that you can write classes like in bootstrap but with custom values like in this example:
Box with a 14px padding.
<p class="bg-primary text-light bef bef-p-14px"
>
Box with a 14px padding.
</p>
In this library you will have a lot of new colors that are from the original bootstrap, but I included some custom colors and you can add even more.
You can add more colors, but how you do it depends if you are using the CDN or npm installing it.
You will need to create a var with a object with the name "colors" like in this code that you can copy-paste:
<!-- SOME CODE -->
<script>
var colors = {
monster: "#00AA00",
futurePop: "#9700FF",
};
</script>
<!-- SCRIPT LINKED TO THE CDN VERSION -->
You will need to import the library, create a var with a object with any name, it can be "my_new_colors" and then you can use the pushColors() function and then use the cssCreate() function to generate all the css with the new colors that you need like in this code that you can copy-paste:
import {
cssCreate, pushColors } from
'bootstrap-expanded-features';
const
my_new_colors = {
monster: "#00AA00",
futurePop: "#9700FF",
};
pushColors(my_new_colors);
cssCreate();
Import the Service (you can change the name as it follows):
import {
NgxBootstrapExpandedFeaturesService
as BefService
} from
"ngx-bootstrap-expanded-features";
Create new colors in an object inside your component class:
export class
YourComponent {
public
my_new_colors = {
monster: "#00AA00",
futurePop: "#9700FF",
};
}
Put the service on your constructor, push the new colors and initialize the cssCreate() function:
constructor (
private _befService:
BefService ) {
this._befService.pushColors(
this.my_new_colors )
this._befService.cssCreate()
}
You can also put in on any function that change the elements on the screen or with any change like with the DoCheck() function on Angular:
ngDoCheck(): void {
this._befService.pushColors(
this.my_new_colors )
this._befService.cssCreate()
}
Now you can use the breakpoints of bootstrap within the classes that you didn't before here are some examples.
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 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>
There are a few reserved words you should use in some cases and a few way to use the "_" to get more options.
We can use some new colors and even put your own colors, but there is
more, now you can put different colors in the different breakpoints that
bootstrap has.
You can watch what colors are available
here.
You can watch how to use the breakpoints
here.
To use the background you need to use the class bef-bg- and add a color like in the following example:
Box with indigo background.
<p class="text-light bef bef-bg-indigo"
>
Box with indigo background.
</p>
We can use colors in the background only when the item has a hover state, like in the following example:
Box with indigo background and a mystic background on hover.
<p class="text-light bef bef-bg-indigo bef-bgHover-mystic"
>
Box with indigo background and a mystic background on hover.
</p>
We can use colors in the background only when the item has an active state, like in the following example:
Box with indigo background and a mystic background on active.
<p class="text-light bef bef-bg-indigo bef-bgActive-mystic"
>
Box with indigo background and a mystic background on
active.
</p>
You can put borders in an element with only 3 classes, but you can use more to get more personalization, we will check the 3 types of border classes first, then we will se some examples.
The width of the border can be determined with the following classes:
Where value can be changed for any value.
The style of the border can be determined with the following classes:
Where value can be changed for any value.
The color of the border can be determined with the following classes:
Where value can be changed for any value.
To use the border-radius you need to use the class bef-rounded- and add a valid value like in the following example:
Paragraph with a border-radius of 30px.
<p class="bg-dark text-light p-3 bef bef-rounded-30px"
>
Paragraph with a border-radius of 30px.
</p>
There are two types of buttons, normal and outline.
The normal button can be used with bef-btn-color where you can use any color of bootstrap, bootstrap extras, my custom colors and your own custom colors.
<button class="btn bef bef-btn-mystic text-light"
>
Button
</button>
The outline button can be used with bef-btnOutline-color-color where you can use any color of bootstrap, bootstrap extras, my custom colors and your own custom colors.
<button class="btn bef bef-btnOutline-mystic-light"
>
Button Outline
</button>
The bg only change the background color, but the btn change the background color with a shade tint of the color used depending of the element state, like hover, active, etc.
The opacity is one of the most easy properties to changes using bef.
To use the opacity you need to use the class bef-opacity- and add a value like in the following example:
Box with 0.5 opacity.
<p class="text-dark bef bef-opacity-0_5"
>
Box with 0.5 opacity.
</p>
We can change the position of the elements with bef.
To use the position you need to use the bootstrap class position-absolute and one or more of the classes "bef-top-", "bef-bot-", "bef-start-" or "bef-end-" and add a value like in the following example:
Box with top 15px and start 30 percent.
<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>
We can change the position property too.
To use the property property you need to use the class bef-position- and add a valid value like in the following example:
Box with position static below the md breakpoint and absolute above the breakpoint.
<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>
We can create shadows with the bef library but its a little bit tricky, I recomend to check the basics before using the shadows on the elements.
To use the shadows on the box elements you need to use the class bef-boxShadow- and add a complex and valid value and to use the shadows on the text elements you need to use the class bef-textShadow- and add a complex and valid value like in the following example:
Box with a dark shadow and a text with a pink shadow.
<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>
The sizing of elements on bef can use all the sizing properties with the breakpoints of Bootstrap and with custom values.
To use the width or/and height on an element you need to use the class bef-w- and add a value or/and the class bef-h- and add a value like in the following example:
Box with a width of a 150px and an height of a 150px.
<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>
We can also use the clamp() function in the following 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.
<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>
If you dont like to use clamp() function, we can use the width min ("bef-wmn-"), width max ("bef-wmx-"), height min ("bef-hmn-") & height max ("bef-hmx-") like in the following 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.
<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>
We can use bef to use padding and margin with the breakpoints and custom value, like in the following example:
Box with a padding of a 30px and an margin of a 50px.
<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>
The padding an be determined with the following classes:
Where value can be changed for any value.
The margin an be determined with the following classes:
Where value can be changed for any value.
We can use the gap with the bef caracteristics now, but remember that gap is for spacing between rows and columns on the grid, so you will need to use one like in the following example:
Gap 30px 15px.
Gap 30px 15px.
Gap 30px 15px.
Gap 30px 15px.
<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>
We can also use row-gap and column-gap like in the following 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.
<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>
We can use some new colors and even put your own colors, but there is
more, now you can put different colors in the different breakpoints that
bootstrap has.
You can watch what colors are available
here.
You can watch how to use the breakpoints
here.
To use the text color you need to use the class bef-text- and add a color like in the following example:
Paragraph with indigo text color.
<p class="bef bef-text-indigo"
>
Paragraph with indigo text color.
</p>
We can use colors in the text only when the item has a hover state, like in the following example:
Paragraph with indigo text color and a mystic text color on hover.
<p class="bef bef-text-indigo bef-textHover-mystic"
>
Paragraph with indigo text color and a mystic text color on
hover.
</p>
We can use colors in the text only when the item has an active state, like in the following example:
Paragraph with indigo text color and a mystic text color on active.
<p class="bef bef-text-indigo bef-textActive-mystic"
>
Paragraph with indigo text color and a mystic text color on
active.
</p>
To use a color in the links of a text, you need to use the class bef-link- and add a color like in the following example:
Paragraph with indigo links .
<p class="text-dark bef bef-link-indigo">
Paragraph with indigo
<a href="#">links</a> .
</p>
We can use a color in the links of a text, only when the item has a hover state, like in the following example:
Paragraph with indigo color and a mystic color on hover in the links .
<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>
We can use a color in the links of a text, only when the item has an active state, like in the following example:
Paragraph with indigo color and a mystic color on active in the links .
<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>
To use the font size of a text you need to use the class bef-fs- and add a value like in the following example:
Text with a font size of 23px.
<p class="bg-dark text-light bef bef-fs-23px"
>
Text with a font size of 23px.
</p>
To use the line height of a text you need to use the class bef-fs- and add a value like in the following example:
Text with a line height of 50px.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
<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>
To use the z-index you need to use the class bef-z- and add a valid value like in the following example:
Paragraph with a z-index of 10.
<p class="bef bef-z-10"
>
Paragraph with a z-index of 10.
</p>