Progressive Enhancement
`{{projectName}}` provides some predefined style to handle progress enhancement. The typical life cycle of a html page is:
- None JavaScript
- User disable the JavaScript, or JavaScript is enabled but not started.
- YUI started
- YUI script already processed, and `yui3-js-enabled` class name is added into html tag.
- Bottle started
- Bottle.init() started, and `btInit` cass name is added into body tag.
- Bottle initialized
- Bottle.init() done, and `btReady` class name is added into body tag.
Preinitialize Skins
When user loading a page , all required YUI and `{{projectName}}` javascript files will be loaded. In the first time, these scripts takes some time to load, and user will see strange html elements on the page before `{{projectName}}` start to work. To improve user experence, we can choose a preinitialize skin as progressive enhancement:
- Keep Everything
- By default, if you do not add any skin class name into body tag, `{{projectName}} will not touch any thing before init().
- Hide All before init() done
- Add the `btHideAll` class name into body tag. You will see a loading icon in the center of the page before `{{projectName}}` finish the init() task, and everything in the body will be hide.
- Hide ShortCut and Overlay before init() done
- Add the `btHideSCO` class name into body tag. Only ShortCut and Overlay will be hidden until the init() done.
- Inplace init
- Add the `btInPlace` class name into body tag. All widgets will be displayed as loading icon before the init() done
Customized Preinitialize Skins
You can create styles for preinitialized skin. For example, if you want to customize carousel widgets, use these css selectors:
- html:not(.yui3-js-enabled) [data-role=carousel]
- This css selector defines the default style of the carousel widget. If user disabled javascript, this style will be used.
- body:not(.btReady) [data-role=carousel]
- Use this css selector to define the style for the 'Now initializing' status. Before Y.Bottle.init() finished, this style will be used.
These css selectors will not work on IE 6/7/8, but works on almost all smartphones.