Lattice.css NPM

lattice.css

Lattice is a responsive flexbox-based CSS grid library that utilizes BEM naming conventions. Lattice is fully-featured and is built with customization in mind.

Lattice is default first in that the grid is tuned to whichever viewport size you would prefer to optimize for first.

View Demo

Installation

Yarn

yarn add lattice.css

npm

npm install lattice.css

Download

Download lattice.min.css

Import

CSS / SASS / SCSS

@import '~lattice.css';

JS

import 'lattice.css';

Usage

<div class="container">
  <div class="grid">
    <div class="grid__col-4"></div>
    <div class="grid__col-4"></div>
    <div class="grid__col-4"></div>
  </div>
</div>

	Default	XLarge	Large	Medium	Small	XSmall
Breakpoint	None	`≥1201`	`<1200`	`<992`	`<768`	`<544`
Max container width	`1140px`	`1140px`	`940px`	`720px`	`576px`	`100%`
Class prefix	None	`xl-`	`lg`	`md-`	`sm-`	`xs-`
Gutter width	`15px`	`15px`	`15px`	`15px`	`15px`	`15px`

Container

<div class="container"></div>

The container class is used as a base container for the grid and adapts to each breakpoint.

You can use the modifier class container--fluid to always have the container be 100% of the parent element.

Grid

<div class="grid"></div>

The grid class defines each row of the grid.

grid--center: Horizontally center columns
grid--justify: Evenly space out columns
grid--left: Left align columns
grid--right: Right align columns
grid--top: Top align columns
grid--middle: Vertically center columns
grid--bottom: Bottom align columns
grid--stretch: Stretch columns to the height of the grid element
grid--no-gutters: Remove gutters from columns

Columns

// Specified width column
<div class="grid__col-{number}"></div>

// Unspecified width column
<div class="grid__col"></div>

Lattice is based on a 12 column layout so the total number of column width values should ideally add up to 12.

The grid__col-{number} class defines each column of the grid. Column widths can be set by using a number between 1 and 12.

// This will use 6/12 or 50% of the space
<div class="grid">
  <div class="grid__col-6"></div>
</div>

// This will use 12/12 or 100% of the space
<div class="grid">
  <div class="grid__col-12"></div>
</div>

Alternatively, you can use the grid__col class to define a column that will take as much space as it can. The grid__col class will use up as much space as possible before wrapping.

// This will use 100% of the space
<div class="grid">
  <div class="grid__col"></div>
</div>

// Each grid__col will use 50% of the space
<div class="grid">
  <div class="grid__col"></div>
  <div class="grid__col"></div>
</div>

You can use grid__col-{number} and grid__col definitions in the same grid row.

<div class="grid">
  // This will use 50% of the space
  <div class="grid__col-6"></div>

  // This will use the remaining space (i.e., 50%)
  <div class="grid__col"></div>
</div>

grid__col--left: Left align the column
grid__col--right: Right align the column
grid__col--top: Top align the column
grid__col--middle: Vertically center the column
grid__col--bottom: Bottom align the column
grid__col--stretch: Stretch the column to the height of the grid element
grid__col--no-gutters: Removes the gutters from the column
grid__col--hidden: Hide the column
grid__col--visible: Show the column
grid__col--order-{number}: Re-order the column based on the {number} specified (between 1 and 12)
grid__col--order-first: Place the column as the first element irrespective of source order
grid__col--order-last: Place the column as the last element irrespective of source order
grid__col--offset-{number}: Offset the column based on the {number} specified (between 0 and 12)

Nesting

Grids can be nested within one another like so:

<div class="container">
  <div class="grid">
    <div class="grid__col-6">
      <div class="grid">
        <div class="grid__col-6"></div>
        <div class="grid__col-6"></div>
      </div>
    </div>
    <div class="grid__col-6">
      <div class="grid">
        <div class="grid__col-4"></div>
        <div class="grid__col-4"></div>
        <div class="grid__col-4"></div>
      </div>
    </div>
  </div>
</div>

Responsive

<div class="container">
  <div class="grid">
    <div class="grid__col-4 md-grid__col-6 sm-grid__col-12"></div>
    <div class="grid__col-4 md-grid__col-6 sm-grid__col-12"></div>
    <div class="grid__col-4 md-grid__col-12"></div>
  </div>
</div>

xl: XLarge screens
lg: Large screens and smaller
md: Medium screens and smaller
sm: Small screens and smaller
xs: XSmall screens

All column classes have a responsive counterpart based off of the responsive namespaces. Additionally, all grid and column modifier classes also have a responsive counterpart based off of the responsive namespaces.

For example, to center align all columns within a grid at the small breakpoint you could use the class sm-grid--center.

Grid

{namespace}-grid--center
{namespace}-grid--justify
{namespace}-grid--left
{namespace}-grid--right
{namespace}-grid--top
{namespace}-grid--middle
{namespace}-grid--bottom
{namespace}-grid--stretch
{namespace}-grid--no-gutters

Columns

{namespace}-grid__col--left
{namespace}-grid__col--right
{namespace}-grid__col--top
{namespace}-grid__col--middle
{namespace}-grid__col--bottom
{namespace}-grid__col--stretch
{namespace}-grid__col--no-gutters
{namespace}-grid__col--hidden
{namespace}-grid__col--visible
{namespace}-grid__col--order-{number}
{namespace}-grid__col--order-first
{namespace}-grid__col--order-last
{namespace}-grid__col--offset-{number}

Mixins

@include lattice-screen-md-only {
  // Some CSS
}

If you are using lattice with SASS, you can access the built in responsive mixins.

lattice-screen-xl-min: XLarge screens
lattice-screen-lg-only: Large screens
lattice-screen-lg-max: Large screens and smaller
lattice-screen-lg-min: Large screens and larger
lattice-screen-md-only: Medium screens
lattice-screen-md-max: Medium screens and smaller
lattice-screen-md-min: Medium screens and larger
lattice-screen-sm-only: Small screens
lattice-screen-sm-max: Small screens and smaller
lattice-screen-sm-min: Small screens and larger
lattice-screen-xs-max: XSmall screens

Settings

Functionality

$lattice-enable-responsive: Enable responsive classes (default: true)

Breakpoints

$lattice-breakpoint-lg: Large screen breakpoint (default: 1200px)
$lattice-breakpoint-md: Medium screen breakpoint (default: 992px)
$lattice-breakpoint-sm: Small screen breakpoint (default: 768px)
$lattice-breakpoint-xs: XSmall screen breakpoint (default: 544px)

Note: There is no xlarge screen breakpoint setting as this is automatically calculated from the large screen breakpoint.

Container Widths

$lattice-container-width-default: Container default width (default: 1140px)
$lattice-container-width-xl: Container width on large screens (default: 1140px)
$lattice-container-width-lg: Container width on large screens (default: 940px)
$lattice-container-width-md: Container width on medium screens (default: 720px)
$lattice-container-width-sm: Container width on small screens (default: 576px)
$lattice-container-width-xs: Container width on xsmall screens (default: 100%)

Gutter Widths

$lattice-gutter-width-default: Column gutter default width (default: 15px)
$lattice-gutter-width-xl: Column gutter width on large screens (default: $lattice-gutter-width-default)
$lattice-gutter-width-lg: Column gutter width on large screens (default: $lattice-gutter-width-default)
$lattice-gutter-width-md: Column gutter width on medium screens (default: $lattice-gutter-width-default)
$lattice-gutter-width-sm: Column gutter width on small screens (default: $lattice-gutter-width-default)
$lattice-gutter-width-xs: Column gutter width on xsmall screens (default: $lattice-gutter-width-default)