Light as a feather
Included css is less than 2kb minified and 1.2kb gzipped. MNML is just that, minimal.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title> </title> <meta name="author" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/mnml.min.css"> </head> <body> </body> </html>
Readable type. On any device.
Not all screens are the same. Make sure your type is readable no matter what device people are reading your content on. MNML provides a set of smarter type defaults for better responsive typography.
Basic CSS organization
Start off with only what you need. Modularized to make it easy to add or subtract partials as you see fit. Built with postcss .
└── src ├── lib/_normalize.css ├── _debug.css ├── _variables.css ├── _media-queries.css ├── _base.css ├── _typography.css ├── _styles.css ├── _debug.css └── mnml.css
Media queries for tablet & desktop devices
Media queries for two breakpoints. Widths are configurable. Queries can be extended or removed as desired.
Clone the repo
git clone firstname.lastname@example.org:mrmrs/mnml.git
Jump into the directory
npm install .
Start the build process and browser-sync services to make developing a breeze
Or just use this command
git clone email@example.com:mrmrs/mnml.git && cd mnml && npm install . && npm start