Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time


iOS style for your mobile web app

Look native

Give your app a look and feel that closely resembles the popular mobile platform, Apple's iOS.

Scale beautifully

Built using elastic measurement units, iOCSS scales simply by increasing the font-size of the <html> element.

Look ma, no images!

iOCSS is built without images, so no matter how high-resolution the next tablet or phone is, your web app will look crisp and clean.

Combine with the awesomeness of FontAwesome, and you'll have infinite scalability.

Animate with style

iOCSS doesn't provide JavaScript, but it does provide CSS3 animations where necessary.

Simply Stylus

Written with Stylus to be easily customizable, but compiled to minified CSS to be easily deployable.

Use iOCSS in your project

  1. Download io.css and copy it to your project's css/ folder

  2. Include the following tags in the <head> of your layout:

<link rel="stylesheet" type="text/css" href="css/io.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
  1. Make sure your layout includes <body class="iOCSS"> (or add class="iOCSS the element you want to contain your app)

  2. Use some iOCSS classes:

    <div class="frame">
        <div class="header">
                <a href="#" class="button">Button</a>
            <h1>Say Hello to iOCSS</h1>
                <a href="#" class="button next">Let's go</a>
        <div class="scrollable">
            <div id="panel-about">
                <div class="well">
                    <h1>Welcome to iOCSS</h1>
                    <p>Have fun!</p>

Building iOCSS

  1. Clone the repository
git clone
  1. Install dependencies
cd iOCSS/
npm install
  1. Build iOCSS with grunt
  1. io.css will be built at build/css/io.css


Pull requests are welcome!

  • Please take care to test your changes in Chrome, Safari, iOS, and Android browsers.
  • "Namespace" any CSS classes you add such that they only affect elements that are descendants of an element with the iOCSS class
  • Make sure your contribution doesn't break anything ;)


iOCSS is licensed under the permissive BSD license.


Simple, resolution independent, image-free CSS for mobile web applications




No releases published
You can’t perform that action at this time.