Accordions
Allows you to define the vertical padding.
Visual examples of classes that use the accordion mixin here
Mixins
@mixin accordion-size(
$v-spacing
);
Example usage
.element {
@include accordion-size(20px);
}
Alerts
Border and text colours have default settings, but background colour is required.
Visual examples of classes that use the alert mixin here.
Mixin
@mixin alert-variant(
$background,
$text-colour: $font-colour-base,
$border: 0
);
Example usage
.element {
@include alert-variant($background: #CCC, $text-colour: #000, $border: #000 1px solid);
}
Animation fade in/out
These mixins use keyframe animations that toggles the opacity.
A duration can be passed as an argument or left as default.
Mixins
@mixin fade-in(
$duration: .3s
);
@mixin fade-out(
$duration: .3s
);
Example usage
.element {
@include fade-in($duration: .5s);
}
.element.hidden {
@include fade-out($duration: .1s);
}
Animation pop up fade in
This mixin makes the element position: relative and uses a keyframe animation which makes the element top: 100% and opacity: 0 and animates it to top: 0 and opacity: 1.
A duration can be passed as an argument or left as default.
Mixin
@mixin pop-up-fade-in(
$duration: .2s
);
Example usage
.element {
@include pop-up-fade-in($duration: 1.5s);
}
Animation rotate
This mixin rotates an element infinitely and at .2 seconds duration by default.
Mixin
@mixin rotate(
$duration: .2s,
$iteration-count: infinite
);
Example usage
.element {
@include rotate($duration: .2s, $iteration-count: infinite);
}
Animation slides
This mixin slides content up and down using a max height transition.
The mixin slide-down-collapsed should be applied to the collapsed element and slide-down-active should be applied to the element when it is open/active.
Note that because the max-height is used to perform the animation, an approximate max-height is required on the slide-down-active mixin. If the height is too large it will cause a delay in the animation and if it is too small it will not open fully.
Visual examples of accordions that use the slide mixins here.
Mixin
@mixin slide-down-collapsed(
$duration: .8s
);
slide-down-active(
$duration: .8s,
$approx-height: 500px
);
Example usage
.element {
@include slide-down-collapsed($duration: 1s);
}
.element.is-open {
@include slide-down-active($duration: 1s, $approx-height: 300px);
}
Aspect ratio
This mixin is available instead of using a transparent image as a hack to maintain aspect ratio which is very handy for making video iframes act responsively.
The content needs to go in a nested element called .aspect-ratio-content.
Mixin
@mixin aspect-ratio(
$width,
$height
);
Example usage
.element {
@include aspect-ratio(150px, 200px);
> .aspect-ratio-content {
[CONTENT SHOULD BE IN THIS ELEMENT]
}
}
Container
This is useful to define the main container of your site/app as it makes the container centred, gives horizontal spacing for mobile and desktop as well as a max width.
Note that the container mixin includes the horizontal-spacing mixin here, so it will use the default spacing set unless you reset the mixin arguments.
Mixin
@mixin container(
$max-width-content: $max-width-content
);
Example usage
.element {
@include container($max-width-content: 900px);
}
Custom icon lists
Allows you to define your own custom icon for featured lists.
Visual examples of classes that use the featured icon list mixins here.
Mixins
@mixin featured-icon-list(
$icon-path
);
@mixin featured-icon-list-lg(
$icon-path
);
Example usage
ul {
@include featured-icon-list($css-bg-path+'icons/tick-primary.svg');
}
ul.lg {
@include featured-icon-list-lg($css-bg-path+'icons/tick-primary.svg');
}
Form controls
Mixins for form controls and their hover/focus/disabled states.
The mixins all include default settings so can be used with or without arguments passed in the parameters.
Visual examples of classes that use the input mixins here
Mixins
@mixin input-styles(
$font-size: $font-size-forms-md,
$height: $input-height,
$max-width: $form-field-max-width,
$v-padding: $input-v-padding,
$h-padding: $input-h-padding,
$placeholder-colour: $input-placeholder-colour,
$chrome-autofill-colour: $input-chrome-autofill-colour
);
@mixin input-border(
$background-colour-base,
$border: $form-border-base,
$border-radius: $form-border-radius
);
@mixin input-border--hover(
$border-color: $font-colour-base,
$color: $font-colour-base
);
@mixin input-border--disabled(
$background-color: $grey-very-light,
$opacity: $opacity-disabled
);
Example usage
.element {
@include input-styles;
@include input-border;
&:hover,
&:focus {
@include input-border--hover;
}
&:disabled {
@include input-border--disabled;
}
}
Mixin
@mixin font-size-responsive($mobile-size, $desktop-size);
Example usage
.element {
@include font-size-responsive($font-size-md-mobile, $font-size-md-desktop);
}
Full overlay
Creates an element with full height and width and absolute positioned pinned to all corners.
Useful to use on an element or a before/after element.
Mixin
@mixin full-overlay(
$bg-colour: $black
);
Example usage
.element {
@include full-overlay(#FFF);
}
Headings
The heading-style mixin defines general heading styling such as font weight, padding etc.
The heading-style-responsive mixin defines the font sizes passed in for mobile and desktop as well as includes the heading-style mixin.
Note that font sizes should be declared in rems as explained in more detail here.
Visual examples of classes that use the heading mixins here
Mixin
@mixin heading-style;
@mixin heading-style-responsive($mobile-size, $desktop-size);
Example usage
.element {
@include heading-style;
}
.element {
@include heading-style-responsive($font-size-h2-mobile, $font-size-h2-desktop);
}
Horizontal spacing
Defines padding on the right and left for mobile and desktop.
Mixin
@mixin horizontal-spacing(
$h-spacing: $h-spacing,
$h-spacing-mobile: $h-spacing-mobile
);
Example usage
.element {
@include horizontal-spacing($h-spacing: 30px, $h-spacing-mobile: 20px);
}
Icons in circles
Each mixin does a different job and can be used one at the time or all at once on an element
Note that all mixins here have default values that can be used by not passing any arguments or overriden by passing arguments
Visual examples of classes that use the icons-in-circles mixins here
Mixins
@mixin icon-in-circle(
$bg-colour: $icon-colour,
$colour: $white,
$border: none
);
@mixin icon-in-circle--size(
$dimension: $circle-icon-size-md
);
Example usage
.element {
@include icon-in-circle($bg-colour: transparent, $colour: #000, $border: #FFF);
@include icon-in-circle--size($dimension: 2.5rem);
@include icon-in-border-circle--size($dimension: 2.5rem);
}
Inline list gutter
Mixin
@mixin inline-list-gutter(
$gutter
);
Example usage
.element {
@include inline-list-gutter(20px);
}
Margin
A shorthand notation for defining margin with null values
Mixin
@mixin margin(
$values
);
Example usage
.element {
@include margin(20px auto null 1%);
}
Media queries
Mixins for mobile first media query breakpoints, based on screen widths.
Breakpoints are defined in EMs to cater cross browser for users who zoom in or change their font size settings. There are various articles explaining conclusions to these experiments such as zellwk.com and cloudfour.com.
Mixins
24em (384px) and above:
@mixin screen-xs-min;
40em (640px) and above:
@mixin screen-sm-min;
50em (800px) and above:
@mixin screen-md-min;
68em (1088px) and above:
@mixin screen-lg-min;
100em (1600px) and above:
@mixin screen-xl-min;
Example usage
.element {
@include screen-xs-min {
[STYLES FOR SCREENS ABOVE 24EM (384PX)]
}
}
Padding
A shorthand notation for defining padding with null values
Mixin
@mixin padding(
$values
);
Example usage
.element {
@include padding(20px null 10px null);
}
Positioning
A shorthand notation for positioning elements
Mixin
@mixin position(
$position,
$box-edge-values
);
Example usage
.element {
@include position(absolute, 0 20px 2rem null);
}
Helpers
Some handy helpers
Mixins
Clearfix:
@include clearfix;
Align content centre using flexbox:
@include align-content-centre; @include v-align-content-centre;
Removes default list styling:
@include remove-list-styles;
Removes default link styling (Once can be added to the anchor itself and the other on a wrapping element):
@include remove-link-style; @include remove-link-styles;
Style to appear clickable (pointer as cursor and opacity on hover/active/focus):
@include clickable;
Hides text but not before/after element:
@include hide-text-not-pseudo;
Sets background centre, cover and no repeat:
@include bg-cover;
Hides text with a text indent and overflow hidden:
@include hide-text;
Sets margin right and left to auto:
@include m-centre
Example usage
.element {
@include clearfix;
}