Mobi.css

Introduction

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="https://unpkg.com/mobi.css/dist/mobi.min.css" />

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="https://unpkg.com/mobi-plugin-color/dist/mobi-plugin-color.min.css" />

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">
  <head>
    <!-- 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 -->
    <title>Mobi.css</title>

    <!-- Mobi.css -->
    <link rel="stylesheet" href="https://unpkg.com/mobi.css/dist/mobi.min.css">
    <!-- Add plugins as you like -->
    <link rel="stylesheet" href="https://unpkg.com/mobi-plugin-color/dist/mobi-plugin-color.min.css">
  </head>
  <body>
    <!-- Your content here -->
    <h1>Hello World</h1>
  </body>
</html>