Layout classes

.l-row

Column wrapper.

.l-sixth

Sixth (to use inside .l-row).

.l-quarter

Quarter (to use inside .l-row).

.l-three-quarters

Three quarters (to use inside .l-row).

.l-third

Third (to use inside .l-row).

.l-two-thirds

Two thirds (to use inside .l-row).

.l-half

Half (to use inside .l-row).

.l-wrap

Wrapper for .l-left/.l-right.

.l-left

Flexible columns with left text alignment (to use inside .l-wrap).

Examples

<div class="l-wrap">
    <div class="l-left">Left</div>
    <div class="l-right">Left</div>
</div>

.l-right

Flexible columns with right text alignment (to use inside .l-wrap).

.l-center

Centered content (vertically and horizontally).

Examples

<div class="l-center">
    <div>Centered content</div>
</div>
<div class="l-center">
    <div>
      <div>Centered content</div>
      <div>More content</div>
    </div>
</div>

.l-centered

Horizontally centered block.

.l-text-centered

Centered text.

.l-panel

Panel with a header (sticked to top) and a body (occupies all available space).

.l-panel__centered can be applied to either header or body and will center content horizontally and vertically.

Examples

<div class="l-panel">
    <div class="l-panel__header"></div>
    <div class="l-panel__body l-panel__centered"></div>
</div>

Spacing

.l-space

Standard bottom margin.

.l-double-space

Double bottom margin.

.l-triple-space

Triple bottom margin.

.l-quad-space

Quadruple bottom margin.

.l-quint-space

Quintuple bottom margin.

.l-sext-space

Sextuple bottom margin.

Link classes

Link.

Link in quotes (quotes should be colored but not underlined).

Examples

<a href="/" class="link link_quoted"><u>My Little Pony</u></a>

Misc classes

.is-hidden

Element is hidden.

.is-invisible

Element is invisible (but occupies place on page).

Layout

layout-wrapper()

Layout wrapper (without margins).

layout-row()

Layout row wrapper (with margins).

layout-nth()

Column (simple layout).

Parameters

  • part 1/Nth part of wrapper.

Examples

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
</div>
.row {
    layout-row();
}
.col {
    layout-nth(1/2);  // Half
}

layout-change()

Change number of columns.

Use it to change number of columns (defined via layout-nth()) inside media queries.

Parameters

  • part 1/Nth part of wrapper.

layout-stop()

Disable columns.

Alias for layout-change(1).

center()

Center element with specified width and hegith.

Parameters

  • width Width of an element.
  • height Height of an element (default: null).

Examples

.checkbox:before {
    center(.8em, .65em);
    background-image: url("check.svg");
}

layout-left()

Flexible columns with left text alignment (to use inside .l-wrap).

Examples

.block {
    layout-wrapper();
    &__first {
      layout-left();
    }
    &__second {
      layout-right();
    }
}

layout-right()

Flexible columns with right text alignment (to use inside .l-wrap).

space()

Space after block.

Parameters

  • rows Number of “rows” (one row = default spacer).

Grid

Configuration

grid_gutter

Grid gutter size, in pixels (default: 2×spacer).

grid_columns

Number of columns in grid (default: 12).

grid-row()

Columns wrapper.

grid-row-base()

Columns wrapper (without gutter).

grid-col()

Column (grid).

Parameters

  • span Width in culumns (default: all available width).
  • context Width of parent column (default: 12).

Examples

<div class="row">
    <div class="col1"></div>
    <div class="col2"></div>
</div>
.row {
    grid-row();
}
.col1 {
    grid-col(2);
}
.col2 {
    grid-col();
}

grid-col-base()

Column (grid, no gutter).

Parameters

  • span Width in culumns (default: all available width).
  • context Width of parent column (default: 12).

grid-offset()

Offset column (grid).

Parameters

  • offset Number of columns to skip.
  • context Width of parent column (default: 12).

Examples

<div class="row">
    <div class="col1"></div>
    <div class="col2"></div>
</div>
.row {
    grid-row();
}
.col1 {
    grid-col(2);
}
.col2 {
    grid-col(10);
}

grid-explode()

Gutter size negative margin to make column with different background.

Parameters

  • full Explode to all sides if true, left/right otherwise (default: false).

grid-width()

Width of column, in percent.

Parameters

  • span Width, in culumns (default: 1).
  • context Width of parent column (default: null).

Returns percent.

grid-row-margin()

Column wrapper left/right negative margin.

grid-col-padding()

Column left/right padding.

Parameters

  • full Padding on all sides if true, left/right otherwise (default: false).

Links

Configuration

Link underline style (default: underline).

Values

  • none - no underline.
  • underline - text-decoration:underline.
  • gradient - Uses CSS gradients to position line under text (cannot change line color on hover).

Link color.

visited_color

Visited link color (only for underline links because image backgrounds don’t work on :visited links).

hover_color

Hovered link color.

Link underline color (for gradient links).

hover_underline_color

Hovered link underline color (for gradient links).

Link underline position (only for gradient links, default: 90%)

Mixins

Adds link underline (for gradient links).

Link underline position (for gradient links).

Link underline size (for gradient links).

:hover, :active and :focus states of the link.

Examples

+link-hovers() {
    color: #bada55;
}

:link and :visited states of the link.

Examples

+link-non-hovers() {
    color: #bada55;
}

All states of the link.

Examples

+link-all-states() {
    color: @color;
}

Clear link descenders.

pressable()

Pressable element: pointer cursor and disabled text selection.

no-pressable()

Non-pressable element: cancels .pressable.

no-underline()

Remove underline.

Images with Retina support

Configuration

retinafy

Enable Retina support (default: false).

images_relative_root

Path to calculate file system image path based on CSS path (default: .).

Functions

image()

background-image with Retina variant.

Parameters

  • path Image file path.
  • x background-position x (default: 0).
  • y background-position y (default: 0).

Retina image file should be named path@2x.png.

Media queries

above()

Media query shortcut: viewport width is greater than or equal to specified value.

Examples

.pony {
    color: #c0ffee;
    +above(320px) {
      color: #bada55;
    }
}

Parameters

  • min Min width.

below()

Media query shortcut: viewport width is less than or equal to specified value.

Parameters

  • max Max width.

between()

Media query shortcut: viewport width is in between specified values.

Parameters

  • min Min width.
  • max Max width.

higher()

Media query shortcut: viewport height is greater than or equal to specified value.

Examples

.pony {
    color: #c0ffee;
    +higher(320px) {
      color: #bada55;
    }
}
  • min Min height.

lower()

Media query shortcut: viewport height is less than or equal to specified value.

Parameters

  • max Max height.

retina()

Media query shortcut: retina screen.

Functions

white()

White color with transparency.

Parameters

  • opacity Opacity value (0—1).

Returns color.

black()

Black color with transparency.

Parameters

  • opacity Opacity value (0—1).

Returns color.

Misc functions and mixins

Easings

ease-in-sine

Ease in sine.

ease-in-quint

Ease in quint.

ease-out-quint

Ease out quint.

ease-out-back

Ease out back.

ease-in-out-cubic

Ease in out cubic.

Typography and text

ellipsis()

Ellipsis text overflow.

tweak-inverted-text()

Tweak inverted text (light on dark) for OS X.

no-select()

Disables text selection.

enable-select()

Enables text selection.

hide-text()

Hides text (for image replacement).

heading-font-size()

Heading font size with negative left margin to better align it with the column.

Misc.

size()

Set element width and height.

Parameters

  • width Width. [height] - Height (the same as width if not passed).

margin-side()

Set element’s left and right margins.

padding-side()

Set element’s left and right paddings.

responsive-images()

Make all images inside responsive.

no-transition()

Disables transitions.

Parameters

  • imp Important? (default: false).

appear-fade()

Appear .is-hidden element with a fade animation.

appear-slide()

Appear .is-hidden element with a slide animation.

triangle()

Draws triangle.

Parameters

  • direction Triangle direction (up, down, left, right).
  • size Size (default: 10px).
  • color Color (default: black).

debug()

Draws color outline around an element.

Works only when DEBUG == true.