Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

bootstrap4-utils-extended

Extend the Bootstrap 4 Utilities with new classes!

This repository wants to extend the useful Bootstrap 4 utilities with some new special classes. This is what is available:

  • border directions based on $grid-breakpoints

  • svg fills based on $theme-colors

  • offsets based on $spacers, using transform: translate property

  • box and text shadows (extra custom variables!)

  • text utilities

  • general cursor utilities


About $grid-breakpoints, $theme-colors and $spacers

These maps are included with default values in Bootstrap 4 and can be easily modified and overridden with custom ones in SCSS. This mini-framework extension is based on those variables and it's supposed to be used in conjuction with Bootstrap 4 or at least its utilities.

The classes are generated and structured following the same scheme of Bootstrap 4 utils. (some are fully hyphenated and some more complex ones are partially hyphenated, meaning that the direction property is merged with the class base name)




How to use

Install it:

yarn add bootstrap4-utils-extended
or
npm -i bootstrap4-utils-extended


Add to your project:

@import "./custom_variables.scss";
@import "bootstrap4-utils-extended/b4ue.scss";
@import "bootstrap/scss/_utilities.scss";
Instructions
  • First create an SCSS with your custom $theme-colors, grid-breakpoints and $spacers and import it
  • Then add the bootstrap4-utils-extended SCSS (bootstrap variables are already included here)
  • And finally add bootstrap utilities



Documentation


Borders

You can set a single border side based on the breakpoints specified in the $grid-breakpoints map and colors in the $theme-colors map.

The general structure is fully hyphenated as the following: border-{direction}-{breakpoint}-{color}

Where: *{direction} corresponds to one of these values: [top, bottom, left, right]

*{breakpoint} corresponds to a value in $grid-breakpoints map

*{color} corresponds to a value in $theme-colors map

Example: border-top-lg-primary


SVG Fills

You can fill an svg with a specific color in the $theme-colors map.

The general structure is fully hyphenated as the following: svg-{color}

Where: *{color} corresponds to a value in $theme-colors map

Example: svg-primary


Offsets

With offsets you can move around an element based on a direction, a breakpoint in the $grid-breakpoints map and a size in the $spacers map.

The general structure is partially hyphenated as the following: off{direction}-{breakpoint}-{size}

Please, note that the direction is merged with off and not hyphenated from it, following Bootstrap 4 scheme.

Where:

*{direction} corresponds to one of these values: [t, b, l, r] (top, bottom, left, right)

*{breakpoint} corresponds to a value in $grid-breakpoints map

*{size} corresponds to a value in $spacers map

Example: offt-md-5


Box-shadow and text-shadow

These classes are based on the $shadows custom and overridable map. It already has some default values (mainly for building purposes) and it's recommended to replace them.

The general structure is fully hyphenated as the following: {rule}-shadow-{index}

Where: *{rule} corresponds to one of these values: [box, text]

*{index} corresponds to a value in $shadows map

Example: box-shadow-1 or text-shadow-2


Text utilities

You can use one of the following classes to edit text styles:

font-weight-extrabold (sets font-weight to 900)

text-underlined (adds underlined text-decoration)


General cursor utilities

You can use one of the following classes to manipulate selection and cursor functionalities:

no-overflow (disables overflow)

no-pointer (disables any pointer)

no-pointer-cascade (disables any pointer, including children elements)

cursor-pointer (enables cursor pointer)

disable-select (disables element selection with cursor)




How to contribute

Fork this repo, clone it on your machine, work on the dev branch and create a pull request.

To work on it, it's required to execute a yarn install.
To build it simply execute yarn build.




Any doubt?

If you are unsure about something, please feel free to create an issue and visit Bootstrap 4 Utilities documentation.


This repository wants to be a substitute for my previous utilities framework called monomer-css, now discontinued because conceptually very similar to Bootstrap 4 Utilities. Adding the latter and this package to your project, you can cover the same monomer-css functionalities with a better and lighter structure.

About

Extend the Bootstrap 4 Utilities with new classes!

Resources

Releases

No releases published

Packages

No packages published