Skip to content

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

License

Notifications You must be signed in to change notification settings

Clyng57/neumattercss

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

plot

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:

plot

plot

plot

View More