Style Seeds

A customizable boilerplate CSS file distributed as an NPM package.

npm install style-seeds --save-dev

Cane be used in conjunction with various Normalize projects such as…

• Normalize
• Modern Normalize

Instructions

:root {
  --root-font-size: 100%;
  --root-font-family: sans-serif;
  --root-font-style: normal;
  --root-line-height: 1.5;
}

/* scoped variables! */
hr {
  --hr-color: #ccc;
  --hr-margin: 1rem;
  border: 0;
  border-top: 1px solid var(--hr-color);
  display: block;
  height: 1px;
  margin-bottom: var(--hr-margin);
  margin-top: var(--hr-margin);
}

base.css root vars

Customize your base vars by declaring elements like so…

@import base.css;

hr {
  --hr-color: red;
}

/* output is red! */

These variable overrides can be done prior to your base.css import or after; It doesn't matter!

hr {
  --hr-color: red;
}

@import base.css;

/* output is still red! */

For a further dive check out this CSS-Tricks article explaining how to use scoped variables in your CSS.