Basic, simple, semantic, and small (5.1 KB minified and gzipped).
Integrate it with your project easily with Bower: bower install iOS-7-CSS
Live example: cydia.hbang.ws
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>Hello World</title><metaname="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0"><linkrel="stylesheet" href="ios7.min.css"><scriptsrc="ios7.min.js"></script></head><body><headerclass="ios-header"><h1>Page header.</h1></header><mainclass="ios-table ios-main"><h2role="header">Section header.</h2><ul><li><p>Text element.</p></li><li><ahref="https://hashbang.productions/" target="_blank" role="button">Link.</a></li><li><buttontype="submit">Button.</button></li><li><p>It’s ok to have more than one element at a time.</p><p>Like so…</p><ahref="https://www.google.com/" target="_blank" role="button">But you should probably only use that with multiple paragraphs.</a></li></ul><prole="footer">Section footer.</p></main></body></html>Note that this has changed since version 2.x. You must explicitly use class="ios-header" and class="ios-table" to have parts of the page gain iOS styles. class="ios-main" must also be used to ensure correct styling for tablets and desktop browsers.
Buttons must be specified with role="button"; footers must be specified with role="footer". Headers should use role="header", but the styling is still applied to <h2>.
Just download this repo and copy ios7.min.css and ios7.min.js to your website.
- Clone the repo.
git clone https://github.com/hbang/iOS-7-CSS.git cd iOS-7-CSS - Install node and npm if you don’t already have them installed. For example, on macOS:
brew install node
- Install the dependencies.
npm install
- Whenever you want to compile the CSS and JS, run Gulp.
npx gulp
Licensed under the Apache License, version 2.0. Refer to LICENSE.md.