A Starter WordPress Theme Forked by Terence Devine

I created this Starter Theme to tackle some of the little issues that I seemed to be dealing with for every project, such as base SCSS style sheets, linked scripts, pagination function, stripped down markup, and the array of WordPress files needed for a proper theme.

There are a few things you may want to know before starting with this theme to cut down the number of head scratches along the way - Enjoy!

I prefer to use the SCSS syntax of the Sass language instead of vanilla CSS, as it helps immensly with development. A few of my favorite features are:

• nested attributes
• mixins (with compass)
• variables
• extending styles
• @import
• Many more!

I would highly suggest CodeKit for all your pre-processor needs... It is also good for javascript concatination, image compression, linting, autoreload and more!

My CSS reset of choice is normalize.css (scss/normalize.scss) - if you are used to using the popular reset.css, it may throw you off as it doesn't strip ALL styles - but instead leaves the typical base styles (ie: margin on h1, h2, ul, ol, etc.)

I use Aria roles as my attribute selectors for the main sections of my site. You may notice them on, but not limited to:

• header[role=banner]
• article[role=main]
• section[role=main]
• div[role=main]
• footer[role=contentinfo]

The grid system used needs the following basic markup:

<div class="grid">
	<div class="grid-2-3">
		<h1>Main Content</h1>
	</div>
	<div class="grid-1-3">
		<h2>Sidebar Content</h2>
	</div>
</div>

For more info you can view (and fork!) my example on CodePen: Grid System

Any layout for smaller devices (tablets) should be added separately in the stylesheet as to not break the layout.

The Following do not take effect until 800 pixels (media queries)

• Grid System
• Hover States

I created this theme with IE8+ support in mind - if you need additional support, I would suggest removing the line

@include box-sizing(border-box);

from line 5 of scss/base.scss, as well as updating the clearfix on line 18 of scss/bits.scss to

.clearfix{

	&:before,
	&:after{
	    content: "";
	    display: table;
	} 
	&:after {
		clear: both;
	}

    zoom: 1;
}