Our first phase of a new CSS hybrid framework for Breakdance + element extension plugin

Introducing Headspin Framework

Uses the power of CSS Variables + Breakdance Global Setting to create Refreshingly Simple Websites that will make your Headspin.

Colors

Primary Colors

--primary
--primary-d-1
--primary-d-2
--primary-d-3

Secondary Colors

--secondary
--secondary-d-1
--secondary-d-2
--secondary-d-3

Background Classes

Light Backgrounds

--body-l
--body-light
--body-l-1
--body-l-2
--body-l-3
--white

Dark Backgrounds

--body-d
--body-dark
--body-d-1
--body-d-2
--body-d-3
--black

Section + Padding Classes

--padding-3xs
--padding-2xs
--padding-xs
--padding-s
--padding-m
--padding-l
--padding-xl
--padding-2xl
--padding-fixed
--section-gap
--section-fixed

Gap Classes

--gap-3xs
--gap-2xs
--gap-xs
--gap-s
--gap-m
--gap-l
--gap-xl
--gap-2xl
--gap-fixed

Width Classes

--width-xs
--width-s
--width-m
--width-l
--width-xl
--width-2xl

--width-auto
Width goes to 100% on mobile auto, Breakdance makes you set this manually.

Radius

--radius-xs
--radius-s
--radius-m
--radius-l
--radius-xl
--radius-full

Text

--text-xs
--text-s
--text-m 
--text-l
--text-xl
--text-2xl
--text-3xl
--text-4xl

Text Colors

--text-light
--text-dark
--text-h-light
--text-h-dark

Shadow

--shadow-xs
--shadow-s
--shadow-m
--shadow-l
--shadow-xl

Classes

.shadow-xs
.shadow-s
.shadow-m
.shadow-l
shadow-xl

Corner Ribbon

CSS-ONLY CORNER RIBBONS

.ribbon

Direction of Ribbon

.ribbon-top-left
.ribbon-top-right
.ribbon-bottom-left
.ribbon-bottom-right

Color of Ribbon

.ribbon-brand
.ribbon-primary
.ribbon-secondary
CSS-Only

Light
Color
#17

This is a basic text element. Color #18

Dark Color #19 or default heading

This is a basic text element. Color #20 or Default Breakdance Text color
You can adjust these colors with Breakdance Palette Color settings
This is the Breakdance Brand Color - Using Global Setting
--primary (color #1)
--primary-d-1 (color #2)
--primary-d-2 (color #3)
--primary-d-3 (color #4)
--secondary (color #5)
--secondary-d-1 (color #6)
--secondary-d-2 (color #7)
--secondary-d-3 (color #8)
--body-l (Breakdance Background Color)
--body-l-1 (color# 10)
--body-l-2 (color# 11)
--body-l-3 (color# 12)
--body-d (color# 13)
--body-d-1 (color# 14)
--body-d-2 (color# 15)
--body-d-3 (color# 16)

This is a heading.

This is a heading.

This is a heading.

This is a heading.

This is a heading.
This is a heading.