Layout

mixins

align

@mixin align($direction: both) { ... }

Description

Center an element on either or both axes. Parent container must have position: relative to work

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$direction`	Specify which axes to center the element on.	`String`	`both`

Example

Input

.aligned-both {
  @include align();
}

.aligned-vertical {
  @include align(vertical);
}

.aligned-horizontal {
 @include align(horizontal);
}

Output

.aligned-both {
  position: absolute;
  transform-style: preserve-3d;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.aligned-vertical {
  position: absolute;
  transform-style: preserve-3d;
  top: 50%;
  transform: translateY(-50%); }

.aligned-horizontal {
  position: absolute;
  transform-style: preserve-3d;
  left: 50%;
  transform: translateX(-50%); }

Author

mojotech

breakpoint

@mixin breakpoint($breakpoint, $max-width) { ... }

Description

Never do @media(min-width: xxx) again, do it in a sensible way. This requires the breakpoints map on the settings you can add remove and rename your breakpoints at will. BYOB (Bring your own Breakpoints)

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$breakpoint`	A valid breakpoint from the `$breakpoints` map	`String`	—none
`$max-width`	Use true for desktop-first layouts	`Boolean`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Input

.mobile-first {
  font-size: 1em;

  @include breakpoint(laptop) {
    font-size: 2em;
  }

  @include breakpoint(desktop) {
    font-size: 3em;
  }

  @include breakpoint(desktop, true) {
    font-size: 5em;
  }
}

Output

.mobile-first {
  font-size: 1em; }
  @media (min-width: 992px) {
    .mobile-first {
      font-size: 2em; } }
  @media (min-width: 1200px) {
    .mobile-first {
      font-size: 3em; } }
  @media (max-width: 1200px) {
    .mobile-first {
      font-size: 5em; } }

Throws

Sadly #{$breakpoint} does not exist 😩 please check Manila

cf

@mixin cf() { ... }

Description

The very latest clearfix reloaded

Parameters

None.

Example

Input

.clearfix {
  @include cf;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both; }

Used by

[mixin] createGrid

flex-cols

@mixin flex-cols($cols, $total-cols: $columns--total, $gutter: $column-gutter) { ... }

Description

Give some flex children some col-based widths Uses the $columns--total value from the settings file you can override it as well

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$cols`	The number of columns you wish the element to span	`Number`	—none
`$total-cols`	The total number of columns in that row	`Number`	`$columns--total`
`$gutter`	The amount of gutter in the column	`Measure`	`$column-gutter`

Example

Input

.four-flex-cols {
  @include flex-cols(4);
}

.seven-flex-cols-of-15 {
  @include flex-cols(7, 15);
}

Output

.four-flex-cols {
  max-width: 33.33333%;
  flex-basis: 33.33333%;
  padding-left: 10px;
  padding-right: 10px;}

.seven-flex-cols-of-15 {
  max-width: 46.66667%;
  flex-basis: 46.66667%;
  padding-left: 10px;
  padding-right: 10px;}

float-cols

@mixin float-cols($cols, $total-cols: $columns--total, $gutter: $column-gutter) { ... }

Description

Same idea as the flex-columns but with floats parent should be clearfixed. Uses the $columns--total value from the settings file you can override it as well

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$cols`	The number of columns you wish the element to span	`Number`	—none
`$total-cols`	The total number of columns in that row	`Number`	`$columns--total`
`$gutter`	The amount of gutter in the column	`Measure`	`$column-gutter`

Example

Input

.eight-cols {
  @include float-cols(8);
}

.nine-cols-of-20 {
  @include float-cols(9, 20);
}

Output

.eight-cols {
  float: left;
  width: 66.66667%;
  padding-left: 10px;
  padding-right: 10px;
}

.nine-cols-of-20 {
  float: left;
  width: 45%;
  padding-left: 10px;
  padding-right: 10px;
}

createGrid

@mixin createGrid($gutter: $column-gutter, $total: $columns--total, $sizes: $breakpoints) { ... }

Description

Create a mobile-first responsive grid kind of inspired by Foundation and BassCss You can set some things by overriding some values as follows:

$breakpoints: (
  'phablet'     : 480px,
  'tablet'      : 768px,
  'laptop'      : 992px,
  'desktop'     : 1200px
) !default;

$columns--total         : 12 !default;

$column-gutter          : 20px !default;

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$gutter`	The spacing between columns can be on `px`, `em`, `rem` probably even `%`	`Measure`	`$column-gutter`
`$total`	Total number of columns to have in the grid	`Number`	`$columns--total`
`$sizes`	A map with the names and measures of each breakpoint.	`Map`	`$breakpoints`

Example

Input with all defaults

@include createGrid;

Output (Shortened)

.row {
  margin-left: -10px;
  margin-right: -10px; }
  .row::after {
    content: '';
    display: block;
    clear: both; }

[class^='col-'] {
  float: left;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
}

.col-1 {
  width: 8.33333%; }
// All the way to...
.col-12 {
  width: 100%; }

@media (min-width: 480px) {
  .col-phablet-1 {
    width: 8.33333%; }
  // All the way to...
  .col-phablet-12 {
    width: 100%; } }

@media (min-width: 768px) {
  .col-tablet-1 {
    width: 8.33333%; }
  // All the way to...
  .col-tablet-12 {
    width: 100%; } }

@media (min-width: 992px) {
  .col-laptop-1 {
    width: 8.33333%; }
  // All the way to...
  .col-laptop-12 {
    width: 100%; } }

@media (min-width: 1200px) {
  .col-desktop-1 {
    width: 8.33333%; }
  // All the way to...
  .col-desktop-12 {
    width: 100%; } }

Requires

[mixin] cf — Clearfix Mixin

gutter

@mixin gutter($gutter) { ... }

Description

Quickly add gutter to columns Uses the $column-gutter value from the settings file you can override it as well

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$gutter`	The total gutter you wish to add	`Measure unit`	—none

Example

Input

.add-gutter {
  @include gutter;
}

.custom-gutter {
  @include gutter(10%);
}

Output

.add-gutter {
  padding-left: 10px;
  padding-right: 10px; }

.custom-gutter {
  padding-left: 5%;
  padding-right: 5%; }

Styling

mixins

background

@mixin background($image, $color1: null, $color2: $color1) { ... }

Description

FullScreen background with size cover and optional overlay on top (must be with rgba with opacity) This one uses the $image-path variable to get to the img assets.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$image`	Specify which axes to center the element on.	`String`	—none
`$color1`	Optional color for the overlay	`String`	`null`
`$color2`	Optional second color of the overlay	`String`	`$color1`

Example

Input

.background {
  @include background("a-background.jpg");
}

.background-with-overlay {
  @include background("a-background.jpg", rgba(0, 0, 0, 0.5));
}

.background-with-2-overlays {
  @include background("a-background.jpg", rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
}

Output

.background {
  background: url("a-background.jpg") no-repeat center/cover; }

.background-with-overlay {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("a-background.jpg") no-repeat center/cover; }

.background-with-2-overlays {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url("a-background.jpg") no-repeat center/cover; }

font-face

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) { ... }

Description

Easy importer for font-face properties

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$name`	Name of the font family without extension	`String`	—none
`$path`	Path from the compiled css to the fonts folder	`String`	—none
`$weight`	Weight of said font	`Number`	`null`
`$style`	Style of the font	`String`	`null`
`$exts`	Formats or extensions	`List`	`eot woff2 woff ttf svg`

Example

Input

@include font-face('Samplina Neue', 'fonts/SamplinaNeue', bold, italic);

Output

@font-face {
  font-family: "Samplina Neue";
  font-style: italic;
  font-weight: bold;
  src: url("fonts/SamplinaNeue.eot?") format("eot"),
    url("fonts/SamplinaNeue.woff2") format("woff2"),
    url("fonts/SamplinaNeue.woff") format("woff"),
    url("fonts/SamplinaNeue.ttf") format("truetype"),
    url("fonts/SamplinaNeue.svg#Samplina_Neue") format("svg");
}

Requires

[function] str-replace — Function

mediumUnderline

@mixin mediumUnderline($color, $position, $size: 2px) { ... }

Description

A mixin to replicate fancy underlines like the ones on Medium. Must be applied to an element with display: inline Can span multiple lines and be on top of background images

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Color to use for the line, should use rgba with opacity for better looking results	`Color`	—none
`$position`	How many pixels or ems or rems to place the line under the text, should experiment for best results	`Measure`	—none
`$size`	The size of the underline	`Measure`	`2px`

Example

Input

.medium-underline {
  font-size: 22px;
  @include mediumUnderline(black, 21px);
}

Output

.medium-underline {
  font-size: 22px;
  text-decoration: none;
  background-image: linear-gradient(to bottom, transparent 50%, black 50%);
  background-repeat: repeat-x;
  background-size: 2px 2px;
  background-position: 0 21px; }

placeholder

@mixin placeholder($color) { ... }

Description

To change the color of some inputs placeholder like on npmjs.com Please use responsibly try to use semi-transparent colors to indicate a placeholder Don't be an asshole and use the same color for the placeholder and the input

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	The color of the placeholder	`Color`	—none

Content

This mixin allows extra content to be passed (through the @content directive).

Example

Input

.custom-placeholder {
  @include placeholder() {
    color: red;
  }
}

Output

.custom-placeholder::-webkit-input-placeholder {
  color: red; }

.custom-placeholder::-moz-placeholder {
  color: red;
  opacity: 1; }

.custom-placeholder:-ms-input-placeholder {
  color: red; }

.custom-placeholder::-ms-input-placeholder {
  color: red; }

.custom-placeholder:placeholder-shown {
  color: red; }

textShadowToCropUnderline

@mixin textShadowToCropUnderline($color) { ... }

Description

Helper mixin for the Smart Underline mixin Can only be used with a solid color background

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$color`	Color of the text shadow	`Color`	—none

Used by

[mixin] smartUnderline

See

[mixin] smartUnderline

Author

Eager

smartUnderline

@mixin smartUnderline($backgroundColor, $color, $underlineBackground: $main-color) { ... }

Description

Smart Underline like the ones you see on a text app Like Sketch, Illustrator, PSD or Safari (could everyone else just copy Safari on this one?) Can only be used with a solid color background

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$backgroundColor`	The color of the background for the text shadow to match	`Color`	—none
`$color`	The font color of the text	`Color`	—none
`$underlineBackground`	The background color when you select that text	`Color`	`$main-color`

Example

Input

.smart-underline {
  @include smartUnderline(#fff, #000);
}

Output

.smart-underline {
  color: #000;
  text-decoration: none;
  text-shadow: 0.03em 0 #fff, -0.03em 0 #fff, 0 0.03em #fff, 0 -0.03em #fff, 0.06em 0 #fff, -0.06em 0 #fff, 0.09em 0 #fff, -0.09em 0 #fff, 0.12em 0 #fff, -0.12em 0 #fff, 0.15em 0 #fff, -0.15em 0 #fff;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#000, #000);
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0% 90%, 100% 90%, 0% 90%; }
  .smart-underline::selection {
    text-shadow: 0.03em 0 #bada55, -0.03em 0 #bada55, 0 0.03em #bada55, 0 -0.03em #bada55, 0.06em 0 #bada55, -0.06em 0 #bada55, 0.09em 0 #bada55, -0.09em 0 #bada55, 0.12em 0 #bada55, -0.12em 0 #bada55, 0.15em 0 #bada55, -0.15em 0 #bada55;
    background: #bada55; }
  .smart-underline:before, .smart-underline:after, .smart-underline *, .smart-underline *:before, .smart-underline *:after {
    text-shadow: none; }
  .smart-underline:visited {
    color: #000; }

Requires

[mixin] textShadowToCropUnderline

Author

Eager

std-background

@mixin std-background() { ... }

Description

Normalize background properties useful when changing background image via server side on the actual html markup

Parameters

None.

Example

Input

.back {
  @include std-background;
}

Output

.back {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

General

functions

str-replace

@function str-replace($string, $search, $replace: '') { ... }

Description

Replace Strings

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$string`	A string to replace	`String`	—none
`$search`	What to search in the string	`String`	—none
`$replace`	What to replace with	`String`	`''`

Returns

String —

The processed string

Example

Input

.replaced {
  content: str-replace('Hello World', ' ', '-');
}

Output

.replaced {
  content: Hello-World;
}

Used by

[mixin] font-face

mixins

google-font-importer

@mixin google-font-importer($url: $font-url--google) { ... }

Description

Impports from Google Font from a URL

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$url`	A valid Google Fonts URL	`String`	`$font-url--google`

Example

Input

$font-url--google: "https://fonts.googleapis.com/css?family=Lato:300";
@include google-font-importer;

Output

@import url("https://fonts.googleapis.com/css?family=Lato:300");

size

@mixin size($width, $height: $width) { ... }

Description

Great mixin for handling sizes If you only provide one size it will default to a square

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	The width of the box	`Measure`	—none
`$height`	The height of the box	`Measure`	`$width`

Example

Input

.square {
  @include size(15px);
}

.rectangle {
  @include size(2em, 2.5em);
}

Output

.square {
  width: 15px;
  height: 15px; }

.rectangle {
  width: 2em;
  height: 2.5em; }

Layout

mixins

Description

Parameters

Example

Links

Author

Description

Parameters

Content

Example

Throws

Description

Parameters

Example

Used by

Links

Description

Parameters

Example

Description

Parameters

Example

Description

Parameters

Example

Requires

Description

Parameters

Example

Styling

mixins

Description

Parameters

Example

Description

Parameters

Example

Requires

Description

Parameters

Example

Description

Parameters

Content

Example

Description

Parameters

Used by

See

Links

Author

Description

Parameters

Example

Requires

Links

Author

Description

Parameters

Example

General

functions

Description

Parameters

Returns

Example

Used by

mixins

Description

Parameters

Example

Description

Parameters

Example