iOS style for your mobile web app
Give your app a look and feel that closely resembles the popular mobile platform, Apple's iOS.
Built using elastic measurement units, iOCSS scales simply by increasing the
font-size of the
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
Written with Stylus to be easily customizable, but compiled to minified CSS to be easily deployable.
Use iOCSS in your project
Download io.css and copy it to your project's
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">
Make sure your layout includes
<body class="iOCSS">(or add
class="iOCSSthe element you want to contain your app)
Use some iOCSS classes:
<div class="frame"> <div class="header"> <div> <a href="#" class="button">Button</a> </div> <h1>Say Hello to iOCSS</h1> <div> <a href="#" class="button next">Let's go</a> </div> </div> <div class="scrollable"> <div id="panel-about"> <div class="well"> <h1>Welcome to iOCSS</h1> <p>Have fun!</p> </div> </div> </div> </div>
- Clone the repository
git clone https://github.com/lazd/iOCSS.git
- Install dependencies
cd iOCSS/ npm install
- Build iOCSS with grunt
- io.css will be built at
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
- Make sure your contribution doesn't break anything ;)
iOCSS is licensed under the permissive BSD license.