Frameworks and themes

The look and feel of a site built with a particular CMS is determined by whatever them you install. A theme will include various CSS files and may also include some Javascript files or libraries. 

In addition to CMS-specific themes, in the past few years, various more-general "frameworks" have been developed. Such frameworks are not specific to any CMS. But theme builders often build CMS-specific themes using these general frameworks.

Here, I collect links to frameworks, CSS extensions and Javascript libraries, themes, and references about both.

Frameworks (non-CMS-specific)

  1. 320 and up: mobile-first framework, no longer maintained
  2. 960 grid system, unsemantic (a successor to 960gs)
  3. Blueprint CSS
  4. BlueTrip
  5. Bootstrap — from Twitter, popular CSS grid system with javascript and more
  6. Centage - a CSS/LESS.js framework
  7. Compass — "an open-source CSS authoring framework" that uses  Sass
  8. Elements
  9. Emastic
  10. Foundation (by Zurb): responsive
  11. Frameless - a successor to the Less Framework
  12. The Golden Grid Systemexplained by Sean Goresht
  13. HTML5 Boilerplate — very popular framework. Customizable before download.
  14. SenCSS — no grids, just basic CSS. From 2010.
  15. Skeleton: CSS boilerplate for mobile-friendly development
  16. Tiny fluid grid
  17. YAML
  18. YUI (Yahoo CSS)

CSS Extensions and Javascript libraries

  1. Less CSS extension — code that allows you to do things like use variables in CSS. (There's a related WordPress plugin, WP-LESS)
  2. Sass — An extension of CSS3 
  3. Galleria - javascript image-gallery framework (formerly Tripoli)
  4. jQuery - javascript library used by many frameworks
  5. MediaElement.js — a javascript framework for handling audio and video the HTML5 way,  
  6. Modernizr: javascript library that detects HTML5 and CSS3 features in the browser with fallbacks for older browsers
  7. Respond.js - javascript library for older IE browsers

WordPress Themes

Notefree themes can be a security risk (WMPU.org, 2011-January)

Intalling Using Subversion

WordPress adds a new default theme each year. If you add them to the Subversion "externals" file, you should be able to update them with Subversion.

You can install additional themes using Subversion. The main Subversion repository for themes is at http://themes.svn.wordpress.org/. To install a theme via Subversion, you follow the same steps listed above for plugins, but this time in the themes directory. In brief:
  1. Navigate to the wp-content/themes/ directory.
  2. Add the theme to a Subversion configuration file as follows:
    1. svn propedit svn:externals --editor-cmd vi .
    2. In the file you just opened, add a line for the theme and version you plan to install. For instance, to add version 1.1 of the 2010 theme, you would add this line:
      1. twentyten http://themes.svn.wordpress.org/twentyten/1.1/
  3. Install the theme by executing at the command line:
    1. svn update
      1. Note: You won't be able to update the theme in use. You'll get an error message about a file being locked.

Themes worth looking at

Themes can be grouped along two dimensions: (1) frameworks/parents vs. standalone themes, and (1) free vs. paid themes. Standalone themes can be edited, but framework/parent themes are designed to be modified through the creation of "child" themes. 

Making things a little more complicated, there are some non-WordPress-specific frameworks out there that can be used as the basis for WordPress themes. 
I haven't scratched the surface of WordPress themes, and I don't really know which ones are any good. But below I list some themes that seem to have potential.

Frameworks

  1. Responsive (developer; svn directory: http://themes.svn.wordpress.org/responsive/): Popular! Pro version for $35
  2. Reverie (responsive, based on Zurb's Foundation): Classy! Free! Updated 2013-December
  3. Thematic (developer site; svn directory: http://themes.svn.wordpress.org/thematic/): Last updated 2013-April
    1. Beginner's Guide to Thematic, from Sitepoint (2010-August)
  4. Prototype (svn directory: http://themes.svn.wordpress.org/prototype/): Last updated 2013-January
  5. Hybrid Core Framework
  6. Genesis - $60 for framework, more for a frame on top of it
  7. Themify
  8. Whiteboard (responsive, built on the Less Framework): Last updated 2012-September
  9. X - customizable commercial theme
  10. Thesis ($87 to $164)
  11. Upthemes Framework (on github)
  12. Simon WP Framework (developer; svn: http://themes.svn.wordpress.org/simon-wp-framework/): Updated 2014-March
  13. Gantry
  14. Themnific - $50 (free version available)

Standalone/starter themes

  1. Frank: Build on Zurb's Foundation. Fast, responsive, actively maintained.
  2. WordPress Bootstrap from 320 press. Actively maintained.
  3. Suffusion (developer; svn: http://themes.svn.wordpress.org/suffusion/): Updated 2013-August. Over 1m downloads, 4.8 stars
  4. Smpl Skeleton (developer; svn: http://themes.svn.wordpress.org/smpl-skeleton/): Responsive theme, actively maintained.
  5. Underscores (_s): download, customize, learn. Actively maintained.
  6. Catch Box (from Catch Themes; svn directory: http://themes.svn.wordpress.org/catch-box/): Actively maintained.
  7. Simple Catch (from Catch Themes; svn : http://themes.svn.wordpress.org/simple-catch/): Actively maintained
  8. HTML5 Reset (on github): Simple starter theme with no styling. Actively maintained.
  9. HTML5 WordPress shell: Responsive
  10. Independent Publisher (developer; svn: http://themes.svn.wordpress.org/independent-publisher/): Newish 2014
  11. The Bootstrap (developer site; svn directory: http://themes.svn.wordpress.org/the-bootstrap/): Last updated in 2012
  12. iTheme2
  13. Responsive Twenty-Ten: plugin/child theme for twenty-ten
  14. Twenty-Ten Five: default WP theme modified to include HTML5 support. See Smashing Magazine article.
  15. Bones: simple responsive theme
  16. Atahualpa (developer; svn directory: http://themes.svn.wordpress.org/atahualpa/): Actively maintained.
    • In 2010, I got a weird installation error when installing via Subversion ("not a working copy"), and the readme files were shitty (version numbers aren't even updated), so I uninstalled this. But it's been updated regularly since then.
  17. Cleanr (developer site; svn directory: http://themes.svn.wordpress.org/cleanr/): Last updated 2012-September
  18. Platform (svn directory  http://themes.svn.wordpress.org/platform/): Updated 2012-December
  19. Roots - based on HTML5 Boilerplate and Bootstrap from Twitter
    1. Before using, figure out issues related to relative URLs
    2. Yoast hates relative URLs (2012-August), says so in a comment on a Roots bug
  20. Shell Lite (developer; svn directory: http://themes.svn.wordpress.org/shell-lite): Last updated 2013-February
  21. Respo: free and responsive, built on Themnific commercial framework
  22. StrapPress: commercial ($35) responsive theme built on Bootstrap framework
  23. Clean Response: free responsive theme from premium-theme developer Theme Furnace, 2012-September

References

WordPress

  1. WPMUdev.org's posts about themes
    1. Post about theme frameworks,
  2. Vandelay Design's guide to 15 free WordPress themes and frameworks (2012-June)
  3. WpTutsPlus's post about developing responsive themes using frameworks (2012-March)
  4. Premiumwp.com's list of the best paid responsive Wordpress themes (mostly around $50 to $80 each) (2012-September)
  5. Javascript
    1. Using Google-hosted javascript libraries in WordPress (digwp.com, 2011-December)
    2. Including jquery in WordPress the right way (digwp.com, 2009-June)
    3. WordPress codex related to loading javascript
  6. Wicked WordPress Theme Frameworks (sitepoint, 2011-March)

General

  1. Responsive Web Design (Ethan Marcotte, 2010-May; pathbreaking article)
  2. Responsive Design: What It Is and How to Use It (Smashing Magazine, 2011-January)
  3. Using the Less CSS Framework (Wilder Tweedale, 2011-June)
  4. Responsive Web Design with HTML5 and the Less Framework 3 (Sitepoint, 2011-January)
  5. Using Less CSS, BluePrint and WP for a Faster Workflow (Tutsplus, 2011-September)
  6. The Right Frame of Mind: Applying the Lessons of CSS Frameworks (Sitepoint, 2010-March)
  7. Framework Fight: Zurb Foundation vs. Twitter Bootstrap (Design Shack, 2012-May)
  8. Eric Meyer's site (CSS guru)
  9. SMACSS - scalable and modular architecture for CSS - a kind of style guide. Some is available free, some requires you to by the ebook (you then get access to more content plus screencasts).

Other graphics links

  1. Genericons: icon font

Drupal Themes — see separate page

Comments