OVERVIEW

This is a stripped down and customized Bootstrap v5 variation with a refined set of styles and components. This module is used under the hood in our webshop . The module is refined for usage within Brixtol Textiles internal and public facing projects. This variation specifically is void of any components and mostly consists of the CSS logics.

REFINED BOOTSTRAP

This variation uses custom naming conventions for classes in order to keep production bundles small without needing to purge. The constant breaking changes of Bootstrap is problematic and in order to negate complaints this has evolved to become a single point of control which we can depend upon while still being able to extend the base to different requirements.

USAGE

When using this variation you can either either leverage its defaults or create a per-project strap.scss file to overwrite defaults. This flavor of Bootstrap is intended to be bundled along side project specific stylings, so the defaults are completely stripped and largely refactored. The main sass/* directory contains all the overwrites and refactors, the sass/bootstrap/* directory contains the hard-fork of Bootstrap and the _ prefixed files in the root of this directory are import facing.

Breakpoints responsive
The grid uses custom naming conventions of short-name variation and repurposes the Bootstrap grid system logic which is remains the most powerful and well thought through grid available on the web. 
*-xxs
XX Small 
*-xs
X Small 
*-sm
Small 
*-md
Medium 
*-lg
Large 
*-xl
X Large 
*-xxl
XX Large
html 
<div class="row">
  <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-3"></div>
</div>
scss 
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
Grid responsive
The grid uses custom naming conventions of short-name variation and repurposes the Bootstrap grid system logic which is remains the most powerful and well thought through grid available on the web.
Columns 
.col-auto
.col-1
.col-2
.col-3
.col-4
.col-4
.col-5
.col-6
.col-7
.col-8
.col-9
.col-10
.col-11
.col-12
.col
Flex 
.flex
Flex Fill 
.flex-row
Flex Direction Row 
.flex-col
Flex Direction Column 
.flex-row-rev
Flex Direction Row Reverse 
.flex-col-rev
Flex Direction Column Reverse
Jusitfy Content 
.jc-start
Justify Content Start 
.jc-end
Justify Content End 
.jc-between
Justify Content Space Between 
.jc-around
Justify Content Space Around 
.jc-even
Justify Content Space Evenly
Align Content 
.ac-start
Align Content Flex Start 
.ac-end
Align Content Flex End 
.ac-center
Align Content Center 
.ac-between
Align Content Space Between 
.ac-around
Align Content Space Around 
.ac-stretch
Align Content Stretch
Align Self 
.as-auto
Align Self Auto 
.as-start
Align Self Flex Start 
.as-end
Align Self Flex End 
.as-center
Align Self Center 
.as-between
Align Self Baseline 
.as-stretch
Align Self Stretch
Align Items 
.ai-start
Align Items Flex Start 
.ai-end
Align Items Flex End 
.ai-center
Align Items Center 
.ai-base
Align Items Basline 
.ai-stretch
Align Items Stretch
html 
<!-- Renders a border in gray -->
<div class="bd"></div>

<!-- Renders a border on the bottom in black -->
<div class="bb bc-black"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br bt"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br br-md-0 br-lg"></div>

<!-- Renders a .2rem thick border on the top in green -->
<div class="bt bw-2 bc-green"></div>

<!-- Renders a border on the right and left top in green -->
<div class="bl br bc-green"></div>

<!-- Renders a border in gray in mobileand desktop but not tablet -->
<div class="b b-sm-0 b-lg"></div>
scss 
/* -------------------------------------------- */
/* BORDER COLORS                                */
/* -------------------------------------------- */

$border-color: $gray-300;
$border-colors: (

  black: $black,
  white: $white,
  red: $red,
  gray: $gray-400,
  green: $green

);

/* -------------------------------------------- */
/* BORDERS                                      */
/* -------------------------------------------- */

$border-width:                .07rem;
$border-style:                solid;
$border-color-translucent:    rgba($black, .175);
$border-widths: (

  1: .1rem,
  2: .2rem

);
Spacing responsive
The spacing utilities use different naming convention than that of Bootstrap, employing the original are far more logical references. Spacings are all responsive and apply !important suffixes.
Padding 0 - 5 
.p-*
All 
.px-*
Left + Right 
.py-*
Top + Bottom 
.pl-*
Left 
.pt-*
Top 
.pr-*
Right 
.pb-*
bottom 
.pl-*
Left
Margin 0 - 5 
.m-*
All 
.mx-*
Left + Right 
.my-*
Top + Bottom 
.ml-*
Left 
.mt-*
Top 
.mr-*
Right 
.mb-*
bottom 
.ml-*
Left
Margin Auto 
.mx-*-auto
Left + Right 
.my-*-auto
Top + Bottom 
.mt-*-auto
Top 
.mr-*-auto
Right 
.mb-*-auto
Bottom 
.ml-*-auto
Left
html 
<!-- Renders a border in gray -->
<div class="bd"></div>

<!-- Renders a border on the bottom in black -->
<div class="bb bc-black"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br bt"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br br-md-0 br-lg"></div>

<!-- Renders a .2rem thick border on the top in green -->
<div class="bt bw-2 bc-green"></div>

<!-- Renders a border on the right and left top in green -->
<div class="bl br bc-green"></div>

<!-- Renders a border in gray in mobileand desktop but not tablet -->
<div class="b b-sm-0 b-lg"></div>
scss 
/* -------------------------------------------- */
/* BORDER COLORS                                */
/* -------------------------------------------- */

$border-color: $gray-300;
$border-colors: (

  black: $black,
  white: $white,
  red: $red,
  gray: $gray-400,
  green: $green

);

/* -------------------------------------------- */
/* BORDERS                                      */
/* -------------------------------------------- */

$border-width:                .07rem;
$border-style:                solid;
$border-color-translucent:    rgba($black, .175);
$border-widths: (

  1: .1rem,
  2: .2rem

);
Display responsive 
.d-none
Display None 
.d-block
Display Block 
.d-unset
Display Unset 
.d-flex
Display Flex 
.d-grid
Display Grid 
.d-inline
Display Inline 
.d-flex-inline
Display Inline Flex 
.d-inline-block
Display Inline Block 
.d-table
Display Table 
.d-table-row
Display Table Row 
.d-table-cell
Display Table Cell
html 
<!-- Renders a border in gray -->
<div class="bd"></div>

<!-- Renders a border on the bottom in black -->
<div class="bb bc-black"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br bt"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br br-md-0 br-lg"></div>

<!-- Renders a .2rem thick border on the top in green -->
<div class="bt bw-2 bc-green"></div>

<!-- Renders a border on the right and left top in green -->
<div class="bl br bc-green"></div>

<!-- Renders a border in gray in mobileand desktop but not tablet -->
<div class="b b-sm-0 b-lg"></div>
scss 
/* -------------------------------------------- */
/* BORDER COLORS                                */
/* -------------------------------------------- */

$border-color: $gray-300;
$border-colors: (

  black: $black,
  white: $white,
  red: $red,
  gray: $gray-400,
  green: $green

);

/* -------------------------------------------- */
/* BORDERS                                      */
/* -------------------------------------------- */

$border-width:                .07rem;
$border-style:                solid;
$border-color-translucent:    rgba($black, .175);
$border-widths: (

  1: .1rem,
  2: .2rem

);
Font Family responsive
font-family
There are 3 available font family references. 
.ff-head
This is the headings type font!
This is the headings type font! 
.ff-body
This is the body (base) type font!
This is the body (base) type font! 
.ff-code
This is the code (pre) type font!
This is the code (pre) type font!
html 
<!-- Renders all text in base font-->
<p class="ff-base"></p>

<!-- Renders all text in heading font -->
<p class="ff-heading"></p>

<!-- Renders all text in code font -->
<p class="ff-code"></p>
scss 
/* -------------------------------------------- */
/* FONT FAMILY                                  */
/* -------------------------------------------- */

$font-family-base:            Helvetica, sans-serif;
$font-family-heading:         Arial, sans-serif !default;
$font-family-code:            SFMono-Regular, Menlo, Monaco, "Courier New", Courier, monospace;


// HEADINGS FONT FAMILY REFERENCES HEADING
//
$headings-font-family:        $font-family-heading;

// BUTTON FONT FAMILY REFERENCES HEADING
//
$btn-font-family:             $font-family-heading !default;

// INPUT FONT FAMILY REFERENCES HEADING
//
$input-font-family:           $headings-font-family !default;
Font Sizes responsive
font-size
There are 5 available font size utility classes available. The default font size is set at Medium (Base). 
.fs-xs
X Small 
.fs-sm
Small 
.fs
Medium (Base) 
.fs-lg
Large 
.fs-xl
X Large
html 
<!-- Renders all text is xs -->
<p class="fs-xs"></p>

<!-- Renders all text in xl -->
<p class="fs-xl"></p>
scss 
/* -------------------------------------------- */
/* FONT SIZES                                   */
/* -------------------------------------------- */

$font-size-base:              1rem !default;
$font-size-xs:                $font-size-base * .875 !default;
$font-size-sm:                $font-size-base * .875 !default;
$font-size-lg:                $font-size-base * 1.25 !default;
$font-size-xl:                $font-size-base * 1.50 !default;
Font Style responsive
font-style
Font style classes can either normalize text content of apply italic. 
.normal
Normal 
.italic
Italic
html 
<!-- Makes the text italic -->
<p class="italic"></p>

<!-- Removes the italic style -->
<i class="normal"></i>
scss
Font Weight responsive
font-weight
Font weights are distributed in a 3 variation manner. The naming convention used is .fw-thin for the lightest possible weight, .fw-base for the normal font weight and .fw-bold for the thickest (or boldest) font weight. 
.fw-thin
Thin (200) 
.fw-base
Base (400) 
.fw-bold
Bold (600)
html 
<!-- Makes the text bold, ie: 600 -->
<p class="fw-bold"></p>

<!-- makes the text lightest, ie: 100 -->
<i class="fw-lighter"></i>
scss
Font Colors responsive
color 
.fc-white
White 
.fc-black
Black 
.fc-gray
Gray 
.fc-pink
Pink 
.fc-red
Red 
.fc-green
Green 
.fc-orange
Orange
html 
<!-- Renders all text in black-->
<span class="fc-black"></span>

<!-- Renders all text in red -->
<span class="fc-red"></span>

<!-- Renders all text in gray -->
<span class="fc-gray"></span>
scss 
/* -------------------------------------------- */
/* FONT COLORS                                  */
/* -------------------------------------------- */

$font-colors: (
  "black": $black,
  "white": $white,
  "green": $green,
  "gray": $gray-500,
  "red": $red,
  "orange": $orange
) !default;
Text Align responsive
text-align 
.tl
Text Left 
.tc
Text Center 
.tr
Text Right 
.tj
This sentence will justify when newlines appear!
html 
<!-- Renders the text to left in mobile and center in tablet -->
<p class="tl tc-md"></p>

<!-- Renders the text to right in mobile, left in tablet and center in desktop -->
<p class="tr tl-md tc-lg"></p>

<!-- Render the text in the center always -->
<p class="tc"></p>

<!-- Removes text in a justified manner -->
<p class="tj"></p>
scss
Text Transform responsive
text-transform 
.upper
Uppercase 
.lower
LOWERCASE 
.upcase
capitalize (all the first letters are uppercase) 
.uncase
Transform None
html 
<!-- Renders the text in UPPERCASE -->
<span class="upper"></span>

<!-- Renders the text in lowercase -->
<span class="lower"></span>

<!-- Makes the first letter Upcase -->
<span class="upcase"></span>

<!-- Removes any casing style -->
<span class="uncase"></span>
scss
Text Decoration responsive
text-decoration 
.underline
Underline 
.strike
Strike Through 
.undecorate
None
html 
<!-- Renders the text with an underline -->
<span class="underline"></span>

<!-- Renders the text with an line through the middle -->
<span class="strike"></span>

<!-- Removes the underline -->
<a class="undecorate"></a>
scss 
// sass/_text.scss

$utilities: map-merge($utilities, (
  "text-decoration": (
    property: text-decoration,
    class: null,
    values: (
      strike: line-through,
      underline: underline,
      undecorate: none
    )
  )
)
Text Headings responsive
h1, h2, h3, h4, h5, h6 
.h1
h1 Heading 1 
.h2
h2 Heading 2 
.h3
h3 Heading 3 
.h4
h4 Heading 4 
.h5
h5 Heading 5 
.h6
h6 Heading 6
html 
<!-- heading h1 -->
<h1></h1>

<!-- heading h2 -->
<h2></h2>

<!-- makes the h1 heading a h4 size -->
<h1 class="h4"></h1>


<!-- makes the h6 heading a h1 size -->
<h6 class="h1"></h6>
scss
SCSS EXAMPLES text-headings 
$headings-letter-spacing:          $letter-spacing-heading;
$headings-font-family:             $font-family-heading;
$headings-margin-bottom:           $spacer * .5;
$headings-font-style:              null;
$headings-font-weight:             500;
$headings-line-height:             1.2;
$headings-color:                   null;
$headings-uppercase:               true;

$h1-font-size:                     $font-size-base * 2.5;
$h2-font-size:                     $font-size-base * 2;
$h3-font-size:                     $font-size-base * 1.75;
$h4-font-size:                     $font-size-base * 1.5;
$h5-font-size:                     $font-size-base * 1.25;
$h6-font-size:                     $font-size-base;
Svg responsive
style
SVG Icons embedded within the variation are available as SASS Functions and applied to background-image properties. The icons are also available as CSS Variables and expose a value of url() which can be used inline via style attributes.
Icon
CSS Variable
SASS Function
Plus 
--svg-plus: url(...)
icon-plus($color: currentColor,$width: 1)
Minus 
--svg-minus: url(...)
icon-minus($color: currentColor, $width: 1)
Check 
--svg-check: url(...)
icon-check($color: currentColor, $width: 1)
Cross 
--svg-cross: url(...)
icon-cross($color: currentColor, $width: 1)
Square 
--svg-square: url(...)
icon-square($color: currentColor, $width: 1)
Arrow 
--svg-arrow: url(...)
icon-arrow($color: currentColor, $width: 1)
Menu 
--svg-menu: url(...)
icon-menu($color: currentColor, $width: 1)
Image 
--svg-image: url(...)
icon-image($color: currentColor, $width: 1)
Search 
--svg-search: url(...)
icon-search($color: currentColor)
Delete 
--svg-delete: url(...)
icon-delete($color: currentColor, $width: 1)
Bell 
--svg-bell: url(...)
icon-bell($color: currentColor, $width: 1)
html 
<!-- Rendering an Icon in markup can be done via style attribute -->
<div style="background-image: var(--svg-bell);"></div>
scss 
icon-plus($color: currentColor, $width: 1.5);
icon-minus($color: currentColor, $width: 1.5);
icon-check($color: currentColor, $width: 1.5);
icon-bell($color: currentColor, $width: 1.5);

// etc etc
Aspect Ratio responsive
img picture
Aspect ratio classes, mixins and helper utilities. Aspect ratio can be controlled using inline CSS variables and .aspect-ratio class. There are multiple ways to leverage this utility.
Aspect Ratio / Preset 
.ratio .700x1200
        
          $aspect-ratio-bg-svg: url('*');
Aspect Ratio / CSS Variable
In the above example we are setting the aspect ratio via the inline style="*" attribute. We pass a CSS variable and calc() function which will be digested by the .ratio class name. The --ratio variable requires height / width calc(height / width) 
<picture class="ratio" style="--ratio: calc(800 / 1240)">
  <source srcset="*" media="*">
  <img src="*">
</picture>
No Placeholder
Hide the background image placeholder SVG 
        
          .ratio .no-placeholder
        
        
          
            $aspect-ratio-bg-svg: null
          
          
<picture class="ratio no-placeholder">
</picture>
html 
<!-- Aspect Ratio with Preset-->
<picture class="ratio ratio-720x1200">
  <source srcset="*" media="*">
  <source srcset="*" media="*">
  <source srcset="*" media="*">
  <img src="*">
</picture>

<!-- Aspect Ratio with CSS Variable -->
<picture class="ratio" style="--ratio: calc(720 / 1200);">
  <source srcset="*" media="*">
  <source srcset="*" media="*">
  <source srcset="*" media="*">
  <img src="*">
</picture>
scss 
// ASPECT RATIO
//
// This allows for background images
//
$aspect-ratio-bg-svg: null
$aspect-ratio-bg-color: $gray-200;
$aspect-ratio-bg-size: 20%;

// RATIO PRESETS
//
// This will generate class names
//
$aspect-ratios: (
  "720x1200": calc(720 / 1200),
);

// MIXINS
//
// This is a mixin function you can call to generate ratio
//
aspect-ratio($height: 1000, $width: 500);
Background Colors responsive
background-color 
.bg-transparent
Transparent 
.bg-white
White 
.bg-ivory
Ivory 
.bg-gray
Gray 
.bg-black
Black
html 
<!-- Renders a transparent background -->
<div class="bg-transparent"></div>

<!-- Renders a black background -->
<div class="bg-black"></div>
scss 
/* -------------------------------------------- */
/* BACKGROUND COLORS                            */
/* -------------------------------------------- */

$background-colors: (
  "transparent": transparent,
  "white": $white,
  "black": $black,
  "ivory": $gray-100,
  "gray": $gray-400
) !default;
Box Shadow responsive
box-shadow
Box shadows uses the same logic as found in the Bootstrap utility but applies a different class name approach using suffixed -number levels. 
.bs-1
Box Shadow 1 
.bs-2
Box Shadow 2 
.bs-3
Box Shadow 3
html 
<!-- Small Box Shadow -->
<div class="bs-1"></div>

<!-- Medium (normal) Box Shadow -->
<div class="bs-2"></div>

<!-- Large Box Shadow -->
<div class="bs-3"></div>
scss 
/* -------------------------------------------- */
/* BORDER COLORS                                */
/* -------------------------------------------- */

$border-color: $gray-300;
$border-colors: (

  black: $black,
  white: $white,
  red: $red,
  gray: $gray-400,
  green: $green

);

/* -------------------------------------------- */
/* BORDERS                                      */
/* -------------------------------------------- */

$border-width:                .07rem;
$border-style:                solid;
$border-color-translucent:    rgba($black, .175);
$border-widths: (

  1: .1rem,
  2: .2rem

);
Borders responsive
border-* border
Border widths, sizes and colors employ custom naming conventions and are responsive. The single class name .b is used to apply a full border whereas suffixed directions of t (top), b (bottom), l (left) and r (right) are used to apply borders according to angle. 
.bd
Border 
.bl
Border Left 
.br
Border Right 
.bt
Border Top 
.bb
Border Bottom 
.bx
Border Left + Right 
.by
Border Top + Bottom 
.bd
Gray (default) 
.bc-white
Border White 
.bc-black
Border Black 
.bc-red
Border Red 
.bc-green
Border Green 
.bd
0.07rem 
.bw-1
0.1rem 
.bw-2
.2rem
html 
<!-- Renders a border in gray -->
<div class="bd"></div>

<!-- Renders a border on the bottom in black -->
<div class="bb bc-black"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br bt"></div>

<!-- Renders a border on the right and border on the top -->
<div class="br br-md-0 br-lg"></div>

<!-- Renders a .2rem thick border on the top in green -->
<div class="bt bw-2 bc-green"></div>

<!-- Renders a border on the right and left top in green -->
<div class="bl br bc-green"></div>

<!-- Renders a border in gray in mobileand desktop but not tablet -->
<div class="b b-sm-0 b-lg"></div>
scss 
/* -------------------------------------------- */
/* BORDER COLORS                                */
/* -------------------------------------------- */

$border-color: $gray-300;
$border-colors: (

  black: $black,
  white: $white,
  red: $red,
  gray: $gray-400,
  green: $green

);

/* -------------------------------------------- */
/* BORDERS                                      */
/* -------------------------------------------- */

$border-width:                .07rem;
$border-style:                solid;
$border-color-translucent:    rgba($black, .175);
$border-widths: (

  1: .1rem,
  2: .2rem

);
Radius responsive
border-radius 
.rd
Radius (default) 
.rd-1
Radius x1 
.rd-2
Radius x2 
.rd-3
Radius x3 
.rd-t
Radius Top 
.rd-r
Radius Right 
.rd-b
Radius Bottom 
.rd-l
Radius Left 
.circle
Circle
html 
<!-- Applied a default radius -->
<div class="bd rd"></div>

<!-- Applies a radius of 50% that is 3px thick -->
<div class="bd-3 circle"></div>
scss

The variables will be transformed by utitlities.

/* -------------------------------------------- */
/* BORDERS RADIUS                               */
/* -------------------------------------------- */

$border-radius:               .25rem !default;
$border-radius-sm:            .2rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-pill:          50rem !default;
Buttons responsive
button
Button Outlined

Buttons default to using the outlined style.

.btn-gray
.btn-black
.btn-red
.btn-green
Button States

The button states can infer something. Toggle .is-loding in js 

.is-loading
.disabled
Button Filled Colors

Unlike Bootstrap, in order to use solid colors we pass bg-* 

.bg-gray
.bg-black
.bg-red
.bg-green
Button Close

The .btn-close uses a input button bg-* 

.btn-close
Button Sizes

Buttons can be different sizes 

.btn-sm
.btn-md
.btn-lg
html
Buttons classes can also be applied to href elements. 
<!-- Renders a button without style, ie: blank button -->
<button type="button" class="btn">Click</button>

<!-- Renders a black button -->
<button type="button" class="btn btn-black">Click</button>

<!-- Renders an outlined button -->
<button type="button" class="btn btn-outline-black">Click</button>

<!-- Renders an xl sized button with radius -->
<button type="button" class="btn btn-xl rd">Click</button>

<!-- Renders a button to a <a href="*"> element -->
<a class="btn btn-outline-black btn-sm">Click</a>

<!-- Render the close button - uses <input> instead of <button> -->
<input type="button" class="btn btn-close">
scss 
$btn-border-radius:           none;
$btn-border-radius-sm:        none;
$btn-border-radius-lg:        none;

$btn-text-uppercase:          true;
$btn-font-family:             $font-family-heading;
$btn-font-size:               $font-size-sm;
$btn-font-size-sm:            $font-size-xs;
$btn-font-size-lg:            $font-size-lg;
$btn-line-height:             $line-height-base;

$btn-focus-color:             $transparent;
$btn-focus-width:             .25rem;
$btn-focus-opacity:           .25;

$btn-disabled-opacity:        .65;

$btn-padding-y-sm:            .2rem;
$btn-padding-y:               .375rem;
$btn-padding-y-lg:            .5rem;
$btn-padding-x-sm:            .45rem;
$btn-padding-x:               .75rem;
$btn-padding-x-lg:             1rem;

$btn-white-space:              nowrap; // Set to `nowrap` to prevent text wrapping
Basic level href logics. Most the Bootstrap helpers and utilities are stripped out. We only want the bare minimum here. The list-list is a re-write and only supports nested href nodes.
Link HREF 
<a href="*">
Default Link
Link cover

This is the stretched link logic but uses a the .link class naming convention. Hover over the outer div with black border and the Link will be detected. It requires the parent element uses a postion relative. 

.link
Link
Link LIST 
.link-list
One (disabled) Two Three Four
html 
<!-- Default Link -->
<a href="#">Some Link</a>

<!-- Link cover requires parent element to be "relative" -->
<div class="rel">
  <a href="#" class="link">Some Link</a>
</div>

<!-- Link List -->
<div class="link-list">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>
scss
Lists responsive
al, ol, ul
Default 
ul > li
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
List Dash 
.list-dash
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
List Lined 
.list-lined
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
List Inline 
.list-inline
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
Pipe Inline 
.list-pipe

Inline pipes are not responsive and when overflow occurs the scrollbar will be hidden.

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
html 
<!-- Default List -->
<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

<!-- Pipe List -->
<ul class="list-pipe">
  <li>Item</li>
  <li>Item</li>
</ul>

<!-- Dash List -->
<ul class="list-dash">
  <li>Item</li>
  <li>Item</li>
</ul>


<!-- List Inline -->
<ul class="list-inline">
  <li>Item</li>
  <li>Item</li>
</ul>

<!-- Lined List -->
<ul class="list-lined">
  <li>Item</li>
  <li>Item</li>

  <!-- Annotate with aria-label for right badge -->
  <li aria-label="badge">Item</li>

</ul>
scss
Images responsive
html
scss
Spinner responsive 
      .spinner
    
      .spinner-sm
html 
<!-- renders a small spinner animation -->
<span class="spinner-sm"></span>

<!-- renders a spinner animation -->
<span class="spinner"></span>
scss

The size can be adjusted, like (for example) the spinner thickness.

/* -------------------------------------------- */
/* SPINNER                                      */
/* -------------------------------------------- */

$spinner-width:               2rem !default;
$spinner-width-sm:            1rem !default;
$spinner-height:              $spinner-width !default;
$spinner-height-sm:           $spinner-width-sm !default;
$spinner-vertical-align:      -.125em !default;
$spinner-border-width:        .25em !default;
$spinner-border-width-sm:     .2em !default;
$spinner-border-color:        $gray-300;
$spinner-animation-speed:     .75s !default;
Tooltip responsive
data-tooltip
Tooltips are a hardfork of Balloons but the resulting CSS has been stripped and removed of most features. Tooltips ase a combination of aria-label and data-tooltip attribute annotations. The logic is exteremly simply. The $tooltip-use-outline will invert the styling. 
data-tooltip="top"
Tooltip Top 
data-tooltip="bottom"
Tooltip Bottom 
data-tooltip="left"
Tooltip position left 
data-tooltip="right"
Tooltip position right 
data-tooltip="top-left"
Tooltip Top Left 
data-tooltip="top-right"
Tooltip Top Left 
data-tooltip="bottom-left"
Tooltip Bottom Left 
data-tooltip="bottom-right"
Tooltip Bottom Right
html 
<!-- Tooltip appears at the top of the element -->
<button aria-label="Tooltip Top" data-tooltip="top">
  Hover Me
</button>

<!-- Tooltip appears at the bottom of the element -->
<button aria-label="Tooltip Bottom" data-tooltip="bottom">
  Hover Me
</button>

<!-- Tooltip appears at the left of the element -->
<button aria-label="Tooltip left" data-tooltip="left">
  Hover Me
</button>

<!-- Tooltip appears at the right of the element -->
<button aria-label="Tooltip right" data-tooltip="right">
  Hover Me
</button>
scss 
// CONTROL TOOLTIP
//
// These variables control the tooltip styling applied
//
$tooltip-bg:                   $black;
$tooltip-font-family:          $font-family-base;
$tooltip-font-style:           normal;
$tooltip-font-size:            $font-size-xs;
$tooltip-font-color:           $white;
$tooltip-padding-y:            .1rem;
$tooltip-padding-x:            .5rem;
$tooltip-arrow-size:           5px;
$tooltip-radius:               0;

// CONTROL ANIMATION
//
// Use this to disable the fade animation
//
$tooltip-animation:            true;

// CONTROL OUTLINE
//
// Use this to enable outline styling
//
$tooltip-border-width:         .01rem;
$tooltip-use-outline:          true;
Forms responsive
Forms have been heavily modified in the variation. The vast majority of customisation have been stripped from Bootstrap and the aesthetic follows a simple and basic flow with some additional features made available. Below is a basic side by side comparison of what to expect. The variables controlling field generation can customize the outputs but only slightly.
INPUTS

Demonstrates input type form fields. The examples are used to showcase precision height, width and pseudo overwrites.

Text Input

Basic text input field

Search Input

Search input field with customisations

Float Input

Basic text input field using float placeholder

Float Search

Basic text input field using float placeholder

Select

The native select form element

Dropdown

Dynamic dropdown select component which replicates a select

Switch Checkbox

Switch checkbox form component

NUMBER

Incremental form component which applied type number

Native Checkbox

Native default checkbox using custom SVG icons

Native Radio

Native default radio using custom SVG icons

html
scss
Form Dropdown responsive
The from dropdown .fm-dropdown class is for usage within forms designed to work together with the Stimulus Dropdown controller. The structure leverages type="radio" and label inputs to infer a selection. In addition, you can annotate the label with a aria-label which will render a badge to the right side. 
.fm-dropdown
.fm-dropdown .disabled
.fm-dropdown .selected
.fm-dropdown .is-valid
.fm-dropdown .is-invalid
.fm-dropdown .is-open
html 
<!-- Form Dropdown List -->
<div class="fm-dropdown">

  <!-- Button is always first and required (no class is needed) -->
  <button type="button">Dropdown Select</button>

  <!-- Wrap the dropdown in a form fieldset -->
  <fieldset>

    <!-- Each item must use a "label" element, the "for" attribute must point to the "input" id -->
    <label for="1">Option 1</label>
    <input id="1" type="radio">

    <!-- When a value is selected, include a "selected" class -->
    <label class="selected" for="2">Option 2</label>
    <input id="2" type="radio">

    <!-- Optionally disable a list item using a "disabled" class -->
    <label class="disabled" for="3">Option 3</label>
    <input id="3" type="radio">

    <!-- Use the "aria-label" attribute to insert a bade on right side -->
    <label aria-label="Some Label" for="4">Option 4</label>
    <input id="4" type="radio">

    <label for="5">Option 5</label>
    <input id="5" type="radio">

    <label for="6">Option 6</label>
    <input id="6" type="radio">

  </fieldset>
</div>
scss
Form Input responsive
Form input fields account for any element using the input tag. The classes are mostly inherited from Bootstrap with refined naming conventions and SVG validation icon changes. There are only 2 sizes available in form inputs, small (fm-sm) and the normal default (base) sizing.
Inputs 
.fm-input
.fm-input .is-valid
.fm-input .is-invalid
Sizes 
.fm-input .fm-sm
.fm-input .fm-sm .is-valid
.fm-input .fm-sm .is-invalid
States 
readonly
disabled
disabled readonly
html 
<!-- Default Input -->
<input class="fm-input" placeholder="Default Input" type="text">

<!-- Small Input -->
<input class="fm-input fm-sm" placeholder="Small Input" type="text">

<!-- Large Input -->
<input class="fm-input fm-lg" placeholder="Large Input" type="text">

<!-- Default Input Valid -->
<input class="fm-input is-valid" placeholder="Valid Input" type="text">

<!-- Default Input Invalid -->
<input class="fm-input is-invalid" placeholder="Invalid Input" type="text">

<!-- Small Input Valid -->
<input class="fm-input fm-sm is-valid" placeholder="Valid Input Small" type="text">
scss
SCSS EXAMPLES form-input 
// SPACING CONTROL
//
// This can typically be ignored and not adjusted.
//
$input-padding-y:                 .375rem;
$input-padding-y-sm:              .25rem;
$input-padding-y-lg:              .5rem;
$input-padding-x:                 .75rem;
$input-padding-x-sm:              .5rem;
$input-padding-x-lg:              1rem;

// FONT CONTROL
//
// Adjust the input fonts here. Probably best to skip adjusting font-sizes.
//
$input-text-uppercase:            false;
$input-font-family:               $headings-font-family;
$input-font-weight:               $font-weight-base;
$input-font-size:                 $font-size-base;
$input-font-size-sm:              $font-size-sm;
$input-font-size-lg:              $font-size-lg;
$input-line-height:               $line-height-base;

// COLOR CONTROL
//
// Adjust the input background, borders and font colors
//
$input-bg:                       $body-bg;
$input-color:                    $body-color;
$input-disabled-bg:              $gray-100;
$input-disabled-border-color:    $gray-200;

// BORDER CONTROL
//
// Adjust the input borders. Probably best to skip adjusting.
//
$input-border-color:             $gray-400;
$input-border-width:             $border-width;
$input-box-shadow:               $box-shadow-inset;

// BORDER RADIUS
//
// Input borders do not use radius by default in the strap.
//
$input-border-radius:            0;
$input-border-radius-sm:         0;
$input-border-radius-lg:         0;

// FOCUS CONTROL
//
// These variables control the outline and focused state on the inputs.
//
$input-focus-bg:                $input-bg;
$input-focus-border-color:      $black;
$input-focus-color:             $input-color;
$input-focus-width:             $border-width;
$input-focus-box-shadow:        none;

// MISC CONTROL
//
// Other noteable variables for controlling input.
//
$input-btn-focus-box-shadow-lined:              0 0 0 0;
$input-placeholder-color:                       $gray-500;
$input-plaintext-color:                         $body-color;
Form Lined responsive
Annotating form classes with fm-lined will result in a bottom line based style to form inputs, selects and dropdowns. This lined style is used as an UI aesthetic in the Brixtol Textiles webshop.
Input Horizontal Rule 
.fm-input .fm-lined
.fm-input .fm-lined .is-valid
.fm-input .fm-lined .is-invalid
Select Lined 
.fm-select .fm-lined
.fm-select .fm-lined .is-valid
.fm-select .fm-lined .is-invalid
Dropdown Lined 
.fm-dropdown .fm-lined
.fm-dropdown .fm-lined .is-valid
.fm-dropdown .fm-lined .is-invalid
Button Lined Groups 
.fm-group .fm-lined > .fm-input
.fm-group .fm-lined > .fm-input
.fm-group .fm-lined > .fm-input .is-valid
.fm-group .fm-lined > .fm-input .is-invalid
Select Lined Groups 
.fm-input
.fm-input
.fm-input .is-valid
.fm-input .is-invalid
html
scss
Form Group responsive
Inputs 
.fm-group
@ 
.fm-float .fm-lg
@
Sizes
Buttons 
.fm-group
.fm-float .fm-lg
html 
<!-- Default Input -->
<input class="fm-input" placeholder="Default Input" type="text">

<!-- Small Input -->
<input class="fm-input fm-sm" placeholder="Small Input" type="text">

<!-- Large Input -->
<input class="fm-input fm-lg" placeholder="Large Input" type="text">

<!-- Default Input Valid -->
<input class="fm-input is-valid" placeholder="Valid Input" type="text">

<!-- Default Input Invalid -->
<input class="fm-input is-invalid" placeholder="Invalid Input" type="text">

<!-- Small Input Valid -->
<input class="fm-input fm-sm is-valid" placeholder="Valid Input Small" type="text">
scss
SCSS EXAMPLES form-group 
// SPACING CONTROL
//
// This can typically be ignored and not adjusted.
//
$input-padding-y:                 .375rem;
$input-padding-y-sm:              .25rem;
$input-padding-y-lg:              .5rem;
$input-padding-x:                 .75rem;
$input-padding-x-sm:              .5rem;
$input-padding-x-lg:              1rem;

// FONT CONTROL
//
// Adjust the input fonts here. Probably best to skip adjusting font-sizes.
//
$input-text-uppercase:            false;
$input-font-family:               $headings-font-family;
$input-font-weight:               $font-weight-base;
$input-font-size:                 $font-size-base;
$input-font-size-sm:              $font-size-sm;
$input-font-size-lg:              $font-size-lg;
$input-line-height:               $line-height-base;

// COLOR CONTROL
//
// Adjust the input background, borders and font colors
//
$input-bg:                       $body-bg;
$input-color:                    $body-color;
$input-disabled-bg:              $gray-100;
$input-disabled-border-color:    $gray-200;

// BORDER CONTROL
//
// Adjust the input borders. Probably best to skip adjusting.
//
$input-border-color:             $gray-400;
$input-border-width:             $border-width;
$input-box-shadow:               $box-shadow-inset;

// BORDER RADIUS
//
// Input borders do not use radius by default in the strap.
//
$input-border-radius:            0;
$input-border-radius-sm:         0;
$input-border-radius-lg:         0;

// FOCUS CONTROL
//
// These variables control the outline and focused state on the inputs.
//
$input-focus-bg:                $input-bg;
$input-focus-border-color:      $black;
$input-focus-color:             $input-color;
$input-focus-width:             $border-width;
$input-focus-box-shadow:        none;

// MISC CONTROL
//
// Other noteable variables for controlling input.
//
$input-btn-focus-box-shadow-lined:              0 0 0 0;
$input-placeholder-color:                       $gray-500;
$input-plaintext-color:                         $body-color;
Form Checkbox responsive
Checkbox (checkmarks) borrow minor logic from Bootstrap v5.2 but for the most part have been refactored. The main changes are class defintions, wherein checkboxes use a fm-toggle class wrapper. The fields require a id be applied to the inputs and for attribute to label as they are identified as siblings. The items use the short-name fm- and need to be nested in a .fm-toggle node.
Inputs 
.fm-checkbox
.fm-checkbox .is-valid
.fm-checkbox .is-invalid
Sizes 
.fm-check .fm-lg
.fm-check .fm-lg
States 
checked
checked disabled
disabled
Layouts 
.fm-check reverse
html 
<!-- Default Checkmark -->
<div class="fm-toggle">
  <input class="fm-checkbox" type="checkmark" id="xx" name="xx">
  <label class="fm-label" for="xx">Label</label>
</div>

<!-- Default checkmark with label at front -->
<div class="fm-toggle reverse">
  <input class="fm-checkbox" type="checkmark" id="xx" name="xx">
  <label class="fm-label" for="xx">Label</label>
</div>
scss 
// SPACING CONTROL
//
// This can typically be ignored and not adjusted.
//
$form-check-input-width:                        1rem;
$form-check-min-height:                         $font-size-base * $line-height-base;
$form-check-padding-start:                      $form-check-input-width + .5rem;
$form-check-margin-bottom:                      .125rem;
$form-check-label-color:                        null;
$form-check-label-cursor:                       pointer;
$form-check-label-spacing:                      .75rem;
$form-check-transition:                         null;

$form-check-input-active-filter:                $body-bg;
$form-check-input-bg:                           $input-bg;
$form-check-input-border:                       $border-width $border-style $input-border-color;
$form-check-input-border-radius:                0;
$form-check-radio-border-radius:                0;

// FOCUS CONTROL
//
// This will control the focus state of a checkmark
//
$form-check-input-focus-border:                 $black;
$form-check-input-focus-box-shadow:             none;

// SVG ICON CONTROL
//
// This is used for the styling of the cross icon
//
$form-check-input-checked-color:                $black;
$form-check-input-checked-bg-color:             $transparent;
$form-check-input-checked-border-color:         $black;
$form-check-input-checked-bg-image:             icon-check($form-check-input-checked-color);

$form-check-input-disabled-opacity:             .5;
$form-check-label-disabled-opacity:             $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:         $btn-disabled-opacity;
$form-check-inline-margin-end:                  1rem;
Form Range responsive
Form range inputs are almost identical to the logic found within Bootstrap. The differences are subtle but do exist. In most cases range sliders can be omitted to produce more leaner distributed stylesheets.
Inputs 
.fm-range
.fm-range .is-valid
.fm-range .is-invalid
Attributes
States 
disabled
html
HTML EXAMPLES form-range 
<!-- Default Input -->
<input class="fm-input" placeholder="Default Input" type="text">

<!-- Small Input -->
<input class="fm-input fm-sm" placeholder="Small Input" type="text">

<!-- Large Input -->
<input class="fm-input fm-lg" placeholder="Large Input" type="text">

<!-- Default Input Valid -->
<input class="fm-input is-valid" placeholder="Valid Input" type="text">

<!-- Default Input Invalid -->
<input class="fm-input is-invalid" placeholder="Invalid Input" type="text">

<!-- Small Input Valid -->
<input class="fm-input fm-sm is-valid" placeholder="Valid Input Small" type="text">
scss
Form Switch responsive
The form switch toggles are similar to Bootstraps official logic but have some minor refinments applied. The switches are forced as rectangular shapes and also offer additional sizing logic. 
.fm-switch
.fm-switch .fm-sm
.fm-switch .fm-lg
.fm-checkbox .is-valid
.fm-checkbox .is-invalid
html 
<!-- Renders a floating label -->
<div class="fm-switch">
  <input class="fm-check-input" id="xx" name="{{ name }}" type="checkbox">
  <label class="fm-check-label" for="xx">Label</label>
</div>
scss
SCSS EXAMPLES form-switch 
/* -------------------------------------------- */
/* FORM FLOATING                                */
/* -------------------------------------------- */

$form-floating-height:            add(3rem, $input-height-border);
$form-floating-line-height:       1.25 !default;
$form-floating-padding-x:         .75rem;
$form-floating-padding-y:         .85rem;
$form-floating-input-padding-t:   1.325rem !default;
$form-floating-input-padding-b:   .625rem !default;
$form-floating-label-opacity:     .65 !default;
$form-floating-label-transform:   scale(0.75) translateY(-.5rem) translateX(.35rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
Form Float responsive 
.fm-float
.fm-float .fm-lg
.fm-float
.fm-float .fm-lg
.fm-float .fm-lg
.fm-float .fm-lg
html 
<!-- Renders a floating label -->
<div class="fm-float mb-3">
  <input class="fm-input" id="xx" placeholder="name@example.com" type="email">
  <label for="xx">Text</label>
</div>

<!-- Renders a float label in textarea -->
<div class="fm-float mb-3">
  <textarea class="fm-input" id="xx" placeholder="Message" style="height: 100px"></textarea>
  <label for="xx">Textarea</label>
</div>

<!-- Renders a large float label that is invalid -->
<div class="fm-float fm-lg mb-3">
  <input class="fm-input is-invalid" id="xx" placeholder="name@example.com" type="email">
  <label for="xx">Text</label>
</div>

<!-- Renders a float label that is valid -->
<div class="fm-float mb-3">
  <input class="fm-input is-valid" id="xx" placeholder="name@example.com" type="email">
  <label for="xx">Text</label>
</div>

<!-- Renders a float Select label -->
<select class="fm-select" id="select">
  <option value="1">One</option>
  <option value="2">Two</option>
</select>
scss 
/* -------------------------------------------- */
/* FORM FLOATING                                */
/* -------------------------------------------- */

$form-floating-height:            add(3rem, $input-height-border);
$form-floating-line-height:       1.25 !default;
$form-floating-padding-x:         .75rem;
$form-floating-padding-y:         .85rem;
$form-floating-input-padding-t:   1.325rem !default;
$form-floating-input-padding-b:   .625rem !default;
$form-floating-label-opacity:     .65 !default;
$form-floating-label-transform:   scale(0.75) translateY(-.5rem) translateX(.35rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
Form Number responsive
Form Number Increment/Decrement 
.fm-number .fm-sm
.fm-number
Form Number Validations 
.fm-number .is-valid
.fm-number .is-invalid
html 
<!-- Form Number is wrapped within a fieldset -->
<fieldset class="fm-number">

  <!-- Decrement Button is expressed as an input -->
  <input class="decrement" type="button" onclick="this.parentNode.children[1].stepDown()">

  <!-- Form Number input -->
  <input class="fm-input" type="number" placeholder="0" min="0" name="quantity">

  <!-- Increment Button is expressed as an input -->
  <input class="increment" type="button" onclick="this.parentNode.children[1].stepUp()">

</fieldset>
scss
The modal component is a popup element which applies an overlay background and centered content element.
Default 
.modal
html
scss
Accordion responsive
Accordion collapse component leverages Relapse to provide functionality. The classes exported do not use the default .relapse class name, but instead use .accordion. The styles are inherited from vairous utilities and can be customized.
Simple Relapse
Opens Fold # 1
This is Fold #1
Opens Fold # 2
This is Fold #2
Opens Fold # 3
This is Fold #3
html 
<!-- Simple Accordion -->
<div
  class="accordion"
  data-controller="accordion"
  data-accordion-multiple-value="false"
  data-accordion-persist-value="true">

  <!-- PANEL 1 -->

  <details>
    <summary class="accordion-btn">
      Opens Fold # 1
    </summary>
    <div>
      <div class="p-4">
        This is Fold #1
      </div>
    </div>
  </details>

  <!-- PANEL 2 -->

  <details>
    <summary class="accordion-btn">
      Opens Fold # 1
    </summary>
    <div>
      <div class="p-4">
        This is Fold #1
      </div>
    </div>
  </details>

</div>
scss
SCSS EXAMPLES accordion 
// SPACING CONTROL
//
// This can typically be ignored and not adjusted.
//
$form-check-input-width:                        1rem;
$form-check-min-height:                         $font-size-base * $line-height-base;
$form-check-padding-start:                      $form-check-input-width + .5rem;
$form-check-margin-bottom:                      .125rem;
$form-check-label-color:                        null;
$form-check-label-cursor:                       pointer;
$form-check-label-spacing:                      .75rem;
$form-check-transition:                         null;

$form-check-input-active-filter:                $body-bg;
$form-check-input-bg:                           $input-bg;
$form-check-input-border:                       $border-width $border-style $input-border-color;
$form-check-input-border-radius:                0;
$form-check-radio-border-radius:                0;

// FOCUS CONTROL
//
// This will control the focus state of a checkmark
//
$form-check-input-focus-border:                 $black;
$form-check-input-focus-box-shadow:             none;

// SVG ICON CONTROL
//
// This is used for the styling of the cross icon
//
$form-check-input-checked-color:                $black;
$form-check-input-checked-bg-color:             $transparent;
$form-check-input-checked-border-color:         $black;
$form-check-input-checked-bg-image:             icon-check($form-check-input-checked-color);

$form-check-input-disabled-opacity:             .5;
$form-check-label-disabled-opacity:             $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:         $btn-disabled-opacity;
$form-check-inline-margin-end:                  1rem;
Carousel component leverages Embla to provide functionality. There is an exposed mixin within stylesheet which will generate class requires styles for carousel components. The stimulus controller exposes all accepted options via values on the controller which vscode will provide in auto-completions.
Mixin 
@include carousel(( slides: 2, margin: 10px, cursor: move ));
Example
Mixin Responsive 
// xxs, xs, sm, md, lg, xl, xxl
@include carousel((
  xs: (
    slides: 2,
    margin: 10px,
    cursor: pointer
  ),
  md: (
    slides: 2,
    margin: 0,
    cursor: move
  ),
  lg: (
    slides: 2,
    margin: 10px,
    cursor: pointer
  ),
  xl: (
    slides: 1,
    margin: 0,
    cursor: move
  )
))
Example
html 
<!-- Basic carousel with required markup -->
<div class="carousel" data-controller="carousel">
  <div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

<!-- Basic carousel with images -->
<div class="carousel" data-controller="carousel">
  <div>
    <div class="slide">

      <!-- Response Images with Ratio -->
      <div class="ratio ratio-*">
        <picture>
          <source srcset="*" media="*">
          <source srcset="*" media="*">
          <img src="*">
        </picture>
      </div>

    </div>
    <div class="slide">

      <!-- Response Images with Ratio -->
      <div class="ratio ratio-*">
        <picture>
          <source srcset="*" media="*">
          <source srcset="*" media="*">
          <img src="*">
        </picture>
      </div>

    </div>
  </div>
</div>
scss 
// Accepts a number
//
@include carousel(1)

// 2 slides with 20px margin
//
@include carousel((
  slides: 2,
  margin: 10px,
))

// 3 slides with 10px margin and cursor
//
@include carousel((
  slides: 2,
  margin: 10px,
  cursor: move
))

// Responsive slides to generate
//
@include carousel((
  xs: (
    slides: 2,
    margin: 10px,
    cursor: pointer
  ),
  md: (
    slides: 1,
    margin: 0,
    cursor: move
  )
))