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.