Mobi.css

Reset

Reset styles makes browsers render all elements more consistently.

Standalone Library

You can download the plugin as a standalone library in this page.

Or simply insert this into your <head> element:

<link rel="stylesheet" href="https://unpkg.com/mobi-plugin-reset/dist/mobi-plugin-reset.min.css" />

Features

Mobi.css improves Normalizs.css by optimizing some details for the mobile devices.

  • Friendly to content-rich webpage
  • Do not reset form input and table
  • Only use margin-top to set gaps between block elements

Nearly all margins in Mobi.css have a 0 value for margin-bottom. For vertical spacing, Mobi.css use margin-top to make content flow clearly.

This technique allows each section to determine the spacing it needs from the element above it.

There are only two sizes of margin-top. One is 15px, the other is 30px. The margin-top of heading is set to 30px while other block elements is 15px.

Here are the example of common elements.

Headings

h1. Mobi.css

h2. Mobi.css

h3. Mobi.css

h4. Mobi.css

h5. Mobi.css
h6. Mobi.css

Text Content

  • Unordered List
  • Unordered List
  • Nesting
    • Sub Unordered List
    • Sub Unordered List
  1. Ordered List
  2. Ordered List
  3. Nesting
    1. Sub Ordered List
    2. Sub Ordered List
Coffee
Black hot drink
Milk
White cold drink
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

// Use <pre><code></code></pre> to create code blocks.
document.write('Hello World');

Use <blockquote> to create block quotation.

<blockquote>
  <p>Use <blockquote> to create block quotation.</p>
</blockquote>

Use <hr> to create horizontal rules:

Use <figure> and <figcaption> to create self-contained content:

Mobi.css Logo
Figure caption: Random Image
<figure>
  <img src="http://getmobicss.com/img/mobi-logo.png" height="200" alt="Mobi.css Logo"/>
  <figcaption>Figure caption: Mobi.css Logo</figcaption>
</figure>

Inline Text Semantics

Use <a> to create links.

Use <strong> to create strong importance text.
Use <b> to create bold text.

Use <em> to create emphasized text.
Use <i> to create italic text.

Use <del> to create text that has been deleted from a document.
Use <s> to create text with a strikethrough.

Use <ins> to create text that has been added to a document.
Use <u> to create text with an underline.

Use <small> to create small text.
Use <sub> to create text that lower and smaller than the main text.
Use <sup> to create text that higher and smaller than the main text.

Use <code> to create fragments of computer code: alert('Hello World');.
Use <kbd> to create the defining instance of a term: Ctrl + D.
Use <samp> to create sample output from a computer: Build passed!.

Use <br/> to create line
breaks.

Use <span> to create inline container: I love Mobi.css.

Use <abbr> to create abbreviation elements.

<abbr title="The HTML <abbr> element (or HTML Abbreviation Element) represents an abbreviation and optionally provides a full description for it.">abbreviation elements</abbr>

Use <cite> to create citation elements: Mobi.css.

<cite><a href="http://getmobicss.com">Mobi.css</a></cite>

Use <data> to link a given content with a machine-readable translation: Beijing.

<data value="100000">Beijing</data>

Use <time> to create time: .

<time datetime="2016-09-30T00:00">Sep 30</time>

Use <q> to create inline quotations: I love Mobi.css, xcatliu said.

<q>I love Mobi.css</q>, xcatliu said.

Use <ruby>, <rp>, <rt> to create ruby annotations:

床 (chuáng) 前 (qiáng) 明 (míng) 月 (yuè) 光 (guāng) 
<ruby>
  我 <rp>(</rp><rt>chuáng</rt><rp>)</rp>
  去 <rp>(</rp><rt>qiáng</rt><rp>)</rp>
  洗 <rp>(</rp><rt>míng</rt><rp>)</rp>
  澡 <rp>(</rp><rt>yuè</rt><rp>)</rp>
  了 <rp>(</rp><rt>guāng</rt><rp>)</rp>
</ruby>

Use <bdi> to create text that be formatted in a DIFFERENT DIRECTION from other text outside it.
Use <bdo> to OVERRIDE the current directionality of text.

text that be formatted in a <bdi>DIFFERENT DIRECTION</bdi> from other text outside it.
<bdo dir="rtl">OVERRIDE</bdo> the current directionality of text.

<bdi> is not working in iOS and Chrome. Don't use it in your project, use <bdo> instead.

Use <dfn> to create a defining instance of a term:
Mobi.css is a lightweight, flexible css framework that focus on mobile.
What is Mobi.css? You can find the definition here.

<dfn id="dfn-mobicss">Mobi.css</dfn> is a lightweight, flexible css framework with focus on mobile.
What is Mobi.css? You can find the definition <a href="#dfn-mobicss">here</a>.

Use <var> to create a variable in a mathematical expression or a programming context:

A simple equation: x = y + 2

A simple equation: <var>x</var> = <var>y</var> + 2

Use <wbr/> to create a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location:

http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages

http://this<wbr/>.is<wbr/>.a<wbr/>.really<wbr/>.long<wbr/>.example<wbr/>.com/With<wbr/>/deeper<wbr/>/level<wbr/>/pages<wbr/>/deeper<wbr/>/level<wbr/>/pages<wbr/>/deeper<wbr/>/level<wbr/>/pages<wbr/>/deeper<wbr/>/level<wbr/>/pages<wbr/>/deeper<wbr/>/level<wbr/>/pages