Breakpoint
Simple helper for @media queries. Using scss list for breakpoints difinition.
Grid
Flexyble grid system based on flex-box. Can be used as static css or as grid generator in scss.
Grid
Flexyble grid system based on flex-box. Can be used as static css or as grid generator in scss.

Installation

npm

npm i @sfem/grid --save

css

Add the sfem-grid.css development or sfem-grid.min.css production to your html page.

<link rel="stylesheet" href="css/sfem-grid.min.css" type="text/css">

Basic call

By default blocks has no sizes and can be used as stucked elements
#
##
###
####
#####
###### 
<div class="grid">
  <div class="grid__box"></div>
</div>

Responsive

Responsive modifiers enable different block sizes, offsets, alignment and distribution.
<!-- xxs, xs, s, m, l, xl, xxl.-->
<div class="grid">
  <div class="grid__box grid__box--size-12 grid__box--size-s-6 grid__box--size-m-2"></div>
</div>

Auto width

Add any number of auto sizing columns to a row.
<div class="grid">
  <div class="grid__box grid__box--size-auto"></div>
</div>

Fluid

Percent based widths allow resizing of columns.
<div class="grid">
  <div class="grid__box grid__box--size-[n]"></div>
</div>

Offset

Left offset for blocks
<div class="grid">
  <div class="grid__box grid__box--size-6 grid__box--offset-6"></div>
</div>

Order

Control order of your blocks for each breakpoint
<div class="grid">
  <div class="grid__box grid__box--size-4 grid__box--order-3 grid__box--order-m-2 grid__box--order-l-1"></div>
  <div class="grid__box grid__box--size-4 grid__box--order-2 grid__box--order-m-1 grid__box--order-l-3"></div>
  <div class="grid__box grid__box--size-4 grid__box--order-1 grid__box--order-m-3 grid__box--order-l-2"></div>
</div>

Grid padding

Different grid pading if you need (Default: 0, 8, 16, 24)

--gap-8

--gap-24

Horizontal align

How blocks placed in row Horizontally

--ha-start

--ha-end

--ha-center

--ha-between

--ha-around

Vertical align

How blocks placed in row Vertically

--va-top




--va-middle




--va-bottom




Nesting

Nest grids inside grids inside grids......

Using in scss

@import "~@sfem/grid/sfem-grid"; // if node-sass-tilde-importer installed or relative path if not

// class names setting
$sfem-grid-name: 'grd'; // default: grid
$sfem-grid-box-name: 'bxs'; // default: grid__box

// Grid sets. We can generate grids with various nums of columns
$sfem-grid-columns: (10, 12); // default: (12)

// Grid paddings
$sfem-grid-gap-base: 20; // default: 16
$sfem-grid-gap-additional: (2, 6, 9); // default: (0, 8, 24)

// Screen size breakpoins (default)
// after change this variable keys in class names will be changed
$sfem-grid-breakpoint: (
  xxs: 320px,
  xs: 640px,
  s: 768px,
  m: 1024px,
  l: 1280px,
  xl: 1440px,
  xxl: 1600px
);

Modifers and name logic

[grid/box][--modificator][-breakpoint][-value](*of[-colls])

* if generated more than one grid ($sfem-grid-columns)

Examples

.grid
.grid--gap-8
.grid--gap-xl-24
.grid__box
.grid__box--size-auto
.grid__box--size-m-auto

All class names

If you need this :)

.grid

gap
.grid--gap-0
.grid--gap-24
.grid--gap-8
.grid--gap-l-0
.grid--gap-l-24
.grid--gap-l-8
.grid--gap-m-0
.grid--gap-m-24
.grid--gap-m-8
.grid--gap-s-0
.grid--gap-s-24
.grid--gap-s-8
.grid--gap-xl-0
.grid--gap-xl-24
.grid--gap-xl-8
.grid--gap-xs-0
.grid--gap-xs-24
.grid--gap-xs-8
.grid--gap-xxl-0
.grid--gap-xxl-24
.grid--gap-xxl-8
.grid--gap-xxs-0
.grid--gap-xxs-24
.grid--gap-xxs-8
ha
.grid--ha-around
.grid--ha-between
.grid--ha-center
.grid--ha-end
.grid--ha-start
no
.grid--no-wrap
va
.grid--va-bottom
.grid--va-l-bottom
.grid--va-l-middle
.grid--va-l-top
.grid--va-m-bottom
.grid--va-m-middle
.grid--va-m-top
.grid--va-middle
.grid--va-s-bottom
.grid--va-s-middle
.grid--va-s-top
.grid--va-top
.grid--va-xl-bottom
.grid--va-xl-middle
.grid--va-xl-top
.grid--va-xs-bottom
.grid--va-xs-middle
.grid--va-xs-top
.grid--va-xxl-bottom
.grid--va-xxl-middle
.grid--va-xxl-top
.grid--va-xxs-bottom
.grid--va-xxs-middle
.grid--va-xxs-top

.grid__box

offset
.grid__box--offset-1
.grid__box--offset-10
.grid__box--offset-11
.grid__box--offset-12
.grid__box--offset-2
.grid__box--offset-3
.grid__box--offset-4
.grid__box--offset-5
.grid__box--offset-6
.grid__box--offset-7
.grid__box--offset-8
.grid__box--offset-9
.grid__box--offset-auto
.grid__box--offset-l-1
.grid__box--offset-l-10
.grid__box--offset-l-11
.grid__box--offset-l-12
.grid__box--offset-l-2
.grid__box--offset-l-3
.grid__box--offset-l-4
.grid__box--offset-l-5
.grid__box--offset-l-6
.grid__box--offset-l-7
.grid__box--offset-l-8
.grid__box--offset-l-9
.grid__box--offset-l-auto
.grid__box--offset-m-1
.grid__box--offset-m-10
.grid__box--offset-m-11
.grid__box--offset-m-12
.grid__box--offset-m-2
.grid__box--offset-m-3
.grid__box--offset-m-4
.grid__box--offset-m-5
.grid__box--offset-m-6
.grid__box--offset-m-7
.grid__box--offset-m-8
.grid__box--offset-m-9
.grid__box--offset-m-auto
.grid__box--offset-s-1
.grid__box--offset-s-10
.grid__box--offset-s-11
.grid__box--offset-s-12
.grid__box--offset-s-2
.grid__box--offset-s-3
.grid__box--offset-s-4
.grid__box--offset-s-5
.grid__box--offset-s-6
.grid__box--offset-s-7
.grid__box--offset-s-8
.grid__box--offset-s-9
.grid__box--offset-s-auto
.grid__box--offset-xl-1
.grid__box--offset-xl-10
.grid__box--offset-xl-11
.grid__box--offset-xl-12
.grid__box--offset-xl-2
.grid__box--offset-xl-3
.grid__box--offset-xl-4
.grid__box--offset-xl-5
.grid__box--offset-xl-6
.grid__box--offset-xl-7
.grid__box--offset-xl-8
.grid__box--offset-xl-9
.grid__box--offset-xl-auto
.grid__box--offset-xs-1
.grid__box--offset-xs-10
.grid__box--offset-xs-11
.grid__box--offset-xs-12
.grid__box--offset-xs-2
.grid__box--offset-xs-3
.grid__box--offset-xs-4
.grid__box--offset-xs-5
.grid__box--offset-xs-6
.grid__box--offset-xs-7
.grid__box--offset-xs-8
.grid__box--offset-xs-9
.grid__box--offset-xs-auto
.grid__box--offset-xxl-1
.grid__box--offset-xxl-10
.grid__box--offset-xxl-11
.grid__box--offset-xxl-12
.grid__box--offset-xxl-2
.grid__box--offset-xxl-3
.grid__box--offset-xxl-4
.grid__box--offset-xxl-5
.grid__box--offset-xxl-6
.grid__box--offset-xxl-7
.grid__box--offset-xxl-8
.grid__box--offset-xxl-9
.grid__box--offset-xxl-auto
.grid__box--offset-xxs-1
.grid__box--offset-xxs-10
.grid__box--offset-xxs-11
.grid__box--offset-xxs-12
.grid__box--offset-xxs-2
.grid__box--offset-xxs-3
.grid__box--offset-xxs-4
.grid__box--offset-xxs-5
.grid__box--offset-xxs-6
.grid__box--offset-xxs-7
.grid__box--offset-xxs-8
.grid__box--offset-xxs-9
.grid__box--offset-xxs-auto
order
.grid__box--order-1
.grid__box--order-10
.grid__box--order-11
.grid__box--order-12
.grid__box--order-2
.grid__box--order-3
.grid__box--order-4
.grid__box--order-5
.grid__box--order-6
.grid__box--order-7
.grid__box--order-8
.grid__box--order-9
.grid__box--order-first
.grid__box--order-l-1
.grid__box--order-l-10
.grid__box--order-l-11
.grid__box--order-l-12
.grid__box--order-l-2
.grid__box--order-l-3
.grid__box--order-l-4
.grid__box--order-l-5
.grid__box--order-l-6
.grid__box--order-l-7
.grid__box--order-l-8
.grid__box--order-l-9
.grid__box--order-l-first
.grid__box--order-l-last
.grid__box--order-last
.grid__box--order-m-1
.grid__box--order-m-10
.grid__box--order-m-11
.grid__box--order-m-12
.grid__box--order-m-2
.grid__box--order-m-3
.grid__box--order-m-4
.grid__box--order-m-5
.grid__box--order-m-6
.grid__box--order-m-7
.grid__box--order-m-8
.grid__box--order-m-9
.grid__box--order-m-first
.grid__box--order-m-last
.grid__box--order-s-1
.grid__box--order-s-10
.grid__box--order-s-11
.grid__box--order-s-12
.grid__box--order-s-2
.grid__box--order-s-3
.grid__box--order-s-4
.grid__box--order-s-5
.grid__box--order-s-6
.grid__box--order-s-7
.grid__box--order-s-8
.grid__box--order-s-9
.grid__box--order-s-first
.grid__box--order-s-last
.grid__box--order-xl-1
.grid__box--order-xl-10
.grid__box--order-xl-11
.grid__box--order-xl-12
.grid__box--order-xl-2
.grid__box--order-xl-3
.grid__box--order-xl-4
.grid__box--order-xl-5
.grid__box--order-xl-6
.grid__box--order-xl-7
.grid__box--order-xl-8
.grid__box--order-xl-9
.grid__box--order-xl-first
.grid__box--order-xl-last
.grid__box--order-xs-1
.grid__box--order-xs-10
.grid__box--order-xs-11
.grid__box--order-xs-12
.grid__box--order-xs-2
.grid__box--order-xs-3
.grid__box--order-xs-4
.grid__box--order-xs-5
.grid__box--order-xs-6
.grid__box--order-xs-7
.grid__box--order-xs-8
.grid__box--order-xs-9
.grid__box--order-xs-first
.grid__box--order-xs-last
.grid__box--order-xxl-1
.grid__box--order-xxl-10
.grid__box--order-xxl-11
.grid__box--order-xxl-12
.grid__box--order-xxl-2
.grid__box--order-xxl-3
.grid__box--order-xxl-4
.grid__box--order-xxl-5
.grid__box--order-xxl-6
.grid__box--order-xxl-7
.grid__box--order-xxl-8
.grid__box--order-xxl-9
.grid__box--order-xxl-first
.grid__box--order-xxl-last
.grid__box--order-xxs-1
.grid__box--order-xxs-10
.grid__box--order-xxs-11
.grid__box--order-xxs-12
.grid__box--order-xxs-2
.grid__box--order-xxs-3
.grid__box--order-xxs-4
.grid__box--order-xxs-5
.grid__box--order-xxs-6
.grid__box--order-xxs-7
.grid__box--order-xxs-8
.grid__box--order-xxs-9
.grid__box--order-xxs-first
.grid__box--order-xxs-last
size
.grid__box--size-1
.grid__box--size-10
.grid__box--size-11
.grid__box--size-12
.grid__box--size-2
.grid__box--size-3
.grid__box--size-4
.grid__box--size-5
.grid__box--size-6
.grid__box--size-7
.grid__box--size-8
.grid__box--size-9
.grid__box--size-auto
.grid__box--size-l-1
.grid__box--size-l-10
.grid__box--size-l-11
.grid__box--size-l-12
.grid__box--size-l-2
.grid__box--size-l-3
.grid__box--size-l-4
.grid__box--size-l-5
.grid__box--size-l-6
.grid__box--size-l-7
.grid__box--size-l-8
.grid__box--size-l-9
.grid__box--size-l-auto
.grid__box--size-l-min
.grid__box--size-m-1
.grid__box--size-m-10
.grid__box--size-m-11
.grid__box--size-m-12
.grid__box--size-m-2
.grid__box--size-m-3
.grid__box--size-m-4
.grid__box--size-m-5
.grid__box--size-m-6
.grid__box--size-m-7
.grid__box--size-m-8
.grid__box--size-m-9
.grid__box--size-m-auto
.grid__box--size-m-min
.grid__box--size-min
.grid__box--size-s-1
.grid__box--size-s-10
.grid__box--size-s-11
.grid__box--size-s-12
.grid__box--size-s-2
.grid__box--size-s-3
.grid__box--size-s-4
.grid__box--size-s-5
.grid__box--size-s-6
.grid__box--size-s-7
.grid__box--size-s-8
.grid__box--size-s-9
.grid__box--size-s-auto
.grid__box--size-s-min
.grid__box--size-xl-1
.grid__box--size-xl-10
.grid__box--size-xl-11
.grid__box--size-xl-12
.grid__box--size-xl-2
.grid__box--size-xl-3
.grid__box--size-xl-4
.grid__box--size-xl-5
.grid__box--size-xl-6
.grid__box--size-xl-7
.grid__box--size-xl-8
.grid__box--size-xl-9
.grid__box--size-xl-auto
.grid__box--size-xl-min
.grid__box--size-xs-1
.grid__box--size-xs-10
.grid__box--size-xs-11
.grid__box--size-xs-12
.grid__box--size-xs-2
.grid__box--size-xs-3
.grid__box--size-xs-4
.grid__box--size-xs-5
.grid__box--size-xs-6
.grid__box--size-xs-7
.grid__box--size-xs-8
.grid__box--size-xs-9
.grid__box--size-xs-auto
.grid__box--size-xs-min
.grid__box--size-xxl-1
.grid__box--size-xxl-10
.grid__box--size-xxl-11
.grid__box--size-xxl-12
.grid__box--size-xxl-2
.grid__box--size-xxl-3
.grid__box--size-xxl-4
.grid__box--size-xxl-5
.grid__box--size-xxl-6
.grid__box--size-xxl-7
.grid__box--size-xxl-8
.grid__box--size-xxl-9
.grid__box--size-xxl-auto
.grid__box--size-xxl-min
.grid__box--size-xxs-1
.grid__box--size-xxs-10
.grid__box--size-xxs-11
.grid__box--size-xxs-12
.grid__box--size-xxs-2
.grid__box--size-xxs-3
.grid__box--size-xxs-4
.grid__box--size-xxs-5
.grid__box--size-xxs-6
.grid__box--size-xxs-7
.grid__box--size-xxs-8
.grid__box--size-xxs-9
.grid__box--size-xxs-auto
.grid__box--size-xxs-min
va
.grid__box--va-bottom
.grid__box--va-l-bottom
.grid__box--va-l-middle
.grid__box--va-l-top
.grid__box--va-m-bottom
.grid__box--va-m-middle
.grid__box--va-m-top
.grid__box--va-middle
.grid__box--va-s-bottom
.grid__box--va-s-middle
.grid__box--va-s-top
.grid__box--va-top
.grid__box--va-xl-bottom
.grid__box--va-xl-middle
.grid__box--va-xl-top
.grid__box--va-xs-bottom
.grid__box--va-xs-middle
.grid__box--va-xs-top
.grid__box--va-xxl-bottom
.grid__box--va-xxl-middle
.grid__box--va-xxl-top
.grid__box--va-xxs-bottom
.grid__box--va-xxs-middle
.grid__box--va-xxs-top