I pulled together the basic elements that I used on my website, and rewrote the majority of my EJS functions and SASS mixins to deliver consistent application of these elements.
Color Palette
- $palette--primary-white--palette--primary-white
- $palette--primary-grey--palette--primary-grey
- $palette--secondary-grey--palette--secondary-grey
- $palette--hover-grey--palette--hover-grey
- $palette--divider-color--palette--divider-color
- $palette--error--palette--error
- $palette--primary-color-dark--palette--primary-color-dark
- $palette--primary-color-light--palette--primary-color-light
- $palette--accent-color--palette--accent-color
Palette Combinations
- @include palette--base
- @include palette--base--inverted
- @include palette--primary
- @include palette--header
- @include orange-gradient
Default Values
- $base-unit: 6px
- $transition-speed: 300ms
- $transition-timing: ease
- $border-radius: 3px
Spacing Variables
- $section-spacer: 120px
- $paragraph-bottom: 36px
$content-max-width: 1,020px
$full-bleed: 1,020px
$full-width-small: 1,008px
$full-width-medium: 960px
Fonts
- font-family: 'Source Serif Pro', serif;
font-weight: 300; - font-family: 'Source Serif Pro', serif;
font-weight: 500; - font-family: 'Roboto', sans-serif;
font-weight: 300; - font-family: 'Roboto', sans-serif;
font-weight: 500;
Type Definitions
- @include type--title
- @include type--title + @include italic
- @include type--heading-1
- @include type--heading-1 + @include italic
- @include type--heading-2
- @include type--heading-2 + @include italic
- @include type--heading-3
- @include type--heading-3 + @include italic
- @include type--heading-4
- @include type--heading-4 + @include italic
- @include type--heading-5
- @include type--heading-5 + @include italic
- @include type--heading-6
- @include type--heading-6 + @include italic
- @include type--headings
- @include type--headings + @include italic
- @include type--body
- @include type--body + @include italic
- @include type--body-small
- @include type--body-small + @include italic
- @include type--body-tiny
- @include type--body-tiny + @include italic
Inline Link
This is what an inline inlineLink() tag looks like
Block Link
This is what a block link tag looks like. blockLink() >
Button Link
This is what a button link tag looks like. buttonLink()
Card Link
Other
Button element without any classes.
Button element with inline-link class.
Button element with block-link class.
Button element with button-link class.
Button element with card-link class.