HiQ Locus installation instructions

Installation

First install the latest version of Susy either with NPM, Yarn or similar method. You can also download Susy from Susy NPM.

npm install susy

or

yarn install susy

Then make sure susy is included in your base/root/main stylesheet.

@import node_modules/susy/sass/susy

Now include the locus-grid stylesheet to your base/root/main stylesheet.

@import locus-grid

Settings

Locus is setup with basic settings for up to five different breakpoints. If you want to change the default settings, do so by overriding the default variables.

$locus-breakpoint-default
$locus-breakpoint-small
$locus-breakpoint-medium
$locus-breakpoint-large
$locus-breakpoint-extra-large

$locus-columns-default
$locus-columns-small
$locus-columns-medium
$locus-columns-large
$locus-columns-xlarge

$locus-gutters-default
$locus-gutters-small
$locus-gutters-medium
$locus-gutters-large
$locus-gutters-xlarge

$locus-spread-default
$locus-spread-small
$locus-spread-medium
$locus-spread-large
$locus-spread-xlarge

$locus-container_spread-default
$locus-container_spread-small
$locus-container_spread-medium
$locus-container_spread-large
$locus-container_spread-xlarge

Usage

SASS

.element
  +locus-span(4, 4, 6, 12, 12)
  +lspan(4, 4, 6, 12, 12) //shorthand

SCSS

.element {
  @include locus-span(4, 4, 6, 12, 12)
  @include lspan(4, 4, 6, 12, 12); //shorthand
}

API

X1 = default X2 = small X3 = medium X4 = large X5 = xlarge

locus-span

This basic metod is used to tell all breakpoints to span X number of columns. You can fill out any number of values with a maximum of five.

locus-span(X1, X2, X3, X4, X5)

Example

In the example below we tell locus to set the width of default and mobile to 50% (span 2 out of 4 columns), medium to 100% (span 6 out of 6 columns) and 33.333333% on large and xlarge (span 4 out of 12 columns).

.element
   +locus-span(2, 2, 6, 4, 4)

locus-squish

With squish you can tell all breakpoints to offset the element with X columns on the left side and Y columns on the right side. It's important to notice that locus-squish also calls locus-span with the remaining columns. It You can fill out any number of values with a maximum of five.

locus-squish(X Y, X Y, X Y, X Y, X Y)

Example

In the example below we tell locus to do nothing on default, nothing on small but add 1 column widths of margin to the left and right side of the element on medium. We also tell locus to add 2 column widths of margin to the left side and 4 column widths of the right side on large and xlarge. Since squish also calls locus-span it will set default/small to full, medium to 4 and large/xlarge to 6.

.element
   +locus-squish(0 0, 0 0, 1 1, 2 4, 2 4)

locus-pull

This method tells all breakpoints to pull the element X number of columns to the left. You can fill out any number of values with a maximum of five.

locus-pull(X, X, X, X, X)

Example

In the example below we tell locus to do nothing on default, nothing on small but pull the element 1 column with to the left on medium and 2 colum widths on large and xlarge.

.element
   +locus-pull(0, 0, 1, 2, 2)

locus-push

This method tells all breakpoints to push the element X number of columns to the right. You can fill out any number of values with a maximum of five.

locus-push(X, X, X, X, X)

Example

In the example below we tell locus to push the element 1 column width on default and mobile, 2 columns width on medium and four column widths on large and xlarge.

.element
   +locus-push(1, 1, 2, 4, 4)

locus-gutter

This method tells all breakpoints to add the current gutter value as padding (left and right) to the element. No further effects are applied, so no with or float. You do not pass any values to this method.

locus-gutter()