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 <html> element.
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.
iOCSS doesn't provide JavaScript, but it does provide CSS3 animations where necessary.
Written with Stylus to be easily customizable, but compiled to minified CSS to be easily deployable.
-
Download io.css and copy it to your project's
css/folder -
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 addclass="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
grunt
- 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
iOCSSclass - Make sure your contribution doesn't break anything ;)
iOCSS is licensed under the permissive BSD license.