Mixins

Some handy mixins that you may find useful.

FatKit currently has a few handy mixins for you to use on your projects.

Breakpoints

FatKit includes a number of responsive classes to style your content for different viewport widths. This table gives you an overview of the available breakpoints and the associated devices. These breakpoints can be edited in the variables Sass file in the base folder.

The default breakpoints are:

Example

@include bp-at-least($breakpoint-medium) {
	/* Matches "small" breakpoint and above */
}

@include bp-until($breakpoint-large) {
	/* Matches up to "large" breakpoint */
}

@include bp-between($breakpoint-medium, $breakpoint-large) {
	/* Matches anything between the "medium" and "large" breakpoints */
}

Fluid Image Ratio

Sometimes you need a background-image to be responsive. This mixin can be used to do just that using padding to create the responsive space for the background image. See voormedia's article for more information.

Example

.fluidratio {
	/* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */
	@include fluid-ratio(800px 200px, 300px 150px);

	background-image: url(http://placehold.it/800x200);
}

Font Face

Quickly include a font-face declaration. The only required parameters as the font name: the way you refer to the font in your CSS, and font filename: the name of the font file. The path to the font is declared in the variables file in the base directory and defaults to /assets/fonts.

Example

@include font-face('FontFamily', 'Font Filename', 'Font Weight', 'Font Style', 'Font Stretch', 'Font Display');

Font Size

rems are awesome. If you still like to declare your fonts by pixel size (and let's face it, it is still the easiest way from a PSD) you can and should use this mixin to automatically include the rem font size based on the base font size and passed value.

Example

p {
	@include font-size(24);
}

Line Height

My personal preference with line-height is to use a value without a unit of meaurement because it then becomes based off the font size. However, there are cases where you need to specifiy a pixel value for the line height. But, we're using rems now (see above) and should specify line-height using the same unit. Use this mixin in the same way as the font-size one above.

Example

p {
	@include line-height(24);
}

Triangles

Create triangles in CSS quickly and easily with this mixin by Matt Care. Pass through a size (two if you want different dimensions and not a square), a colour (two if you want a different fore and background) and a direction (one of up, down, left, right, up-left, up-right, down-left, down-right, inset-up, inset-down, inset-left, inset-right).

Example

.element {
    @include triangle(50px, #000, 'up');
}

Or, as a pseudo-element add an extra parameter of 'before' or 'after':

.element {
    @include triangle(10px, #000, 'left', 'before');
    @include triangle(10px, #000, 'right', 'after');
}

On a button

Angles

Based on this article and the fact that quite a few sites now insist on angled sections this mixin should make things much easier. It creates horizontal angles on the top edge, bottom edge, or both, of an element. The only caveat is that the background-color must be solid.

Example

p {
	@include angle(['before'/'after'], [flipped: true/false], [angle: 1.5deg]);
}

Overlay

Returns everything you need for a pseudo-element to cover its container in the colour you desire. Just pass it a background colour (usually a variable but hex works) an opacity (if 0.8 isn't the default) and a z-index if you need more or less than 0

Example

.element {
	@include overlay(#000, .8, 0 );
}

SVG Background

Set a background as an svg, defining a custom fill colour.

Example

/* full svgs list is defined in /assets/styles/base/_variables.scss */
$svgs: (
	'checkered': '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 8 8">
	<g fill="var(--f-svg-fill)"><path fill-rule="evenodd" d="M0 0h4v4H0V0zm4 4h4v4H4V4z"/></g></svg>'
);

/*   Set fill colour:
*
*     1. Use fill="var(--f-svg-fill)" in an SVG's markup as in the map above.
*        This sets a replaceable string target for svg functions & mixins.
*     2. Pass (optional) any fill colour as second arg to svg() or svg-bg.
*/

/* example usage */
.svg {
	/* returns svg within background-image: url() property */
	/* ideal use case for this would be within a pseudo element */
	@include svg-bg('checkered', color('primary', base));
}

/* return svg as a url, setting background-image manually */
.svg-custom {
	background-image: svg-url('checkered');
}

							

Animations

A couple of helper mixins for custom animations.

Example

.anim1 {
	/* improve performance on mobile/tablet devices */
	@include hardware-accel();
}

.anim2 {
	/* improve aliasing on mobile/tablet devices */
	@include improve-anti-alias();
}

/* full example */
@include keyframe(changecolour) {
	0% {
		color: color('black');
	}

	100% {
		color: color('white');
	}
}

a:hover {
	/* improves both aliasing & performance on mobile/tablet devices */
	@include animationperf;

	/* delay, duration, animation */
	@include animation(1s, 2s, changecolour);
}

Center

Center align an absolutely positioned element.

Example

.centeredelement {
	@include center();
}

/* css output */
.centeredelement {
	position: absolute;
	bottom: auto;
	left: 50%;
	right: auto;
	top: 50%;
	transform: translate(-50%, -50%);
}

Family

There are far too many mixin helpers to list here, go look it up in your fatkit install: /assets/styles/sass/base/mixins/_family.scss.

Fluid Font Size

Responsive font sizing. The size of the font will scale with the viewport. Pass your min font size and max font size. Mixin automatically has min & max breakpoints set, uses small / xlarge breakpoints which are defined in: /assets/styles/base/_variables.scss

Example

/* minimal usage, breakpoint defaults where font sizing is triggered: min-width: 480px, max-width: 1220px */
h1 {
	@include fluid-font-size(24px, 72px);
}

/* advanced usage */
h2 {
	@include fluid-font-size(20px, 50px, font-size, $breakpoint-medium, $breakpoint-large);
  )
}

/* advanced usage hack */

/* the mixin uses the property 'font-size' as it's default reference for sizing, 
/* but we can replace this to create a fluid sizing for any other property! */
.element {
	@include fluid-font-size(20px, 50px, margin-bottom, $breakpoint-medium, $breakpoint-large);
  )
}

Fluid Video

Uses the padding-bottom technique to create a fluid ratio element, for video and iframes.

Example

.video {
	/* fluid 16:9 aspect ratio container: width, height */
	@include fluid-video(640, 360);
}

Full Width

Break an element out of it's constrained parent (usually within f-container)

Example

.fullwidth-element {
	@include full-width();
}

/* css output */
.fullwidth-element {
	left: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	position: relative;
	right: 50%;
	width: 100vw;
}

HR

A custom styled hr element, with a few different configurable options.

Example

.hr-simple {
	/* colour, thickness */
	@include hr(#000, 2);
}

.hr-advanced {
	/*colour, thickness, width, alignment(left,center,right), override user agent styles */
	@include hr(#000, 1, 400, 'left', true);
}

Inner Border

This adds an inner border to your element, ignoring the box model. Useful if you want to have a regular border, but with another border inside it - without the extra html markup.

Example

.doubleborder {
	/* inner border */
	@include inner-border(#666, 5px, 0);

	/* regular outside border, oh my! */
	border: 5px solid red;
}