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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$direction

Specify which axes to center the element on.

Stringboth

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

Links

Author

  • mojotech

breakpoint

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

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$breakpoint

A valid breakpoint from the $breakpoints map

Stringnone

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

Output

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

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

Links

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$cols

The number of columns you wish the element to span

Numbernone
$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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$cols

The number of columns you wish the element to span

Numbernone
$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

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$gutter

The total gutter you wish to add

Measure unitnone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$image

Specify which axes to center the element on.

Stringnone
$color1

Optional color for the overlay

Stringnull
$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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$name

Name of the font family without extension

Stringnone
$path

Path from the compiled css to the fonts folder

Stringnone
$weight

Weight of said font

Numbernull
$style

Style of the font

Stringnull
$exts

Formats or extensions

Listeot 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

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Color to use for the line, should use rgba with opacity for better looking results

Colornone
$position

How many pixels or ems or rems to place the line under the text, should experiment for best results

Measurenone
$size

The size of the underline

Measure2px

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

The color of the placeholder

Colornone

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$color

Color of the text shadow

Colornone

Used by

See

Links

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$backgroundColor

The color of the background for the text shadow to match

Colornone
$color

The font color of the text

Colornone
$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

Links

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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$string

A string to replace

Stringnone
$search

What to search in the string

Stringnone
$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

mixins

google-font-importer

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

Description

Impports from Google Font from a URL

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault 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

parameterNameparameterDescriptionparameterTypeparameterDefault value
$width

The width of the box

Measurenone
$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; }