§ 4.4 Pull Quotes

Pull quotes are tricky, but with this little ditty they’re not so difficult or tedious anymore. The example is an improvement based upon the 24 ways article discussing swooshy curly quotes without images. This particular example depicted takes advantage of psuedo selectors and the <aside> tag.

HTML
<aside class="pull–quote">
	<blockquote>
		<p></p>
	</blockquote>
</aside>
_typeplate.scss
$pull-quote-fontsize: 4em !default;
$pull-quote-opacity: 0.5 !default;
$pull-quote-color: #dc976e !default;


// $Mixin $Pull Quotes
// -------------------------------------//

@mixin pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color) {
	position: relative;
	padding: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
	&:before,
	&:after {
		height: context-calc($pull-quote-fontsize, $pull-quote-fontsize, em);
		opacity: $pull-quote-opacity;
		position: absolute;
		font-size: $pull-quote-fontsize;
		color: $pull-quote-color;
	}
	&:before {
		content: '“';
		top:  0;
		left: 0;
	}
	&:after {
		content: '”';
		bottom: 0;
		right: 0;
	}
}

// use this include on your pull quote selector class
.pull-quote {
	@include pull-quotes;
}
↑ back to top