David Herrera dlh01

Real navigation links need to be added
Real logo and header treatment needs to be added
Ads break out of the container at tablet-ish viewport size
Activate sharing bars on posts
Style next/previous post links
Hook up real Press Releases feed
Media sizes not quite right yet
"From Our Blogs" content block missing on home page
Cookies for Comments image creates extra white space at bottom of site

This post outlines a way to use Sass, Compass, and Grunt to maintain stylesheets for a WordPress parent and child theme.

Sass is useful for many reasons, but for our purposes, the two most helpful features are partials and variables. We'll also take advantage of the importPath setting of Compass and Grunt.

Comments and improvements are always welcome.

Step 1: Create your parent stylesheet

Create a new Compass project in your theme and style away. When you're finished, your theme directory (called parent here) might look something like this:

	# ----------------------------------------------------------------------
	# Gzip compression
	# ----------------------------------------------------------------------

	<IfModule mod_deflate.c>

	# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
	<IfModule mod_setenvif.c>
	<IfModule mod_headers.c>
	SetEnvIfNoCase ^(Accept-EncodXng\|X-cept-Encoding\|X{15}\|~{15}\|-{15})$ ^((gzip\|deflate)\s,?\s)+\|[X~-]{4,13}$ HAVE_Accept-Encoding

	<?php

	/**
	*
	* Register and enqueue assets
	*
	*/
	add_action( 'wp_enqueue_scripts', 'function_name_here' );
	function function_name_here() {

	<?php
	/**
	*
	* Install WordPress without "Hello world!" and other default content
	*
	* This function overrides the standard wp_install_defaults() in
	* wp-admin/includes/upgrade.php. Leaving the function empty causes WordPress
	* to install without the default post, page, links, categories, etc.
	*
	* Save this file as install.php inside your wp-content directory before beginning installation

	/**
	* Bootstrap breakpoints. Thanks goes to Chris Coyier for the inspiration.
	*
	* Original post and usage example: http://css-tricks.com/custom-user-mixins/
	*/
	@mixin breakpoint($point) {
	@if $point == large-display {
	@media (min-width: 1200px) { @content; }
	}
	@if $point == default {

	<section class="cabinet">
	<div class="cabinet-large">
	<div class="media media-heading-medium">
	<?php // The second post in the Headlines zone ?>
	<?php $zone_query->the_post(); ?>
	<?php [post stuff] ?>
	</div><!--/.media-->

	<?php
	/**


	# Enable these for source maps
	# output_style = :compact
	# sass_options = { :debug_info => true }

	the_widget( 'Jetpack_Widget_Twitter',
	array(
	'title' => 'RNS on Twitter',
	'account' => 'RNS',
	'show' => 3,
	'hidereplies' => true,
	'hidepublicized' => true,
	'includeretweets' => true,
	'followbutton' => true
	),

	(min-width: 45rem) {
	html {
	font-size: 75% or 125% etc.
	}
	}

	// via http://nataliemac.com/slides/type/