Mixins

Some handy mixins that you may find useful.

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

Breakpoints

A handy mixin for quick and easy breakpoints anywhere in your CSS. See below for the options available.

Opacity

Normalize the opacity property all the way down to IE6. Hopefully not required, but handy if you need it.

Fluid Image Ratio

Probably too under-used. This handy mixin can be used with background images to create a responsive container for images.

Font Face

If you need to add in a custom font you can use this to normalize the CSS required. Just pass it a name and path.

Font Size

Enter your desired font-size in pixels and the mixin will do the rest as long as you have a base font size set.

Triangles

Create triangles in CSS using borders. Also included is the ability to add arrows for tooltips if required.

Angles

Create elements with angled horizontal edges quickly and easily with this mixin.


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:

Size Breakpoints Device
Mini up to 479px Phones portrait
Small 480px to 767px Phones landscape
Medium 768px to 959px Tablets portrait
Large 960px to 1199px Desktops & tablets landscape
Xlarge 1200px and larger Large Desktops

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 */
}

Opacity

FatKit supports IE9 and up and because of this you shouldn't need to use this mixin as the standard preoprty opacity will work for IE9 upwards. However, the mixin is there in case you do need to support IE8, but it's highly recommended that you don't use FatKit in this circumstance.

Example

.selector {
	@include opacity(0.5);
}

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 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]);
}

Normal Angle

Flipped Angle

Angle on both