-
Notifications
You must be signed in to change notification settings - Fork 0
Theme Options
Wordpress theme consisted in 3 part. PHP Code, Scripts, and Styles.
UM base on underscore.me(_s) which are just right amount of lean, well-commented, modern, HTML5 templates. with ultra-minimal CSS and javascripts.
The most prominent key of themes is style.css (The Styles), which contains (base on _s):
- Reset
- Typography
- Elements
- Forms (with Navigations)
- Accessibility
- Alignments
- Clearings
- Widgets
- Content
- Infinite scroll
- Media
In UM, we split the style.css into:
- Reseting Styles
reset.css(1-2) - Wordpress Default(Rebuilding Styles)
css/base.css(3,5-11) - Wordpress basic navigations
css/nav.css(menus, page-nav, *-nav) (4) - and add our own UM-GUI (also in ultra minimal)
css/um-gui-lib.css - The 'style.css'
- Optionally 'layout' styles
- Optionally 'um-scheme' for colour scheme.
- Media Queries
Note: For them you develop many site, Wordpress or non-wordpress site, having a own copies on 'reset.css' will be gracefull instead having it inside style.css.
UM use HTML5 Reset <html5reset.org>, which are learned much from/been inspired by/taken code where offered from:
- Eric Meyer http://meyerweb.com
- HTML5 Doctor http://html5doctor.com
- HTML5 Boilerplate http://html5boilerplate.com
Base on _s style.css, rebuild a basic html typography, forms (using em and rem), and amount of basic wordpress class and id. So your Wordpress will be ready for responsive-design.
So, as Theme Core, UM-Themes shall help you kick-started your theme development.
We merely touch the php code from _s, but added some more PHP functions and tools to it, which still easy to follow.
The navigations is on css/nav.css so it will be easy to design your own menu and navigations styles.
UM came with UM-Gui-lib. It's a jQuery and basic html5 apis, Yet, still adapting _s scripts which merged into 'default.js'
To Learn about UM-GUI.js functions: UM-GUI-JS
Since '1.1.4' we extract the sytles into css3 media queries. Um, Yes. It's shall be responsive in design
- 'print.css' How your page/post will look when printed
- 'medium.css' How your site will look in medium-width-devices(tablet)
- 'small.css' How your site will loook in small-width-devices(handheld)
To lean about media queries:
UM-Plug came with Minify http://code.google.com/p/minify/, which Combines, minifies JavaScript and CSS files on demand.
We use JSMin.php and CSSmin.php to create a static.css and static.js(also static-foot.js) to reduce payload and number of request. This will be so usefull when your site entering productions stage.
The generated minified scripts and style will be en-queue into WP_header() just like any other default scripts or styles.
- Set 1 (>0) in CSS Compression level to evaluate your static/minified css code
- Don't use @import "file.css" in css, better enqueue them into wp_header
- CSSmin.php produce error on Wordpress (still in bug hunt), so we use our own css compression functions.