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 SCSS organization

Start off with only what you need. Modularized to make it easy to add or subtract partials as you see fit.

└── sass
    ├── _variables.scss
    ├── _normalize.scss
    ├── _base.scss
    ├── _type.scss
    ├── _styles.scss
    └── mnml.scss

Media queries for tablet & desktop devices

Media queries for two breakpoints. Widths are configurable. Queries can be extended or removed as desired.

Gulp tasks

Simple gulp tasks for running sass, minifying css and images, plus browser-sync - which reloads the browsers on file save.