# elr-scss-config > a scss mixin for configs Latest version **1.1.3** (published 2021-12-07) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads ## Install ```sh npm install elr-scss-config pnpm add elr-scss-config yarn add elr-scss-config bun add elr-scss-config ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.3 | | Published | 2021-12-07 | | First published | 2021-11-18 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE.md | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 20 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1 | | Author | Elizabeth Rogers | | Maintainers | beth_rogers465 | | Keywords | sass, css, mixins, config | ## Links - npm: https://www.npmjs.com/package/elr-scss-config - Repository: https://github.com/Beth3346/elr-scss-config - Issues: https://github.com/Beth3346/elr-scss-config/issues - npm.io page: https://npm.io/package/elr-scss-config ## Dependencies (1) - [elr-scss-functions](https://npm.io/package/elr-scss-functions.md) 1.1.6 ## Alternatives - [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads - [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads - [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads - [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads - [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads ## Recent versions - 1.1.3 (latest) — 2021-12-07 - 1.1.2 — 2021-11-18 ## README # elr-scss-config [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm](https://img.shields.io/npm/dm/elr-scss-config.svg?style=flat)](https://npmjs.com/package/elr-scss-config) A base config for scss based projects ## Installation Download node at [nodejs.org](http://nodejs.org) and install it, if you haven't already. ```sh npm install elr-scss-config ``` ## Implementation ### Colors ```scss $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; ``` ```scss $instagram-color: #5380a6; $google-color: #dd4b38; $twitter-color: #25aae1; $pinterest-color: #ce2128; $facebook-color: #3c5b9a; $linkedin-color: #128fc3; ``` ### Fonts ```scss $roboto: "Roboto", sans-serif; ``` ```scss $noto: "Noto Sans", sans-serif; ``` ```scss $nunito: "Nunito", sans-serif; ``` ```scss $playfair: "Playfair Display", serif; ``` ```scss $source-code: "Source Code Pro", monospace; ``` ```scss $noto-serif: "Noto Serif", serif; ``` ### HTML for Fonts ```html ``` ```html ``` ```html ``` ```html ``` ### Template Settings ```scss $background-color: $lightest-gray; $main-background: $white; $background-light: $lightest-blue; $hero-unit-background: $background-light; ``` ```scss $primary-gradient: linear-gradient($light-blue, $seafoam); $secondary-gradient: linear-gradient($pink, $salmon); ``` ```scss $sans-font: $roboto; $serif-font: $noto-serif; $rounded-font: $nunito; $mono-font: "Fira Code"; ``` ```scss $heading-font: $sans-font; $code-font: $mono-font; $article-font: $noto; $callout-font: $serif-font; ``` ```scss $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; ``` ```scss $text-color: $black; $text-color-light: $background-light; ``` ```scss $link-color: $blue; ``` ```scss $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; ``` ```scss $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; ``` ```scss $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; ``` ```scss $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; ``` ```scss // $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 ```scss @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 --- _Source: https://npm.io/package/elr-scss-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._