Base-layers NPM

Base Layers

The foundation of your website's outfit 👙🩲

About Base Layers

Base Layers provides utility classes and Sass mixins (SCSS) to help you build out your site.

Base Layers is geared towards front-end developers that want a little something to help with commonly-repeated styles but that don't want an existing theme or design as opinionated as Bootstrap or Material UI.

First, it strips away all your styles (using Eric Meyer's CSS reset). Next, it gives you some basics to help get you ready for your day of web development. The rest is up to you!

It's like the tank top that you wear under your hoodie. It isn't the main outfit.

No blouses, no ties, and definitely no fedoras. It isn't your website's outfit, it's your website's base layers.

What's included?

Base Layers provides CSS utility classes (BEM style, with double-kebab (--) modifiers) and Sass mixins to help get you ready for your day of coding.

Utilities to help you with:

a configurable, responsive grid
spacing elements, including margins and padding
- supports namespacing
styling buttons
typography utilities
- supports namespacing
responsive design utilities

Namespacing

Using the namespace mixins is one strategy to leverage the framework while building an embedded web application, for example, a Chrome extension that injects UI onto a website in a way to make sure you are using a unique prefix for your class names. For example, instead of p-1 you would get my-app-u-p-1 if you used the namespace my-app-u-. See the documentation for specifics.