Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

No longer in use. See my ajy+ repo instead.

branch: master
README
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.
Something went wrong with that request. Please try again.