prismaticss

A style framework for vanilla CSS.

Description

Designed for simplicity, made to scale, perfect for custom themes and white labeling.

Table of Contents

• Installation
• Usage
• Config
• Credits
• Questions

Installation

npm install prismaticss

Import prismaticss at the top of your primary style sheet.

/* theme.css */

@import 'prismaticss';

@layer theme {
  :root {
    /* theme variables go here */
  }
}

IMPORTANT
place the import before any other css rules so it doesn't overwrite your styling.

Config

Config is only necessary for custom theming or white labeling.

If you're interested, copy the following code block into your project.

/* theme.css */

@import 'prismaticss';

@layer theme {
  :root {
    /* colors */
    --primary-hue: 0;
    --primary-saturation: 0%;
    --primary-lightness: 5%;

    --secondary-hue: 0;
    --secondary-saturation: 0%;
    --secondary-lightness: 98%;

    --accent-hue: 125;
    --accent-saturation: 100%;
    --accent-lightness: 50%;

    --compliment-hue: 33;
    --compliment-saturation: 100%;
    --compliment-lightness: 50%;

    /* sizes */
    --base-size: 12px;
    --icon-size: 24px;

    /* borders & outlines */
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--primary-a100);

    --outline-width: 1px;
    --outline-style: solid;
    --outline-color: var(--primary-a100);

    /* fonts */
    --font-family: sans-serif;
    --font-size: 16px;

    /* animations */
    --transition-speed: 200ms;
    --transition-delay: 0ms;

    --transition-timing-function: ease;
    --transition-property: all;

    /* breakpoints */
    --breakpoint-xxl: 1500px;
    --breakpoint-xl: 1200px;
    --breakpoint-l: 1024px;
    --breakpoint-m: 768px;
    --breakpoint-s: 480px;
    --breakpoint-xs: 320px;
  }
}

Usage

CSS variables are the foundation of prismaticss.

/* style.css */

@import './theme.css';

body {
  font-size: var(--font-3);
  background-color: var(--secondary-a50);
  padding: var(--size-200);
}

The expansive library offers a superset of CSS variables, based on your custom theme.

Colors

Scale

Light										Dark
50	100	200	300	400	500	600	700	800	900	950

Opacity

To use an alpha color value, prefix the number with an a.

Clear										Solid
a50	a100	a200	a300	a400	a500	a600	a700	a800	a900	a950
5%	10%	20%	30%	40%	50%	60%	70%	80%	90%	95%

Prefix	Example
--primary-*	var(--primary-a50)
--secondary-*	var(--secondary-100)
--accent-*	var(--accent-200)
--compliment-*	var(--compliment-300)

tailwindcss

Prismaticss also provides variables for tailwind' expertly-crafted color palette.

Credits

Questions

eliwooddesign on GitHub   |   [e-mail]