elr-scss-config

A base config for scss based projects

Installation

Download node at nodejs.org and install it, if you haven't already.

npm install elr-scss-config

Implementation

Colors

$white: #fff;
$eggshell: #f2f2f2;
$lightest-gray: #e2e2e2;
$lighter-gray: #ddd;
$light-gray: #ccc;
$gray: #999;
$dark-gray: #666;
$black: #333;
$seafoam: #3fb8af;
$blue: #1976d2;
$dark-blue: #005ebd;
$light-blue: lighten($blue, 15%);
$lightest-blue: #dfecf9;
$salmon: #ff9e9d;
$pink: #f81190;
$light-pink: #ffc3e4;
$magenta: #bf10a0;
$orange: #e0432b;
$taupe: #dad8a7;

$instagram-color: #5380a6;
$google-color: #dd4b38;
$twitter-color: #25aae1;
$pinterest-color: #ce2128;
$facebook-color: #3c5b9a;
$linkedin-color: #128fc3;

Fonts

$roboto: "Roboto", sans-serif;

$noto: "Noto Sans", sans-serif;

$nunito: "Nunito", sans-serif;

$playfair: "Playfair Display", serif;

$source-code: "Source Code Pro", monospace;

$noto-serif: "Noto Serif", serif;

HTML for Fonts

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700,900"
  rel="stylesheet"
/>

<link
  href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700,900"
  rel="stylesheet"
/>

<link
  href="https://fonts.googleapis.com/css?family=Nunito:400,700,900"
  rel="stylesheet"
/>

<link
  href="https://fonts.googleapis.com/css?family=Fira+Code:400,700,900"
  rel="stylesheet"
/>

Template Settings

$background-color: $lightest-gray;
$main-background: $white;
$background-light: $lightest-blue;
$hero-unit-background: $background-light;

$primary-gradient: linear-gradient($light-blue, $seafoam);
$secondary-gradient: linear-gradient($pink, $salmon);

$sans-font: $roboto;
$serif-font: $noto-serif;
$rounded-font: $nunito;
$mono-font: "Fira Code";

$heading-font: $sans-font;
$code-font: $mono-font;
$article-font: $noto;
$callout-font: $serif-font;

$base-fontsize: 16px;
$font-family: $sans-font;
$h1-fontsize: 3rem;
$h2-fontsize: 2.25rem;
$h3-fontsize: 1.5rem;
$h4-fontsize: 1.125rem;
$h5-fontsize: 1rem;
$h6-fontsize: 0.875rem;
$line-height: 1.6;

$text-color: $black;
$text-color-light: $background-light;

$link-color: $blue;

$primary-color-dark: $dark-blue;
$primary-color: $blue;
$primary-color-light: $light-blue;
$primary-text-light: $background-light;
$secondary-color: $pink;
$secondary-color-dark: darken($secondary-color, 5%);
$secondary-color-light: desaturate(lighten($secondary-color, 10%), 30%);
$tertiary-color: $seafoam;

$danger-color: #af100d;
$danger-background-color: #fddbdb;

$warning-color: #ca9626;
$warning-background-color: #fff2da;

$success-color: #337234;
$success-background-color: #dcf3dc;

$info-color: $blue;

$muted-color: $gray;
$muted-background-color: $eggshell;

$border-color: $light-gray;

$border: 1px solid $border-color;
$border-dark: 1px solid $text-color;
$border-light: 1px solid $lightest-gray;

$border-primary: 1px solid $primary-color;
$border-secondary: 1px solid $secondary-color;

$border-success: 1px solid $success-color;
$border-danger: 1px solid $danger-color;
$border-warning: 1px solid $warning-color;
$border-muted: 1px solid $muted-color;
$border-link: 1px solid $link-color;

$content-width: 1400px;
$max-width: 1400px;
$desktop-width: 1200px;
$landscape-width: 1024px;
$tablet-width: 768px;
$landscape-min-width: $tablet-width + 1;
$tablet-max-width: $tablet-width - 1;
$mobile-width: 568px;

// $shadow: 0 2px 5px rgba(0, 0, 0, .2);
$shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), -1px -1px 5px rgba(0, 0, 0, 0.1);
$button-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
$text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
$focus-shadow: 0 0 2px $link-color;
$border-radius: 5px;
$header-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

Implementation

@import "elr-scss-config/src/main";

Now you can just use these variables in your stylesheet. You can also override them locally.

License

SEE LICENSE IN LICENSE.md