Modulz

Beta

An open—source design system of styles, components, patterns, templates, tools and documentation.


Getting started

Paste this line of code into the <head> of your html files.

<link rel="stylesheet" href="https://s3.amazonaws.com/modulz/modulz-css.min.css" />

or install with npm

npm install modulz-css
Warning This library is still under heavy development and not ready for use in production.

Meet the family

and coming soon...


Features

Lightweight & performant

The whole system weighs in at just 20kb after compression.

Responsive grid system

A 12—column grid system for handling layout. Responsive, mobile-first and built on flexbox.

Component library

A growing library of beautiful, reusable UI components for building modules, templates, apps and websites.

Atomic classes

A set of single—purpose utility classes for quickly assembling layouts and isolated modules.

A11Y accessibility

From color contrast to ARIA roles, all styles and components pass accessibility standards set by A11Y.

Built on PostCSS

A powerful plugin library for auto-prefixing CSS, removing unused CSS and more.

Simple naming convention

All classnames strictly adhere to a simple, easy to remember naming convention.

Cohesive design system

All components are constructed from a set of reusable, global styles based on uniform scales.


Showcase


The plan...

I'll be working on Modulz a lot over the May—July period with a view to releasing v1 asap. I'd really love any help/feedback that's on offer.

If you find any bugs (there are lots to find) or have any questions, please open a Github issue or hit me up on Twitter.