SpryCSS

SpryCSS aims to be a simple and customizable CSS Toolkit while being as lightweight as possible (Only 13kb gzipped).

The goal is to remove the messy and tedious task of coming up with class names for elements that just need simple layout styles and provide basic components to help you get up and running fast, but not try to do everything which can bloat your project. If an element needs more then just the basic utility styles then that element most likely should have a custom class name and custom styles in your CSS files.

SpryCSS does not use !important. So if a SpryCSS class is not working then chances are you have already set that style in a css file and therefore you should update the style there instead of overriding it in the html.

Support

Star Issue Watch

Compatibility

SpryCss uses :has() property which is not supported by all browsers yet. Find out which browsers support it here

You can use this Polyfill to add support until the browser supports it nativaly:

Getting Started and Installation

Using the CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ggedde/spry-css@2.3.23/dist/spry.min.css">

JS Only needed for Sliders

<script defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-css@2.3.23/dist/spry-slider.min.js"></script>

Using NPM and SCSS:

npm install @ggedde/spry-css

Then in your scss file import SpryCSS:

@import 'node_modules/@ggedde/spry-css/spry.scss';

Note: you may need to change the path to match your project's node_modules folder

Using Yarn and SCSS:

yarn add @ggedde/spry-css

Then in your scss file import SpryCSS:

@import 'node_modules/@ggedde/spry-css/spry.scss';

Note: you may need to change the path to match your project's node_modules folder

Overriding SCSS Variables:

To override the Spry Variables just declare the variables before you import the file.

@import 'your_variables.scss';
@import 'node_modules/@ggedde/spry-css/spry.scss';

SCSS Variables

Example Variables File:

// Specify each breakpoint size
$breakpoints: (
    md: 40em,
    lg: 80em,
);

// Specify each breakpoint gap size. <section> tags with get padding based on gap size.
// You must include one for each Breakpoint otherwise it will result in a Compile Error.
$gaps: (
    default: 1.25em,
    md: 2em,
    lg: 2.25em,
);

// Specify each color used in color-, bg-, border-, btn-
$colors: (
    "white":       #ffffff,
    "light":       #efefef,
    "medium":      #888888,
    "dark":        #444444,
    "primary":     #1494df,
    "warning":     #df8a22,
    "error":       #d52929,
    "success":     #09c347,
    "text":        #566067,
    "transparent": transparent,
);

// Specify each type tag and class like <h3> and .h3 etc.
$types: (
    body: ( font-family: Helvetica, font-size: clamp(.9em, 3vw, 1.0em), font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
    h1: ( font-size: 3.4em, font-weight: 400, line-height: 1.20 ),
    h2: ( font-size: 2.7em, font-weight: 300, line-height: 1.25 ),
    h3: ( font-size: 2.2em, font-weight: 300, line-height: 1.30 ),
    h4: ( font-size: 1.6em, font-weight: 300, line-height: 1.35 ),
    h5: ( font-size: 1.2em, font-weight: 300, line-height: 1.5 ),
    h6: ( font-size: 1.0em, font-weight: 300, line-height: 1.4 ),
);

// Specify each spacing that applies to Margin and Padding.  Ex .m-0, .m-1, .mx-3, .pt-3, .mt-n3, etc
$spacing: (
    0: 0em,
    1: .5em, 
    2: 1em, 
    3: 2em, 
    4: 3em,
    5: 4em,
);

// Specify each size that applies font-size and all elements using "em".
$sizes: (
    xl: 140%,
    lg: 120%, 
    md: 100%, 
    sm: 90%, 
    xs: 75%,
);

Accessing Variables in SCSS

You can access variables using map-get()

Examples:

p {
    color: map-get($colors, 'primary');
    margin-bottom: 1rem;
    @media screen and (min-width: map-get($breakpoints, 'md')) {
        margin-bottom: .5rem;
    }
}

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Emphasis Strong Underline Small Anchor

Unordered List

List Item 1 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
List Item 2 vero eos et accusam et justo duo dolores et ea rebum.
List Item 3 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Ordered List

List Item 1 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
List Item 2 vero eos et accusam et justo duo dolores et ea rebum.
List Item 3 lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Paragraph Small - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Paragraph Large - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Blockquote - At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- Blockquote, Cite

SCSS Variable

$types: (
    body: ( font-family: Helvetica, font-size: clamp(.9rem, 3vw, 1.0rem), font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4 ),
    h1: ( font-size: 3.4em, font-weight: 400, line-height: 1.20 ),
    h2: ( font-size: 2.7em, font-weight: 300, line-height: 1.25 ),
    h3: ( font-size: 2.2em, font-weight: 300, line-height: 1.30 ),
    h4: ( font-size: 1.6em, font-weight: 300, line-height: 1.35 ),
    h5: ( font-size: 1.2em, font-weight: 300, line-height: 1.5 ),
    h6: ( font-size: 1.0em, font-weight: 300, line-height: 1.4 ),
);

You can add as many types as you want. Each type will be assigned to the tag along with a custom class so if needed you can apply .h2 to an H4, etc

Sizes

By Default SpryCss uses em to set font sizes, padding, heights, etc. So you can alter the sizes using the size classes.

Ex.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

The size classes are applied to all child elements so you can assign it to the parent.

Ex.

SCSS Variable

$sizes: (
    xl: 140%,
    lg: 120%, 
    md: 100%, 
    sm: 90%, 
    xs: 75%,
);

Colors

Text Colors

.color-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Hover/Focus Colors

.color-hover-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Change Child Link Colors and Link Hover Colors

.link-color-{color} .link-color-hover-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Background Colors

.bg-{color} .color-white

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Border Colors

.border .border-{color}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

Button Colors

.btn .btn-{color}

Accent Colors

You can wrap elements with an accent color to change and override all the accent colors within that container.

.accent-{color}

Text with Border

Inputs

Dark Mode

You can add the class .dark to any element to invert the "light" and "dark" color names.

* This means that you will need to use "light" and "dark" color values in your $color variables.

* This will apply to all child elements.

Text with Border

Inputs

SCSS Variable

$colors: (
    "white":       #ffffff,
    "light":       #efefef,
    "grey":        #999999,
    "dark":        #444444,
    "primary":     #0D7FBF,
    "warning":     #df8a22,
    "error":       #d52929,
    "success":     #04ad3c,
    "text":        #566067,
    "transparent": transparent,
)

You can add as many colors as you want, but each color will be added to all 4 types above. If you only need it for a small thing then it would be better to create a custom variable for it.

Icons

SpryCSS doesn't come with its own icon package. You can use whatever ican package or icon webfont you want, but icon webfonts can greatly increase the size of your projects. A recommended alternative is to use direct svg code within your project. This produces the smallest file size while producing high resolution icons and allowing you the most flexibility to style the icons within your css.

A great option for this is Material Design Icons. You can search for icons and view the SVG code by clicking on the Code dropdown and click on 'View SVG'. Then copy and paste the code in your html.

If your using Visual Studio Code you can install the extension vscode-materialdesignicons-svg that provides code snippets to quickly add the SVG code.

* Note that the extension currently does not add fill="currentColor" to the paths so you will need to add that manually.

Ex.

Alerts

Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.

Closable Large Alert

Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.

Popup Alert Example

Popup Alert Top Right with No Backdrop and Autoclose

Cards

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod temporinvidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Learn More

Variations

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is the Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

- Meta Data

Grid

You can either use a 12 column css grid or flexbox grid system

Container Classes

grid Grid of columns, Uses variable $gaps for spacing

row Flex row of columns, Uses variable $gaps for spacing

g-{size} Gap for columns within grid or row. Default is variable $gaps

columns-{size} {size} can be 1-12, fixed or auto (fixed and auto only apply to row)

Column Classes

col-{size} {size} can be 1-12, fixed or auto (fixed and auto only apply to row)

Breakpoint Classes

grid -{size}00 Min width in px of child elements within container

{breakpoint}- columns-{size} {size} can be 1-12, fixed or auto (fixed and auto only apply to row)

{breakpoint}- col-{size} {size} can be 1-12, fixed or auto (fixed and auto only apply to row)

{breakpoint}- g-{spacing} Gap size for container

{size} is 1-12 {spacing} is defined by the $spacing variable. See Spacing for more details * gap for flexbox is not supported on older browsers. Also, custom gaps will not always work correctly with row when setting specific column sizes. It works best if you specify all breakpoint column sizes or use it with grid instead

CSS Grid

Auto Fit minimum 200px

col

Specify number of columns

col

CSS Flexbox

Equal Columns Single Row above mobile

fixed

Setting Columns to Auto

fixed

auto fit content

fixed

Set Sidebar width with Auto Content Column

md-mw-300

auto

Custom Ordering with Space between See Layout Classes for more details

col C

col B

col A

Specify number of columns centered

(For gapping to work correctly you will need to specify all breakpoints)

col

Columns multi row with column spanning

.col-6

.col-3

.col-6

.col-3

Row spanning with nested rows and auto height

.md-col-4

Lorem ipsum dolor sit amet, consetetur sadipscing elitrsed diam nonumy.

fixed

Lorem ipsum dolor sit amet, consetetur sadipscing ut labore et dolore magna aliquyam erat.

Responsive with different gap sizing and nested row with an auto fill column

.col-6

.col-6 .md-col-3 .lg-col-3

auto

auto fill with larger content

auto

.md-col-3

Lists

<nav class="list">

Toolbar - Navigation with `.list`

Loader

Menus

Left Align

Right Align

Responsive Toolbar Navigation Menu

Add the classes .md-horizontal and .md-hoverable to the <nav>

Modals

Classes

modal Main Modal Class

show Shows the Modal

blur Adds blur to background

bounce Adds bounce animation. Only occurs once.

no-backdrop Removes the Backdrop and allows to click through the background.

Add max-width to modal-content to change size

Login Form Example

Large Model with Long content and forced buttons

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Navigation

<nav>

Classes

{breakpoint}-horizontal Change Layout to Horizontal Menu

{breakpoint}-hoverable Allows sub menus to open on Hover

Standard Navigation Menu

Drop down Navigation Menu Right Aligned

Sliders

These are basic lightweight sliders that do require minimal Javascript. You can extend the Javascript to make them more robust if you like. If your looking for something more robust, you might want to check out Swiper or Glide

Required Javascript

<script defer src="https://cdn.jsdelivr.net/gh/ggedde/spry-css@2.3.23/dist/spry-slider.min.js"></script>

View full slider.js

You can add loading="lazy" to the images, but it may be a little choppy when scrolling on some browsers. The Slider will detect the lazy loading images and pre load them on the next and previous slides. If you want a smooth transition it is best to load all the images initially.

Data Options:

data-loop to allow the slides to loop.

data-snap to force stopping on each slide even when using grid layout. This is not forced with momentum scrolling.

data-play="xxxx" to enable autoplay in miliseconds.

data-stop="hover|action" 'hover' to pause autoplay while hovering over slider or 'action' to pause autoplay while hovering over a link or button or making a text selection.

Basic Image Slider

Box Slider with Breakpoints, Autoplay, Loop, Pagination and Accent Color

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Image 7

Image 8

Image 9

Image 10

Image 11

Image 12

Tables

Name	Size	Color
Tier 1	200	Red	Learn More
Tier 2	400	Blue	Learn More
Tier 3	500	Gold	Learn More

Toggles

Toggles are used to open and close content, menus, etc

You can create a toggle group by adding a <input type="checkbox" /> inside a <label class="toggle"> then followed by your container of your choice.

<label class="toggle">Toggle Handle
    <input type="checkbox" />
</label>
<p>Toggle Content</p>

General Toggle Example

Toggle Content

Collapsing Toggle (Accordion)

Question 1

Question 2

Overflown Toggle

Add .collapse to your container

Toggle Content

Activate on Hover

Add the .hoverable class to the label

* To Remove the click option then just remove the checkbox and add the .toggle class to the label

Toggle on Hover

Utilities

General Utility Classes

bold { font-weight: bold }

normal { font-weight: normal }

italic { font-style: italic }

uppercase { text-transform: uppercase }

lowercase { text-transform: lowercase }

capitalize { text-transform: capitalize }

pointer { cursor: pointer }

rounded { border-radius: 5px; overflow: hidden }

rounded-bottom { border-radius: 0 0 5px 5px }

circle { border-radius: 50% }

square { border-radius: 0 }

float-left { float: left }

float-right { float: right }

clear { clear: both }

index-1 { z-index: 1 }

index-2 { z-index: 2 }

index-3 { z-index: 3 }

border { border: 1px solid map-get($colors, 'medium') }

border-top { border-top: 1px solid map-get($colors, 'medium') }

border-right { border-right: 1px solid map-get($colors, 'medium') }

border-bottom { border-bottom: 1px solid map-get($colors, 'medium') }

border-left { border-left: 1px solid map-get($colors, 'medium') }

note { font-style: italic; font-size: 90%; opacity: 0.8 }

truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

Layout Utility Classes

* All Layout Utility Classes can be used with breakpoints ex {breakpoint}-{layoutclass}

Example Hide on All

none

Example Hide on Mobile

none md-block

Example Hide on Tablets

md-none lg-block

{breakpoint}-jc-between { justify-content: space-between }

{breakpoint}-text-left { text-align: left }

{breakpoint}-text-center { text-align: center }

{breakpoint}-text-right { text-align: right }

{breakpoint}-text-justify { text-align: justify }

{breakpoint}-no-wrap { white-space: nowrap; flex-wrap: nowrap; }

{breakpoint}-pre-wrap { white-space: pre-wrap }

{breakpoint}-break-word { word-wrap: break-word }

{breakpoint}-inline { display: inline; width: auto }

{breakpoint}-flex { display: flex }

{breakpoint}-block { display: block }

{breakpoint}-none { display: none }

{breakpoint}-inline-block { display: inline-block; width: auto }

{breakpoint}-inline-flex { display: inline-flex; width: auto }

{breakpoint}-table { display: table }

{breakpoint}-table-cell { display: table-cell }

{breakpoint}-relative { position: relative }

{breakpoint}-absolute { position: absolute }

{breakpoint}-collapse { position: relative }

{breakpoint}-collapse > * { position: absolute }

{breakpoint}-sticky { position: sticky; top: 0 }

{breakpoint}-fixed { position: fixed }

{breakpoint}-inset { position: absolute; inset: 0 }

{breakpoint}-inset-top { position: absolute; top: 0; bottom: auto }

{breakpoint}-inset-right { position: absolute; right: 0; left: auto }

{breakpoint}-inset-bottom { position: absolute; bottom: 0; top: auto }

{breakpoint}-inset-left { position: absolute; left: 0; right: auto }

{breakpoint}-outset-top { position: absolute; bottom: 100%; top: auto }

{breakpoint}-outset-right { position: absolute; left: 100%; right: auto }

{breakpoint}-outset-bottom { position: absolute; top: 100%; bottom: auto }

{breakpoint}-outset-left { position: absolute; right: 100%; left: auto }

{breakpoint}-pointer-none { pointer-events: none }

{breakpoint}-align-baseline { vertical-align: baseline }

{breakpoint}-align-top { vertical-align: top }

{breakpoint}-align-middle { vertical-align: middle }

{breakpoint}-align-bottom { vertical-align: bottom }

{breakpoint}-overflow-hidden { overflow: hidden }

{breakpoint}-overflow-scroll { overflow: scroll }

{breakpoint}-overflow-auto { overflow: auto }

{breakpoint}-order-first { order:-1 }

{breakpoint}-order-0 { order:0 }

{breakpoint}-order-1 { order:1 }

{breakpoint}-order-2 { order:2 }

{breakpoint}-order-3 { order:3 }

{breakpoint}-order-last { order:99999 }

{breakpoint}-ai-start { align-items: flex-start }

{breakpoint}-ai-end { align-items: flex-end }

{breakpoint}-ai-center { align-items: center }

{breakpoint}-ai-stretch { align-items: stretch }

{breakpoint}-jc-start { justify-content: flex-start }

{breakpoint}-jc-end { justify-content: flex-end }

{breakpoint}-jc-center { justify-content: center }

{breakpoint}-jc-between { justify-content: space-between }

{breakpoint}-jc-around { justify-content: space-around }

{breakpoint}-flex-middle { display: flex; align-items: center }

{breakpoint}-flex-center { display: flex; align-items: center; justify-content: center }

{breakpoint}-flex-wrap { flex-wrap: wrap }

{breakpoint}-flex-column { flex-direction: column }

{breakpoint}-shadow { box-shadow: 1px 3px 4px rgba(0,0,0,.12) }

{breakpoint}-h-*** { height: ***px; min-height: ***px; max-height: ***px }

{breakpoint}-mh-*** { max-height: ***px }

{breakpoint}-vh-** { height: **vh }

{breakpoint}-mvh-** { max-height: **vh }

{breakpoint}-w-*** { width: ***px; min-width: ***px; max-width: ***px }

{breakpoint}-mw-*** { max-width: ***px }

{breakpoint}-vw-** { width: **vw }

{breakpoint}-mvw-** { max-width: **vw }

{breakpoint}-o-** { opacity: .** }

** = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

*** = 0, 100, 200, 300, 400, 500, 600, 700, 800, 900

Max Width Classes

This requires a breakpoint. ex {breakpoint}-mw

Spacing

The classes are named using the format

{breakpoint}-{property}{sides}-{spacing}

There are 3 Spacing properties:

p = padding

m = margin

There are 6 sides:

t = top

r = right

b = bottom

l = left

y = top and bottom

x = left and right

The sizes are used from the scss variable.

// SCSS Variable
    $spacing: (
    0: 0,
    1: .5rem,
    2: 1rem,
    3: 2rem,
    4: 4rem
    );

Negative Margin

For a negative margin you can include a negative value by placing a n in front of the value. ex mx-n2

SpryCSS

Support

Compatibility

Getting Started and Installation

Using the CDN:

Using NPM and SCSS:

Using Yarn and SCSS:

Overriding SCSS Variables:

SCSS Variables

Example Variables File:

Accessing Variables in SCSS

Typography

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Unordered List

Ordered List

SCSS Variable

Sizes

Ex.

Ex.

SCSS Variable

Colors

Text Colors

Hover/Focus Colors

Change Child Link Colors and Link Hover Colors

Background Colors

Border Colors

Button Colors

Accent Colors

Dark Mode

SCSS Variable

Icons

Ex.

Alerts

Closable Large Alert

Popup Alert Example

Error!

Popup Alert Top Right with No Backdrop and Autoclose

Success!

Buttons

Outline

Hazy

Link

Large

Small

Extra Small

Custom Classes

With Icons

With Loader

Cards

Lorem ipsum dolor

Variations

Lorem Ipsum Dolor

Forms

Simple form with some Required Fields

Text Field *

Email *

Select *

Vertical Checkboxes

Horizontal Radios *

Message

Simple form with Accent Color

Text Field *

Email *

Select *

Vertical Checkboxes

Horizontal Radios *

Message

Responsive labels with loading button and disabled fields on submit

Resize Fields using form.sm or form.lg

Grid

Container Classes

Column Classes

Breakpoint Classes

CSS Grid

Auto Fit minimum 200px

Resize Fields using `form.sm` or `form.lg`

Toolbar - Navigation with `.list`