Base Layers

The foundation of your website's outfit 👙🩲

• About Base Layers
  • What's included?
    • Namespacing
• Usage
  • Installation
  • API Documentation
• Design Resources

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.

Usage

Installation

npm install base-layers --save

API Documentation

Read the documentation.

Design Resources

Some Figma frames with grid styles have been created to help make designer-developer collaboration faster.

🎨 Access the Figma project here