Mobi.css is a lightweight, scalable, mobile-first css framework.

Here is how to quickly get started with Mobi.css and a template starter page.

Quick start

Copy and paste the stylesheet <link> into your <head> before all other stylesheets to load Mobi.css:

<link rel="stylesheet" href="" />

This will include the basic classes, actually it's a collections of Mobi.css plugins with the base themeļ¼Œ you can find the usage in each page:

To load other plugins, you can simply insert the standalone version of the plugin, take mobi-plugin-color as an example:

<link rel="stylesheet" href="" />

You can find the usage in mobi-plugin-color.

The list of all the available plugins can be found in this page.

Starter template

Here is a Mobi.css template page that conforms to the modern HTML5 specification:

<!DOCTYPE html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Title of the page -->

    <!-- Mobi.css -->
    <link rel="stylesheet" href="">
    <!-- Add plugins as you like -->
    <link rel="stylesheet" href="">
    <!-- Your content here -->
    <h1>Hello World</h1>