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 exists 😩 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) { ... }

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

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

.seven-flex-cols-of-15 {
  max-width: 46.66667%;
  flex-basis: 46.66667%; }

float-cols

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

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

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

.nine-cols-of-20 {
  float: left;
  width: 45%; }

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

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-phablet-1, .col-phablet-2, .col-phablet-3, .col-phablet-4, .col-phablet-5, .col-phablet-6, .col-phablet-7, .col-phablet-8, .col-phablet-9, .col-phablet-10, .col-phablet-11, .col-phablet-12, .col-tablet-1, .col-tablet-2, .col-tablet-3, .col-tablet-4, .col-tablet-5, .col-tablet-6, .col-tablet-7, .col-tablet-8, .col-tablet-9, .col-tablet-10, .col-tablet-11, .col-tablet-12, .col-laptop-1, .col-laptop-2, .col-laptop-3, .col-laptop-4, .col-laptop-5, .col-laptop-6, .col-laptop-7, .col-laptop-8, .col-laptop-9, .col-laptop-10, .col-laptop-11, .col-laptop-12, .col-desktop-1, .col-desktop-2, .col-desktop-3, .col-desktop-4, .col-desktop-5, .col-desktop-6, .col-desktop-7, .col-desktop-8, .col-desktop-9, .col-desktop-10, .col-desktop-11, .col-desktop-12 {
  float: left;
  padding-left: 10px;
  padding-right: 10px; }

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

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

General

mixins

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