https://github.com/hbang/iOS-7-CSS

Basic iOS 7 CSS
https://github.com/hbang/iOS-7-CSS

Last synced: 3 months ago
JSON representation

Basic iOS 7 CSS

• Host: GitHub
• URL: https://github.com/hbang/iOS-7-CSS
• Owner: hbang
• License: other
• Created: 2014-01-14T13:23:47.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2021-05-07T04:44:32.000Z (over 3 years ago)
• Last Synced: 2024-07-05T06:47:46.137Z (4 months ago)
• Language: SCSS
• Size: 314 KB
• Stars: 56
• Watchers: 10
• Forks: 15
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• Awesome-CSS-Resources - iOS-7-CSS:

README

        
# Basic iOS 7 CSS

Basic, simple, semantic, and small (5.1 KB minified and gzipped).

Integrate it with your project easily with [Bower](https://bower.io/): `bower install iOS-7-CSS`

Live example: [cydia.hbang.ws](https://cydia.hbang.ws/depiction/ws.hbang.typestatus2/)

## Screenshots

![Screenshot 1](https://i.imgur.com/XOKfDs3.png)   ![Screenshot 2](https://i.imgur.com/5qAYSyl.png)

## Example Usage

```html

	

	Hello World

	

	

	

	

		
Page header.

	


	

		
Section header.

		

		


			


				
Text element.

			


			


				Link.

			


			


				Button.

			


			


				
It’s ok to have more than one element at a time.

				
Like so…

				But you should probably only use that with multiple paragraphs.

			

		


		
Section footer.

	


```

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 `
`.


## Installation

### The easy way:

Just [download this repo](https://github.com/hbang/iOS-7-CSS/archive/master.zip) and copy `ios7.min.css` and `ios7.min.js` to your website.

### The hard way:

1. Clone the repo.  

   ```bash

   git clone https://github.com/hbang/iOS-7-CSS.git

   cd iOS-7-CSS

   ```

2. Install node and npm if you don’t already have them installed. For example, on macOS:  

   ```bash

   brew install node

   ```

3. Install the dependencies.  

   ```bash

   npm install

   ```

4. Whenever you want to compile the CSS and JS, run Gulp.  

   ```bash

   npx gulp

   ```

## License

Licensed under the Apache License, version 2.0. Refer to [LICENSE.md](LICENSE.md).