WP themes

Repositories

• http://wordpress.org/extend/themes/

• http://www.plaintxt.org/ - some older classic minimal themes

Requirements

1. HTML5 ready. Many use HTML5 Boilerplate (or 'h5bp')
2. Responsive, with a mobile first approach, like 320 And Up.
3. Preproces system, to help with layout (Sass/SCSS, not too hard to add though)
4. Grid system, to help with layout (not too hard to add though)
5. Accessibility (basic WCAG 2.0? can be implemented later)
6. Theme settings for easy change of, say, header (Settings API, etc.)

• Make sure mobile devices don't get desktop size CSS or content
• LESS and possibly limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
• Semantic CSS with grid and vertical rhythm systems

Interesting

Bones

• Bones
  • https://github.com/eddiemachado/bones - recent
  • http://themble.com/docs/
  • http://themble.com/support/bones-grid/
  • http://sam.zoy.org/wtfpl/ - WTFPL, Do What The Fuck You Want To Public License
  • h5bp, 320andup, modernizr (custom minified), respond.js
  • Bones now uses LESS or Sass by default, leaves client or server side for you to setup
  • For hacking (not a parent theme)
  • 768px =< body { display: table } [1]
  • todo; optimizing js files for mobile (check that)
  • nice base style

320semanticgs

• 320semanticgs
  • https://github.com/matt-bailey/320semanticgs - may 2012
  • h5bp, 320andup and semantic.gs
  • preprocessor - LESS (LESS.js, not as reliable as server-side), SCSS, or Stylus base files
  • Font Awesome symbol webfont

_s

• _s (underscores) - recent
  • http://themeshaper.com/2012/02/13/introducing-the-underscores-theme/ - from Automattic
  • http://themeshaper.com/2012/02/21/getting-started-with-the-underscores-theme/
  • modern stuffs
  • reset is based on Eric Meyer, normalize.css and Blueprint
  • seperate layout .css
  • for hacking (not a parent theme)
  • 10px to 1em

Pears

• http://pea.rs/
  • https://github.com/simplebits/Pears
  • uses less
  • base theme with post+css patterns
  • Each pattern is a post in WordPress.
  • Add markup in a custom field named 'html'.
  • Add style in a custom field named 'css'.
  • Use the main content field for optional notes.

Hmm

• http://demos.simplethemes.com/skeleton/- "Skeleton is a simple, responsive WordPress theme based on the Skeleton Boilerplate. It has several useful shortcodes, such as tabs, toggles, cross-browser CSS3 buttons, and layout columns. It also includes a bbPress skin/stylesheet and sample child theme. "
  • https://github.com/simplethemes/skeleton_wp - recent
  • http://demos.simplethemes.com/skeleton/documentation
  • uses the Options Framework plugin
  • uses the Skeleton css framework
  • grid using shortcodes
  • basic typography, element and button css
  • not mobile first

• http://themefortress.com/reverie/ - demo
  • https://github.com/milohuang/reverie - kinda recent
  • h5bp
  • uses ZURB's Foundation framework
  • hNews microformat ready
  • optimized for Search Engine and redability
  • not mobile first

• http://whiteboardframework.com/ - HTML5, responsive, Less
  • https://github.com/johanbrook/whiteboard - Jul 17, 2011
  • Less Framework 4 - An adaptive CSS grid system.
  • accessability support (WAI)
  • http://whiteboardframework.com/testdrive/ - not exactly a clear whiteboard..
  • not mobile first

• http://html5reset.org/#wordpress
  • https://github.com/murtaugh/HTML5-Reset-Wordpress-Theme - year ago
  • does note http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • semantic HTML5 markup + CSS reset
  • CSS declarations for basic WordPress elements
  • widget-ready sidebar
  • Modernizr
  • hNews microformat
  • Google Analytics
  • not mobile first

• https://github.com/scottlyttle/Sass-WordPress-Reset-Theme - Sass, Modernizer, jQuery, form components
  • https://github.com/scottlyttle/Sass-WordPress-Reset-Theme/blob/master/SCSS/style.scss
  • Modernizer
  • needs ruby+sass on the server, not handy for shared hosting

• http://randyjensenonline.com/thoughts/handcrafted-wp-starter-theme/
  • h5bp
  • jQuery

• starkers - 3 months ago
  • https://github.com/viewportindustries/Starkers
  • uses WP core Twenty Ten theme as its base
  • update possibly maybe soon. twenty twelve is due though..

• https://github.com/nathanstaines/starkers-html5 - most a year ago
  • based on starkers
  • HTML5, bare-bones
  • Modernizr

• http://weavertheme.com/ - recommended by Danny
  • all fluid, no breakpoints
  • not motbile first (a lot of "@media all")
  • three stylesheets
  • many features paid for version only

• http://wordpress.org/extend/themes/thematic
  • http://www.ejhansel.com/thematic-320-and-up
    • anything below 1024 width is single colum? :/

• https://github.com/retlehs/roots
  • h5pb
  • not 320andup

• https://github.com/wycks/WP-Skeleton-Theme - a few months ago
  • http://skeleton.phpfogapp.com/ - demo
  • IE HTML5shim
  • etc.
  • not mobile first

article;

• Blank & Bare WordPress HTML5 Frameworks

Other

• http://wordpress.org/themes/twentyeleven
  • https://github.com/crowdfavorite-mirrors/wp-twentyeleven
  • https://github.com/RRWD/accessible-twenty-eleven-theme

• Glider is a one-template-file Wordpress theme that uses jQuery's .load() function to ping Wordpress for single posts, then inline-loads the post in question - this results in the ability to read all the posts without any (apparent) page loads. The theme now also supports arrow-key navigation.

• http://bckmn.com/naked-wordpress/
  • https://github.com/j-beckman/naked-wordpress

• https://github.com/themeskult/wp-svbtle

Build

• Forge is a free command-line toolkit for bootstrapping and developing WordPress themes in a tidy environment using front-end languages like Sass, LESS, and CoffeeScript.
  • https://github.com/thethemefoundry/forge