GRAYSCALE CSS

CSS For Minimalists

CDN | CUSTOMIZE | GITHUB
Tiny
Dynamic
Classless

REDEFINE YOUR ENTIRE THEME with a SINGLE COLOR
LIGHT and DARK modes baked right in!
Only ~2kb!

SETUP

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grayscale-css">

NPM

npm i grayscale-css

STYLES

Layout

DIV is not the only tag avalible to your designs.

Want to mimic the .container class you find in other frameworks, wrap your code in MAIN

Need to divide major sections of your code, use SECTION

And if you need a little extra flair, do what is done here and place content in a ARTICLE

Typography

The alternative to good design is always bad design. there is no such thing as no design. Simplicity carried to an extreme, becomes elegance. -- Adam Judge

P Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi.

STRONG Generated 1 paragraph, 52 words, 354 bytes of Lorem Ipsum

H1Heading...

H2Heading...

H3Heading...

H4Heading...

H5Heading...
H6Heading...

P can simply be a paragraph

A can be a link

STRONG can be bold

U can be underlined

EM can be emphasised

SMALL can be small

CODE can be code

HR
PRE > CODE 
alert('this could work!');
IMG
Example image

Lists

UL
  • LIList Item
  • LIList Item
  • LIList Item
  • LIList Item
OL
  1. LIList Item
  2. LIList Item
  3. LIList Item
  4. LIList Item

Forms

Tables

One Two There
Data Data Data
Data Data Data
Data Data Data

Utility

.grid dynamic grid layout helper