Add responsive helper classes to your project

#tipsForKickoff

• Originally posted at trykickoff.com

Kickoff doesn’t include responsive helper classes by default, but I created some for a recent project. Assuming your Sass breakpoint variables (in _variables.scss) look something like this:

/**
 *  Breakpoints
 * =================================
 * There are no common breakpoints so these are just a suggestions
 * You'll need to define your own breakpoints to suit your design
 */
$bp-narrow            : 500;  // Set in px
$bp-mid               : 750;  // Set in px
$bp-wide              : 1000; // Set in px
$bp-huge              : 1250; // Set in px

You can then add a series of helper classes, like so:

/**
 * Responsive helper classes to show/hide content based on our media-queries
 */
.u-showBelowNarrow {
	@include respond-min($bp-narrow) {
		display: none;
	}
}

.u-showBelowMid {
	@include respond-min($bp-mid) {
		display: none;
	}
}

.u-showBelowSingleCol {
	@include respond-min($bp-single-col) {
		display: none;
	}
}

.u-showBelowWide {
	@include respond-min($bp-wide) {
		display: none;
	}
}

.u-showBelowHuge {
	@include respond-min($bp-huge) {
		display: none;
	}
}

.u-showAboveNarrow {
	@include respond-max($bp-narrow) {
		display: none;
	}
}

.u-showAboveMid {
	@include respond-max($bp-mid) {
		display: none;
	}
}

.u-showAboveSingleCol {
	@include respond-max($bp-single-col) {
		display: none;
	}
}

.u-showAboveWide {
	@include respond-max($bp-wide) {
		display: none;
	}
}

.u-showAboveHuge {
	@include respond-max($bp-huge) {
		display: none;
	}
}

In my project, these were added to _helper-classes.scss but you can add them wherever you wish.

What’s the .u- prefix for?

Kickoff namespaces some CSS classes in the framework to help developers know what module it’s from or what type of style it is. Here are a few examples:

.u-className {} /* Utility class */
.g-className {} /* Grid class */
.l-className {} /* Layout class */

Usage

Usage should be fairly straightforward, just add the relevant class to your html element:

<div class="u-showAboveSingleCol">
	Show this above $bp-single-col
</div>

<div class="u-showBelowMid">
	Show this below $bp-mid
</div>

#tipsForKickoff

To find more tips like this for Kickoff, lookout for the #tipsForKickoff hashtag