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
Table of Contents
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:
