This repository has been archived by the owner on Apr 11, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
28 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -1,3 +1,4 @@ | |||
| *~ | *~ | ||
| bender-min-dev.js | bender-min-dev.js | ||
| _site | _site | ||
| README.html | |||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Original file line | Diff line number | Diff line change |
|---|---|---|---|
| @@ -1,48 +1,41 @@ | |||
| Bender.js exists to simplify providing a mobile-friendly layout to users. | Bender.js exists to simplify providing a mobile-friendly layout to users. | ||
|
|
|
||
| Features | ##Features | ||
| ======== | |||
|
|
|
||
| - Entirely client side, suitable for use with a pure html site or pre-generated html from Jekyll or Movable Type. | - Entirely client side, suitable for use with a pure html site or pre-generated html from Jekyll or Movable Type. | ||
| - Cookie persistence -- users can have different settings on different devices. | - Cookie persistence -- users can have different settings on different devices. | ||
| - No redirects or url changes. | - No redirects or url changes. | ||
| - User-switchable so you don't have to make a guess whether someone on an iPad wants the mobile or full screen version. | - User-switchable so you don't have to make a guess whether someone on an iPad wants the mobile or full screen version. | ||
|
|
|
||
| Usage | ##Usage | ||
| ===== |
|
||
| ###Create your stylesheets | |||
|
|
|
||
| Create your stylesheets | |||
| ----------------------- | |||
| Create a shared stylesheet for rules that aren't dependent, and the stylesheets you intend to choose between. You can name these anything you want. For purposes of discussion: | Create a shared stylesheet for rules that aren't dependent, and the stylesheets you intend to choose between. You can name these anything you want. For purposes of discussion: | ||
| # /css/shared.css | |||
| # /css/screen.css -- for normal users, the css "screen" media type | |||
| # /css/mobile.css -- for mobile users, can be installed as "mobile" media type as well | |||
|
|
|
||
| Install stylesheets | * `/css/shared.css` | ||
| ------------------- | * `/css/screen.css` -- for normal users, the css "screen" media type | ||
| <pre> | * `/css/mobile.css` -- for mobile users, can be installed as "mobile" media type as well | ||
| <link rel="stylesheet" type="text/css" href="/css/shared.css"/> |
|
||
| <link rel="stylesheet" type="text/css" href="/css/screen.css" id="select-screen"/> | ###Install stylesheets | ||
| </pre> |
|
||
| <link rel="stylesheet" type="text/css" href="/css/shared.css"/> | |||
| <link rel="stylesheet" type="text/css" href="/css/screen.css" id="select-screen"/> | |||
|
|
|
||
| You can make this media-type-selective, and install mobile.css for the mobile media type. You want to allow the user to select the stylesheet configured for the screen media type, as this what computers and modern smartphones use. | You can make this media-type-selective, and install mobile.css for the mobile media type. You want to allow the user to select the stylesheet configured for the screen media type, as this what computers and modern smartphones use. | ||
|
|
|
||
| Install scripts | ###Install scripts | ||
| --------------- |
|
||
| <pre> | <script type="text/javascript" src="/js/jquery.min.js"></script> | ||
| <script type="text/javascript" src="/js/jquery.min.js"></script> | <script type="text/javascript" src="/js/bender-min-0.0.1.js"></script> | ||
| <script type="text/javascript" src="/js/bender-min-0.0.1.js"></script> |
|
||
| </pre> | ###Configure and install with javascript | ||
|
|
|
||
| Configure and install with javascript | /* create a bender context */ | ||
| ------------------------------------- | var bender = bender("bender-style") | ||
| <pre> | /* add your user-selectable style sheets */ | ||
| /* create a bender context */ | bender.add("select-screen", "/css/screen.css") | ||
| var bender = bender("bender-style") | /* passing the third parameter of "auto-mobile" will select it it matches known mobile user agents */ | ||
| /* add your user-selectable style sheets */ | bender.add("select-mobile", "/css/mobile.css", "auto-mobile") | ||
| bender.add("select-screen", "/css/screen.css") | /* check cookies and autodetect mobile, and then bind the handlers on document load with jQuery */ | ||
| /* passing the third parameter of "auto-mobile" will select it it matches known mobile user agents */ | $(bender.install()) | ||
| bender.add("select-mobile", "/css/mobile.css", "auto-mobile") | |||
| /* check cookies and autodetect mobile, and then bind the handlers on document load with jQuery */ | |||
| $(bender.install()) | |||
| </pre> | |||