Fetching latest commit…
Cannot retrieve the latest commit at this time
|Failed to load latest commit information.|
9/12/13: Out of date... working on a replacement. this has changed a lot over the last couple years. This is simply my standard blank HTML5 Wordpress theme. I use it as a jumping-off point for my projects. It is based heavily on the "Blank" theme by Chris Coyier (it can be found at digwp.com). The original theme is HTML4, so I HTML5'd it up and am adding a couple of stuff such as: - four widget areas in convenient places for me: Header, Nav (for WP3 menu), Sidebar, Footer - WP3 menus (create your menus and add as widgets within WP) - a bunch of stuff in the functions.php file - my very specific, and probably wrong, HTML5 document structure. If you think it is wrong, (for example, I don't think that I'm using <aside> correctly), let me know. A good thing, though - I am not using a wrapper div. The .body class works just fine for that in most cases. That document structure is as follows: BODY [body class, not to be confused with .body] -HEADER.body -NAV.body -SECTION.body [.index .page .single .archive] --aside --article [post class] ---header ---section ---footer ----section.comments -----article[.alt] ------header ------[comment text] --nav.pagination ---ul ---li (there are two li's, one for "prev posts" and one for "next posts") -FOOTER.body There are two CSS files - ie.css and style.css. style.css uses a customized version of the new normalize.css reset stylesheet. I've taken it from the stylesheet in the HTML5 Boilerplate by Paul Irish and moved a few things around. It's basically structured as: reset styles first, then fill-in-and-use styles. I've tried to put it together in a way that I don't usually have to touch the reset section. I use a faux-grid - basically a few extra classes that define half-width, quarter-width, third-width, and sixth-width columns with gutters. It's not a perfect system but it helps me out with layouts. There are a few media queries (ORIGINALLY based on Less Framework, now tweaked a lot) that also have the grid classes built in. The default layout width is 960px. I use "box-sizing: border-box" in my reset stylesheet for layout elements. This means that browsers will calculate width and height to INCLUDE padding and border on those elements... see http://css-tricks.com/box-sizing/ for more info on this. This works in Gecko/Webkit browsers, Opera, and IE 8+. See below for my IE7- workaround. There are a couple template html files for easy development. My IE fallback system is pretty specific to my workflow as well: - For IE9, I do nothing at this time - IE8 is caught in the [if lt IE 9] conditional comment that contains the html5shiv and ie.css (IE stylesheet) so adjustments can be made to the layout if needed. - IE7 and IE6 are also caught in the [if lt IE 9] conditional comment. They also get a different <html> tag that contains [class="ie7"]. This is because IE7 and below don't work with the box-sizing trick above, so we need to define different widths on those elements. ie.css has a few extra "grid" styles built in since IE6,7 don't support box-sizing, and IE 8 doesn't support nth-of-type. - Note: I'm using html5shiv. If you use Modernizr, that already has the shiv built in - Note: IE 6-8 don't support media queries and will use the default 960px layout. You can use Respond.js (not included) to enable your media queries in IE, but I don't see a real need for it - IE is ONLY on desktop computers and 960px is a pefectly acceptable layout for nearly all folks. I guarantee that this whole theme will change over time. Comments/Questions? Contact me at my site http://ajy.co or try leaving a comment here. Maybe I'll see it.