You are using an outdated browser. Our site may not work optimally or at all in older browsers.
--variable-design-system 0.0.3
friendly header

A lightweight design system composed with CSS custom props, built with sass modules, & configurable with JS.

Use any grid for structural foundation

Add VDS as base Design System

Modify CSS custom properties with JS

h1 HTML5 Kitchen Sink

h2 Back in my quaint garden

h3 Jaunty zinnias vie with flaunting phlox

h4 Five or six big jet planes zoomed quickly by the new tower.

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
h6 Pack my box with five dozen liquor jugs.

This paragraph is nested inside an article. It contains many different, sometimes useful, HTML5 tags. Of course there are classics like emphasis, strong, and small but there are many others as well. Hover the following text for abbreviation tag: abbr. Similarly, you can use acronym tag like this: ftw. You can define deleted text which often gets replaced with inserted text.

You can also use keyboard text, which sometimes is styled similarly to the <code> or samp tags. Even more specifically, there is a tag just for variables. Not to be mistaken with blockquotes below, the quote tag lets you denote something as quoted text. Lastly don't forget the sub (H2O) and sup (E = MC2) tags.

This is footer for this section

Blockquote: I quickly explained that many big jobs involve few hazards

This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’tdone as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997 external link


Tables can have captions now.
Person Number Third Column
Someone Lastname 900 Nullam quis risus eget urna mollis ornare vel eu leo.
Person Name 1200 Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person 1500 Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One 2800 Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Has table class
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800
Has table class row even
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800
Has table class row odd
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800
Has caption on bottom
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800
Has table class row even
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800
Has table class row odd
Person Number
Someone Lastname 900
Person Name 1200
Another Person 1500
Last One 2800

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

Title 2 06/11/2019

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

Title 3 06/11/2019

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

Title 06/11/2019
A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

Title 06/11/2019

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla. Enim veniam occaecat ad cupidatat ipsum in ea veniam.

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint.

Title 06/11/2019

A Picture of Bill Murray

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla.

A Picture of Bill Murray 06/11/2019

Consectetur duis ex irure aliquip aute ea occaecat sint. Cupidatat nisi laborum fugiat laborum sint labore nulla.


This message only shows when css grid is not supported:
You are using an outdated browser. Our site may not work optimally or at all in older browsers.

Definition List Title
Definition list division.
Kitchen Sink
Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.
aside
Defines content aside from the page content
blockquote
Defines a section that is quoted from another source

  • Unordered List item one
    • Nested list item
      • Level 3, item one
      • Level 3, item two
      • Level 3, item three
      • Level 3, item four
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

1 Infinite Loop
Cupertino, CA 95014
United States

pre {
  display: block;
  padding: 7px;
  background-color: #F5F5F5;
  border: 1px solid #E1E1E8;
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: Menlo, Monaco;
  line-height: 160%;
}

link button

I am legend
I am also legend Check me out Or check me out

$error message
$error message
$error message
$error message
$error message
$error message
You done messed up A-A-Ron!
$error message
You done messed up A-A-Ron!
You done messed up A-A-Ron!
You done messed up A-A-Ron!
$error message
You done messed up A-A-Ron!
$error message
You done messed up A-A-Ron!
You done messed up A-A-Ron!
Checkbox Fieldset
Radio Fieldset










Brand Primary Shade
  • var(--set-color-primary-shade)
  • rgb(22,46,81)
  • #162e51
Brand Primary
  • var(--set-color-primary)
  • rgb(0,94,162)
  • #005ea2
Brand Primary Tint
  • var(--set-color-primary-tint)
  • rgb(115,179,231)
  • #73b3e7









Brand Secondary Shade
  • var(--set-color-secondary-shade)
  • rgb(139,19,3)
  • #8b1303
Brand Secondary
  • var(--set-color-secondary)
  • rgb(228,29,61)
  • #e41d3d
Brand Secondary Tint
  • var(--set-color-secondary-tint)
  • rgb(242,147,140)
  • #f2938c









Brand Base
  • var(--set-color-base)
  • rgb(27,27,27)
  • #1B1B1B
Brand Base Light
  • var(--set-color-base-light)
  • rgb(169,174,177)
  • #a9aeb1
Brand Base Tint
  • var(--set-color-base-tint)
  • rgb(220,222,224)
  • #dcdee0









Form Base
  • var(--set-color-form-base)
  • rgb(27,27,27)
  • #1B1B1B
Form Base Light
  • var(--set-color-form-base-light)
  • rgb(169,174,177)
  • #a9aeb1
Form Base Tint
  • var(--set-color-form-base-tint)
  • rgb(220,222,224)
  • #dcdee0

Basic Utilities

Display
  • .display-block
  • .display-inline-block
  • .display-inline
  • .display-flex
Display block by breakpoints
  • .display-block-xs
  • .display-block-sm
  • .display-block-md
  • .display-block-lg
  • .display-block-xl
Background Colors
  • .vds-bg--primary
  • .vds-bg--primary-tint
  • .vds-bg--primary-shade
  • .vds-bg--secondary
  • .vds-bg--secondary-tint
  • .vds-bg--secondary-shade
  • .vds-bg--base
  • .vds-bg--base-light
  • .vds-bg--base-tint
  • .vds-bg--black
  • .vds-bg--white
  • .vds-bg--green
  • .vds-bg--blue
  • .vds-bg--red
  • .vds-bg--success
  • .vds-bg--error
  • .vds-bg--info
  • .vds-bg--warning
Text Colors
  • .vds-text--primary
  • .vds-text--primary-tint
  • .vds-text--primary-shade
  • .vds-text--secondary
  • .vds-text--secondary-tint
  • .vds-text--secondary-shade
  • .vds-text--base
  • .vds-text--base-light
  • .vds-text--base-tint
  • .vds-text--black
  • .vds-text--white
  • .vds-text--green
  • .vds-text--blue
  • .vds-text--red
  • .vds-text--success
  • .vds-text--error
  • .vds-text--info
  • .vds-text--warning
Padding
$spacer: 16rem * # #: 1 to 10
  • .p-a-# - all
  • .p-t-# - top
  • .p-b-# - bottom
  • .p-l-# - left
  • .p-r-# - right
  • .p-x-# - left and right
  • .p-y-# - top and bottom
Margin
$spacer: 16rem * # #: 1 to 10
  • .m-a-# - all
  • .m-t-# - top
  • .m-b-# - bottom
  • .m-l-# - left
  • .m-r-# - right
  • .m-x-# - left and right
  • .m-y-# - top and bottom
Padding Reset
  • .p-a-0 - all
  • .p-t-0 - top
  • .p-b-0 - bottom
  • .p-l-0 - left
  • .p-r-0 - right
Margin Reset
  • .m-a-0 - all
  • .m-t-0 - top
  • .m-b-0 - bottom
  • .m-l-0 - left
  • .m-r-0 - right
Font Family
  • .font-family--serif
  • .font-family--sans
  • .font-family--mono
Font Sizes
  • font-size--xs
  • font-size--sm
  • font-size--base
  • font-size--md
  • font-size--lg
  • font-size--xl
Text Align
  • text-align--left
  • text-align--center
  • text-align--right

:root {
  --add-font-sans: "";
  --add-font-serif: "";
  --add-font-mono: "";
  --set-font-size-xs: 16rem;
  --set-font-size-sm: calc(16rem + 0.25vw);
  --set-font-size-base: calc(16rem + 0.5vw);
  --set-font-size-md: calc(16rem + 1vw);
  --set-font-size-lg: calc(16rem + 1.5vw);
  --set-font-size-xl: calc(16rem + 2vw);
  --set-font-size-h1: calc(16rem + 3vw);
  --set-font-size-h2: calc(16rem + 2.5vw);
  --set-font-size-h3: calc(16rem + 2vw);
  --set-font-size-h4: calc(16rem + 1.5vw);
  --set-font-size-h5: calc(16rem + 1vw);
  --set-font-size-h6: calc(16rem + 0.5vw);
  --set-font-line-height: 1.7;
  --set-font-weight-light: 300;
  --set-font-weight-base: 400;
  --set-font-weight-heavy: 700;
  --set-font-letter-spacing: 0.5rem;
  --set-font-serif: var(--add-font-serif),Georgia,Cambria,"Times New Roman",Times,serif;
  --set-font-sans: var(--add-font-sans),-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --set-font-mono: var(--add-font-mono),Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --set-font-html: var(--set-font-serif);
  --set-font-body: var(--set-font-serif);
  --set-font-heading: var(--set-font-sans);
  --set-font-code: var(--set-font-mono);
  --set-color-primary: #005ea2;
  --set-color-primary-tint: #73b3e7;
  --set-color-primary-shade: #162e51;
  --set-color-secondary: #e41d3d;
  --set-color-secondary-tint: #f2938c;
  --set-color-secondary-shade: #8b1303;
  --set-color-base: #1b1b1b;
  --set-color-base-light: #a9aeb1;
  --set-color-base-tint: #dcdee0;
  --set-color-black: #000;
  --set-color-white: #fff;
  --set-color-green: #2e8540;
  --set-color-blue: #0071bc;
  --set-color-red: #e31c3d;
  --set-color-success: #4caf50;
  --set-color-error: #e74c3c;
  --set-color-info: #5bc0de;
  --set-color-warning: #f0ad4e;
  --set-color-body-bg: #fff;
  --set-color-body-text: #1b1b1b;
  --set-color-text-gray: #a9aeb1;
  --set-color-border-color: #ddd;
  --set-color-shadow-color: rgba(0,0,0,0.2);
  --set-color-form-base: #1b1b1b;
  --set-color-form-base-light: #a9aeb1;
  --set-color-form-base-tint: #dcdee0;
  --set-color-form-focus: #0050d8;
  --set-color-form-focus-tint: #d9e8f6;
  --set-color-form-error: #e31c3d;
  --set-color-form-error-tint: #f8dfe2;
  --set-color-form-success: #2e8540;
  --set-color-fb: #3b59b6;
  --set-color-tw: #4099ff;
  --set-color-pinterest: #cb2027;
  --set-color-skype: #12a5f4;
  --set-color-spotify: #81b71a;
  --set-color-instagram: #4e433c;
  --set-color-tumblr: #2b4964;
  --set-color-vimeo: #86b32d;
  --set-color-soundcloud: #f76600;
  --set-color-youtube: #f33;
  --set-color-linkedin: #4875b4;
  --set-color-flickr: #fe0883;
  --set-color-foursquare: #8fd400;
  --set-bp-min-xs: 320px;
  --set-bp-min-sm: 480px;
  --set-bp-min-md: 768px;
  --set-bp-min-lg: 992px;
  --set-bp-min-xl: 1200px;
  --set-bp-max-xs: 319.98px;
  --set-bp-max-sm: 479.98px;
  --set-bp-max-md: 767.98px;
  --set-bp-max-lg: 991.98px;
  --set-bp-max-xl: 1199.98px;
}