A simple template for designing responsive websites in the browser

Fork or Download the code


Light as a feather

Included css is less than 2kb minified and 1.2kb gzipped. MNML is just that, minimal.

HTML5 template

<!DOCTYPE html>
<html lang="en">
    <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">



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.

Getting Started

Clone the repo

git clone

Jump into the directory

cd mnml

Install dependencies

npm install .

Start the build process and browser-sync services to make developing a breeze

npm start

Or just use this command

git clone && cd mnml && npm install . && npm start