Deadlift Design

Color

Deadlift includes two color palettes:

  1. Complementary

    This color palette uses colors that are opposite from each other on the color wheel. Since the colors are exact opposites they make each other stand out. This scheme is best used when visual impact is needed. (This site uses this palette)

  2. Analogous

    This color palette is made up of colors that are directly next to each other on the color wheel. This scheme is more restful to the viewer. (This page uses some of the elements from this palette)

How to use:

  • The color system is built using SASS variables, which can be found in the file named '_color.scss'.

  • While Deadlift's CSS is already styled with the complementary color palette, it's easy to change just by changing the variables in the SASS files.

  • The color's are easy to adjust by just changing the 'hsl' value of one variable. The other colors in the palette will adjust accordingly.

    • For the complementary palette adjust variable 
      $compBase
    • For the analogous palette adjust variable 
      $nearBase

Complementary Color Palette Swatches and Variable Names

$compBase
$compBaseComp
$compBaseNeutral
$compNeutral
$compBaseShade
$compShade
$baseTint
$compTint

Analogous Color Palette Swatches and Variable Names:

$nearBase
$nearShade
$nearTint
$rightBase
$leftBase
$rightTint
$leftTint

Thumbnail Images

Deadlift includes styling to create thumnail images. Simply add the mixin

@include imageDisplay

Button Styling

Deadlift includes styling to create eyecatching buttons. See the 'download' botton above as an example. Simply add the class

buttonAttn

Fonts

  1. Deadlift includes two Google Font pairings

  2. Swanky and Moo Moo paired with Raleway

    • Raleway is a clean, easily readable, san-serif font. Due to it's readability it is well suited for large amounts of text.
      To use Raleway just add the variable

      $mainFont2
      to a selector.

    • Swanky and Moo Moo is a font designed to represent hand-written letters. It is best to use this to draw attention to areas of a webpage but it is not advised to use this with a large amount of text.
      To use Swanky and Moo Moo just add the variable

      $accentFont2
      to a selector.

  3. Special Elite and Open Sans Condensed

    • Open Sans Condensed is a light and airy san-serif font that offsets Special Elite well.
      To use Open Sans Condensed just add the variable

      $mainFont

    • Special Elite is fun and reminiscent of an old typewriter. It will add flair to any project.
      To use Special Elite just add the variable

      $accentFont