@neumatter/neumattercss

A light-weight neumorphic css framework to standardize layouts and spacing. A moderate utility first approach.

prefix-property/value:conditional

Add :hover or :active to any attributes class except for a-rounded.

a-bg/concave:hover

Add :sm, :md, :lg, :xl, :xxl to various classes to create breakpoints. This will cause the width to go from 50% to 100% at the large breakpoint.

l-column/6:lg

System margin and padding controlled by the systemMargin in the config file.

u-[m, p]/system
u-[m, p]t/system
u-[m, p]b/system
u-[m, p]x/system
u-[m, p]y/system

View Documentation

Table of Contents

1. Download
   
2. Install
   
3. Getting Started
   
4. Generate Config File
   
5. Configuration Options
   
6. Compile
   
7. Samples
   

Download

Download the /_build directory

Install

npm i @neumatter/neumattercss 

Getting Started

Edit your package.json file and in the scripts write:

"neucss": "./node_modules/.bin/neucss"

Generate the neumatter.config file

npm run neucss config

Configuration Options

To compile neumatter.css to a certain directory edit the exportPath in neumatter.config.

Edit colors, system margin & padding, system border radius, and exclude css from being compiled.

Compile neumatter.css

npm run neucss compile

Samples of neumatter.css in use:

View More