Classes to help get you started styling your default WordPress post

WordPress Sample CSS

// ============================================= 

//  WordPress Generic Styles            

// ============================================= 


// ---------------------------
// Variables

$body-txt-spacing: 20px;      // Amount of space below each paragraph 
$article-max-width: 550px;    // Maximum width of text column



// ---------------------------
// Basic Styles

%default-link {
	a {
		text-decoration: underline;
	}
}


// ---------------------------
// Headline Styles

%style-headlines {
	> h1 {
		@extend %h1;
	}
	> h2 {
		@extend %h2;
	}
	> h3 {
		@extend %h3;
	}
	> h4 {
		@extend %h4;
	}
	> h5 {
		@extend $h5;
	}
	> h6 {
		@extend $h6;
	}	
}


// ---------------------------
// List Styles

@mixin style-lists {
	> ul {
		list-style: disc outside;	// Outside position lets bullets hang like good puncuation should 
	}

	> ul,
	> ol {
		text-align: left;
		padding: 0 0 0 22px;
		margin-bottom: $body-txt-spacing;
		li {
			margin-bottom: 10px;
		}
    		@extend %default-link;
	}

	// List inside list
	> ul > ul,
	> ul > ol,
	> ol > ol,
	> ol > ul {	
		list-style: circle outside;
		padding-left: 36px;
	}		
}

%style-lists {
	@include style-lists;
}


// ---------------------------
// Blockquote Styles

%style-blockquote {
	> blockquote {
		text-align: left;
		border-left: 3px solid #ccc;
		padding-left: 24px;
		margin-bottom: $body-txt-spacing;

		// Descendent Styles
		 @extend %default-link;
		@include style-lists; 

		p {
			margin-bottom: $body-txt-spacing;
		}
	} // blockquote
} // style-blockquote


// ---------------------------
// Video

// Recommend using FitVids to detect video aspect ratio and properly style
// http://fitvidsjs.com/



// ---------------------------
// WordPress Image Alignment


// Force WordPress images to maintain aspect ratio
// while staying within maximum width contraints

// `width: auto`: By default, we make every image fill the width of its container.
// Unless they reach the maximum natural width of the base image. 
// For some reason, images weren't respecting that rule. 
// `height: auto`: Ensures image maintains aspect ratio no matter its container
// `margin` assures proper spacing throughout
@mixin wp-img {
	width: auto;
	height: auto; 
	margin-top: 8px;
	margin-bottom: 12px;
}

@mixin wp-img-align {
	> img,
	> a img,
	> p img {
		@include wp-img;
	}

	.wp-caption > img {
		// Makes caption fit snugly
		margin-bottom: 4px;		
	}

	.size-full,
	.alignnone,
	.alignright,
	.alignleft {
		max-width: $article-max-width;
		img {
			@include wp-img;
		}
		&.wp-caption img {
			// Makes caption fit snugly
			margin-bottom: 4px;		
		}
	}

	.size-full { 
		width: 100%; 
		max-width: 100%;
	}

	.alignright,
	.alignleft {
		max-width: 53%;
		// Sanity check to make sure floated image
		// doesn't make text column too narrow and
		// difficult to read 
	}
	.alignright { 
		float: right; 
		margin-left: $body-txt-spacing; 
	}
	.alignleft { 
		float: left; 
		margin-right: $body-txt-spacing;
	}
}

%wp-img-align {
	@include wp-img-align;
} // wp-img-align


// ---------------------------
// All Generic Style Tags

%style-tags {
	@extend %style-headlines;
	@extend %style-lists; 
	@extend %style-blockquote; 
	@extend %wp-img-align;

	> p {
		@include wp-img-align;
	}

	.wp-caption-text {
		font-size: 11px;
		line-height: 120%;
		margin-bottom: 40px;

    		@extend %default-link; 
	}

} // style-tags