Superpower-css NPM

superpower-css

superpower-css is a minimalist CSS framework to kickstart your own theme without messing up too much. It's main purpose is to provide styles for lightweight compoents which can be re-used in many projects.

Installation

Using NPM (recommended)

Install the package via NPM.

npm install --save superpower-css

Webpack

If you're using Webpack, you can import superpower-css in your JavaScript files.

import 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap';
import 'superpower-css/dist/superpower-css.min.css';

SCSS

If you want to do customizations, you can import superpower-css in your SCSS files. Insert your customizations before importing it. You can get a list of all customizable SCSS variables by looking into the src/_vars.scss file.

/* Customizations here */

@import 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap';
@import '~superpower-css/src/superpower-css';

Using a CDN

If you cannot or don't want to install superpower-css, you can use the jsDelivr CDN.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/superpower-css/dist/superpower-css.min.css" />

The classic old way

If you're feeling nostalgic you can download and include superpower-css the classic old way.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;display=swap" />
<link rel="stylesheet" href="./path/to/superpower-css/dist/superpower-css.min.css" />

Usage

There's an example HTML page which uses all the available CSS styles, bundled with superpower-css. There's also a deployed version of it available. The deployed version may contain features which are not released yet, because it represents the HEAD of the main branch.

https://superpowercss.com

Customization

You can overwrite the default configuration variables if you're using SCSS. Overwritem them before importing to your SCSS. All available variables can be found in src/_vars.scss.