Little Miss Robot - Sass Grid
This package provides a configuration object, to generate classes for a "grid"
layout. The grid layout lets you divide your interface in multiple columns to
align and position content next to each other.
IMPORTANT
-
Make use of Dart Sass:
This library makes use of Dart Sass, which
is the primary implementation of Sass. Make sure that your Sass compiler is
making use of Dart Sass.
-
Generate only what you need:
This library generates classes based on your configuration. The larger the
configuration, the more css, the larger the CSS file. DO NOT enable all the
config options, but only the ones you actually use and need!
Install
# As a dependency
$ npm install @littlemissrobot/sass-grid
# As a dev-dependency
$ npm install --save-dev @littlemissrobot/sass-grid
Usage
- Import the library from the node_modules folder:
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid;
- Pass the configuration to the dependencies and the library:
// Dependency
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-system" as _system with (
$spacing: (
baseline: 8px,
),
$breakpoints: (
viewports: (
vp-3: 360px,
vp-4: 480px,
vp-7: 720px,
vp-9: 992px,
vp-12: 1200px
)
)
);
// Library
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid with (
$settings: (),
$grid: (),
$cols: (),
$cols-none: (),
$col: (),
$col-auto: (),
$col-full: (),
$col-start: (),
$col-start-auto: (),
$col-end: (),
$col-end-auto: (),
$rows: (),
$rows-none: (),
$row: (),
$row-auto: (),
$row-full: (),
$row-start: (),
$row-start-auto: (),
$row-end: (),
$row-end-auto: (),
$gap: (),
$col-gap: (),
$row-gap: (),
$gap-item: (),
$col-gap-item: (),
$row-gap-item: (),
$flow-row: (),
$flow-col: (),
$flow-row-dense: (),
$flow-col-dense: (),
$auto-cols-auto: (),
$auto-cols-min: (),
$auto-cols-max: (),
$auto-cols-fr: (),
$auto-rows-auto: (),
$auto-rows-min: (),
$auto-rows-max: (),
$auto-rows-fr: (),
$ji-start: (),
$ji-end: (),
$ji-center: (),
$ji-stretch: (),
$jc-start: (),
$jc-end: (),
$jc-center: (),
$jc-stretch: (),
$jc-between: (),
$jc-around: (),
$jc-evenly: (),
$js-start: (),
$js-end: (),
$js-center: (),
$js-stretch: (),
$ai-start: (),
$ai-end: (),
$ai-center: (),
$ai-stretch: (),
$ac-start: (),
$ac-end: (),
$ac-center: (),
$ac-stretch: (),
$ac-between: (),
$ac-around: (),
$ac-evenly: (),
$as-start: (),
$as-end: (),
$as-center: (),
$as-stretch: (),
$pi-start: (),
$pi-end: (),
$pi-center: (),
$pi-stretch: (),
$pc-start: (),
$pc-end: (),
$pc-center: (),
$pc-stretch: (),
$pc-between: (),
$pc-around: (),
$pc-evenly: (),
$ps-start: (),
$ps-end: (),
$ps-center: (),
$ps-stretch: (),
$order-first: (),
$order-last: (),
$order: (),
);
$settings
A map to setup the specifics of your grid. The map requires:
-
spacing: The default responsive spacing on the grid. These must contain
the same keys as the keys within the $viewports variable of
@littlemissrobot/sass-breakpoints dependency. The value of these keys
represent the number used by @littlemissrobot/sass-spacing dependency,
multiplied by the $baseline. Use the
default key to indicate a fallback. if
the viewport goes below the latest breakpoint, then the default spacing values
is used.
@use "YOUR-PATH-TO-NODE_MODULES/@littlemissrobot/sass-grid" as _grid with (
$settings: (
spacing: (
default: 2,
vp-7: 4,
vp-12: 8
)
),
);
Grid
| Class |
Variable |
Property |
| u-grid |
$grid |
display: grid |
@use "@littlemissrobot/sass-grid" as _grid with (
$grid: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-grid"></div>
<div class="u-grid@vp-7"></div>
<div class="u-grid@to-vp-7"></div>
Cols
| Class |
Variable |
Property |
| u-cols-1 |
$cols |
grid-template-columns |
@use "@littlemissrobot/sass-grid" as _grid with (
$cols: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-cols-2"></div>
<div class="u-cols-3@vp-7"></div>
<div class="u-cols-4@to-vp-7"></div>
Cols-none
| Class |
Variable |
Property |
| u-cols-none |
$cols-none |
grid-template-columns: none |
@use "@littlemissrobot/sass-grid" as _grid with (
$cols-none: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-cols-none"></div>
<div class="u-cols-none@vp-7"></div>
<div class="u-cols-none@to-vp-7"></div>
Col
| Class |
Variable |
Property |
| u-col-1 |
$col |
grid-column |
@use "@littlemissrobot/sass-grid" as _grid with (
$col: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-col-2"></div>
<div class="u-col-3@vp-7"></div>
<div class="u-cos-4@to-vp-7"></div>
Col-auto
| Class |
Variable |
Property |
| u-col-auto |
$col-auto |
grid-column: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-col-auto"></div>
<div class="u-col-auto@vp-7"></div>
<div class="u-col-auto@to-vp-7"></div>
Col-full
| Class |
Variable |
Property |
| u-col-full |
$col-full |
grid-column: 1 / -1 |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-full: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-col-full"></div>
<div class="u-col-full@vp-7"></div>
<div class="u-col-full@to-vp-7"></div>
Col-start
| Class |
Variable |
Property |
| u-col-start-1 |
$col-start |
grid-column-start |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-start: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-col-start-1"></div>
<div class="u-col-start-2@vp-7"></div>
<div class="u-col-start-3@to-vp-7"></div>
Col-start-auto
| Class |
Variable |
Property |
| u-col-start:auto |
$col-start-auto |
grid-column-start: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-start-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-col-start-auto"></div>
<div class="u-col-start-auto@vp-7"></div>
<div class="u-col-start-auto@to-vp-7"></div>
Col-end
| Class |
Variable |
Property |
| u-col-end-1 |
$col-end |
grid-column-end |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-end: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-col-end-1"></div>
<div class="u-col-end-2@vp-7"></div>
<div class="u-col-end-3@to-vp-7"></div>
Col-end-auto
| Class |
Variable |
Property |
| u-col-end-auto |
$col-end-auto |
grid-column-end: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-end-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-col-end-auto"></div>
<div class="u-col-end-auto@vp-7"></div>
<div class="u-col-end-auto@to-vp-7"></div>
Rows
| Class |
Variable |
Property |
| u-rows-1 |
$rows |
grid-template-rows |
@use "@littlemissrobot/sass-grid" as _grid with (
$rows: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-rows-2"></div>
<div class="u-rows-3@vp-7"></div>
<div class="u-rows-4@to-vp-7"></div>
Rows-none
| Class |
Variable |
Property |
| u-rows-none |
$rows-none |
grid-template-rows: none |
@use "@littlemissrobot/sass-grid" as _grid with (
$rows-none: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-rows-none"></div>
<div class="u-rows-none@vp-7"></div>
<div class="u-rows-none@to-vp-7"></div>
Row
| Class |
Variable |
Property |
| u-row-1 |
$row |
grid-row |
@use "@littlemissrobot/sass-grid" as _grid with (
$row: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-row-2"></div>
<div class="u-row-3@vp-7"></div>
<div class="u-ros-4@to-vp-7"></div>
Row-auto
| Class |
Variable |
Property |
| u-row-auto |
$row-auto |
grid-row: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-row-auto"></div>
<div class="u-row-auto@vp-7"></div>
<div class="u-row-auto@to-vp-7"></div>
Row-full
| Class |
Variable |
Property |
| u-row-full |
$row-full |
grid-row: 1 / -1 |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-full: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-row-full"></div>
<div class="u-row-full@vp-7"></div>
<div class="u-row-full@to-vp-7"></div>
Row-start
| Class |
Variable |
Property |
| u-row-start-1 |
$row-start |
grid-row-start |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-start: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-row-start-1"></div>
<div class="u-row-start-2@vp-7"></div>
<div class="u-row-start-3@to-vp-7"></div>
Row-start-auto
| Class |
Variable |
Property |
| u-row-start-auto |
$row-start-auto |
grid-row-start: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-start-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-row-start-auto"></div>
<div class="u-row-start-auto@vp-7"></div>
<div class="u-row-start-auto@to-vp-7"></div>
Row-end
| Class |
Variable |
Property |
| u-row-end-1 |
$row-end |
grid-row-end |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-end: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-row-end-1"></div>
<div class="u-row-end-2@vp-7"></div>
<div class="u-row-end-3@to-vp-7"></div>
Row-end-auto
| Class |
Variable |
Property |
| u-row-end-auto |
$row-end-auto |
grid-row-end: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-end-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-row-end-auto"></div>
<div class="u-row-end-auto@vp-7"></div>
<div class="u-row-end-auto@to-vp-7"></div>
Gap
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the columns and the rows, on the
defined breakpoints.
| Class |
Variable |
Property |
| u-gap |
$gap |
gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$gap: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-gap"></div>
<div class="u-gap@vp-7"></div>
<div class="u-gap@to-vp-7"></div>
Col-gap
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the columns, on the defined
breakpoints.
| Class |
Variable |
Property |
| u-col-gap |
$col-gap |
col-gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-gap: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-col-gap"></div>
<div class="u-col-gap@vp-7"></div>
<div class="u-col-gap@to-vp-7"></div>
Row-gap
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the rows, on the defined breakpoints.
| Class |
Variable |
Property |
| u-row-gap |
$row-gap |
row-gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-y: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-row-grap"></div>
<div class="u-row-grap@vp-7"></div>
<div class="u-row-grap@to-vp-7"></div>
Gap-item
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the columns and the rows, on the
defined breakpoints.
| Class |
Variable |
Property |
| u-gap- |
$gap |
gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$gap: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-gap-1"></div>
<div class="u-gap-2@vp-7"></div>
<div class="u-gap-3@to-vp-7"></div>
Col-gap-item
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the columns, on the defined
breakpoints.
| Class |
Variable |
Property |
| u-col-gap- |
$col-gap-item |
column-gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$col-gap-item: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-col-gap-1"></div>
<div class="u-col-gap-2@vp-7"></div>
<div class="u-col-gap-3@to-vp-7"></div>
Row-gap
Class that will make use of the settings spacing key and loop over the keys
within the map and apply the spacing, on the rows, on the defined breakpoints.
| Class |
Variable |
Property |
| u-row-gap- |
$row-gap |
row-gap |
@use "@littlemissrobot/sass-grid" as _grid with (
$row-gap: (
value: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
at: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
to: (
vp-3: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
vp-7: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12),
),
);
<div class="u-row-gap-1"></div>
<div class="u-row-gap-2@vp-7"></div>
<div class="u-row-gap-3@to-vp-7"></div>
Flow-row
| Class |
Variable |
Property |
| u-flow-row |
$flow-row |
grid-auto-flow: row |
@use "@littlemissrobot/sass-grid" as _grid with (
$flow-row: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-flow-row"></div>
<div class="u-flow-row@vp-7"></div>
<div class="u-flow-row@to-vp-7"></div>
Flow-col
| Class |
Variable |
Property |
| u-flow-col |
$flow-col |
grid-auto-flow: column |
@use "@littlemissrobot/sass-grid" as _grid with (
$flow-col: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-flow-col"></div>
<div class="u-flow-col@vp-7"></div>
<div class="u-flow-col@to-vp-7"></div>
Flow-col-dense
| Class |
Variable |
Property |
| u-flow-col-dense |
$flow-col-dense |
grid-auto-flow: column dense |
@use "@littlemissrobot/sass-grid" as _grid with (
$flow-col-dense: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-flow-col-dense"></div>
<div class="u-flow-col-dense@vp-7"></div>
<div class="u-flow-col-dense@to-vp-7"></div>
Flow-row-dense
| Class |
Variable |
Property |
| u-flow-row-dense |
$flow-row-dense |
grid-auto-flow: row dense |
@use "@littlemissrobot/sass-grid" as _grid with (
$flow-row-dense: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-flow-row-dense"></div>
<div class="u-flow-row-dense@vp-7"></div>
<div class="u-flow-row-dense@to-vp-7"></div>
auto-cols-auto
| Class |
Variable |
Property |
| u-auto-cols-auto |
$auto-cols-auto |
grid-auto-columns: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-cols-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-cols-auto"></div>
<div class="u-auto-cols-auto@vp-7"></div>
<div class="u-auto-cols-auto@to-vp-7"></div>
auto-cols-min
| Class |
Variable |
Property |
| u-auto-cols-min |
$auto-cols-min |
grid-auto-columns: min-content |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-cols-min: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-cols-min"></div>
<div class="u-auto-cols-min@vp-7"></div>
<div class="u-auto-cols-min@to-vp-7"></div>
auto-cols-max
| Class |
Variable |
Property |
| u-auto-cols-max |
$auto-cols-max |
grid-auto-columns: max-content |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-cols-max: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-cols-max"></div>
<div class="u-auto-cols-max@vp-7"></div>
<div class="u-auto-cols-max@to-vp-7"></div>
auto-cols-fr
| Class |
Variable |
Property |
| u-auto-cols-fr |
$auto-cols-fr |
grid-auto-columns: minmax(0, 1fr) |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-cols-fr: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-cols-fr"></div>
<div class="u-auto-cols-fr@vp-7"></div>
<div class="u-auto-cols-fr@to-vp-7"></div>
auto-rows-auto
| Class |
Variable |
Property |
| u-auto-rows-auto |
$auto-rows-auto |
grid-auto-columns: auto |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-rows-auto: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-rows-auto"></div>
<div class="u-auto-rows-auto@vp-7"></div>
<div class="u-auto-rows-auto@to-vp-7"></div>
auto-rows-min
| Class |
Variable |
Property |
| u-auto-rows-min |
$auto-rows-min |
grid-auto-columns: min-content |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-rows-min: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-rows-min"></div>
<div class="u-auto-rows-min@vp-7"></div>
<div class="u-auto-rows-min@to-vp-7"></div>
auto-rows-max
| Class |
Variable |
Property |
| u-auto-rows-max |
$auto-rows-max |
grid-auto-columns: max-content |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-rows-max: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-rows-max"></div>
<div class="u-auto-rows-max@vp-7"></div>
<div class="u-auto-rows-max@to-vp-7"></div>
auto-rows-fr
| Class |
Variable |
Property |
| u-auto-rows-fr |
$auto-rows-fr |
grid-auto-columns: minmax(0, 1fr) |
@use "@littlemissrobot/sass-grid" as _grid with (
$auto-rows-fr: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-auto-rows-fr"></div>
<div class="u-auto-rows-fr@vp-7"></div>
<div class="u-auto-rows-fr@to-vp-7"></div>
justify-items-start
| Class |
Variable |
Property |
| u-ji-start |
$ji-start |
justify-items: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$ji-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ji-start"></div>
<div class="u-ji-start@vp-7"></div>
<div class="u-ji-start@to-vp-7"></div>
justify-items-end
| Class |
Variable |
Property |
| u-ji-end |
$ji-end |
justify-items: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$ji-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ji-end"></div>
<div class="u-ji-end@vp-7"></div>
<div class="u-ji-end@to-vp-7"></div>
justify-items-center
| Class |
Variable |
Property |
| u-ji-center |
$ji-center |
justify-items: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$ji-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ji-center"></div>
<div class="u-ji-center@vp-7"></div>
<div class="u-ji-center@to-vp-7"></div>
justify-items-stretch
| Class |
Variable |
Property |
| u-ji-stretch |
$ji-stretch |
justify-items: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$ji-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ji-stretch"></div>
<div class="u-ji-stretch@vp-7"></div>
<div class="u-ji-stretch@to-vp-7"></div>
justify-content-start
| Class |
Variable |
Property |
| u-jc-start |
$jc-start |
justify-content: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-start"></div>
<div class="u-jc-start@vp-7"></div>
<div class="u-jc-start@to-vp-7"></div>
justify-content-end
| Class |
Variable |
Property |
| u-jc-end |
$jc-end |
justify-content: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-end"></div>
<div class="u-jc-end@vp-7"></div>
<div class="u-jc-end@to-vp-7"></div>
justify-content-center
| Class |
Variable |
Property |
| u-jc-center |
$jc-center |
justify-content: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-center"></div>
<div class="u-jc-center@vp-7"></div>
<div class="u-jc-center@to-vp-7"></div>
justify-content-stretch
| Class |
Variable |
Property |
| u-jc-stretch |
$jc-stretch |
justify-content: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-stretch"></div>
<div class="u-jc-stretch@vp-7"></div>
<div class="u-jc-stretch@to-vp-7"></div>
justify-content-between
| Class |
Variable |
Property |
| u-jc-between |
$jc-between |
justify-content: space-between |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-between: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-between"></div>
<div class="u-jc-between@vp-7"></div>
<div class="u-jc-between@to-vp-7"></div>
justify-content-around
| Class |
Variable |
Property |
| u-jc-around |
$jc-around |
justify-content: space-around |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-around: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-around"></div>
<div class="u-jc-around@vp-7"></div>
<div class="u-jc-around@to-vp-7"></div>
justify-content-evenly
| Class |
Variable |
Property |
| u-jc-evenly |
$jc-evenly |
justify-content: space-evenly |
@use "@littlemissrobot/sass-grid" as _grid with (
$jc-evenly: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-jc-evenly"></div>
<div class="u-jc-evenly@vp-7"></div>
<div class="u-jc-evenly@to-vp-7"></div>
justify-self-start
| Class |
Variable |
Property |
| u-js-start |
$js-start |
justify-self: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$js-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-js-start"></div>
<div class="u-js-start@vp-7"></div>
<div class="u-js-start@to-vp-7"></div>
justify-self-end
| Class |
Variable |
Property |
| u-js-end |
$js-end |
justify-self: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$js-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-js-end"></div>
<div class="u-js-end@vp-7"></div>
<div class="u-js-end@to-vp-7"></div>
justify-self-center
| Class |
Variable |
Property |
| u-js-center |
$js-center |
justify-self: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$js-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-js-center"></div>
<div class="u-js-center@vp-7"></div>
<div class="u-js-center@to-vp-7"></div>
justify-self-stretch
| Class |
Variable |
Property |
| u-js-stretch |
$js-stretch |
justify-self: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$js-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-js-stretch"></div>
<div class="u-js-stretch@vp-7"></div>
<div class="u-js-stretch@to-vp-7"></div>
Align-items-start
| Class |
Variable |
Property |
| u-ai-start |
$ai-start |
align-items: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$ai-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ai-start"></div>
<div class="u-ai-start@vp-7"></div>
<div class="u-ai-start@to-vp-7"></div>
Align-items-end
| Class |
Variable |
Property |
| u-ai-end |
$ai-end |
align-items: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$ai-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ai-end"></div>
<div class="u-ai-end@vp-7"></div>
<div class="u-ai-end@to-vp-7"></div>
Align-items-center
| Class |
Variable |
Property |
| u-ai-center |
$ai-center |
align-items: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$ai-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ai-center"></div>
<div class="u-ai-center@vp-7"></div>
<div class="u-ai-center@to-vp-7"></div>
Align-items-stretch
| Class |
Variable |
Property |
| u-ai-stretch |
$ai-stretch |
align-items: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$ai-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ai-stretch"></div>
<div class="u-ai-stretch@vp-7"></div>
<div class="u-ai-stretch@to-vp-7"></div>
Align-content-start
| Class |
Variable |
Property |
| u-ac-start |
$ac-start |
align-content: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-start"></div>
<div class="u-ac-start@vp-7"></div>
<div class="u-ac-start@to-vp-7"></div>
Align-content-end
| Class |
Variable |
Property |
| u-ac-end |
$ac-end |
align-content: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-end"></div>
<div class="u-ac-end@vp-7"></div>
<div class="u-ac-end@to-vp-7"></div>
Align-content-center
| Class |
Variable |
Property |
| u-ac-center |
$ac-center |
align-content: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-center"></div>
<div class="u-ac-center@vp-7"></div>
<div class="u-ac-center@to-vp-7"></div>
Align-content-stretch
| Class |
Variable |
Property |
| u-ac-stretch |
$ac-stretch |
align-content: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-stretch"></div>
<div class="u-ac-stretch@vp-7"></div>
<div class="u-ac-stretch@to-vp-7"></div>
Align-content-between
| Class |
Variable |
Property |
| u-ac-between |
$ac-between |
align-content: space-between |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-between: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-between"></div>
<div class="u-ac-between@vp-7"></div>
<div class="u-ac-between@to-vp-7"></div>
Align-content-around
| Class |
Variable |
Property |
| u-ac-around |
$ac-around |
align-content: space-around |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-around: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-around"></div>
<div class="u-ac-around@vp-7"></div>
<div class="u-ac-around@to-vp-7"></div>
Align-content-evenly
| Class |
Variable |
Property |
| u-ac-evenly |
$ac-evenly |
align-content: space-evenly |
@use "@littlemissrobot/sass-grid" as _grid with (
$ac-evenly: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ac-evenly"></div>
<div class="u-ac-evenly@vp-7"></div>
<div class="u-ac-evenly@to-vp-7"></div>
Align-self-start
| Class |
Variable |
Property |
| u-as-start |
$as-start |
align-self: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$as-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-as-start"></div>
<div class="u-as-start@vp-7"></div>
<div class="u-as-start@to-vp-7"></div>
Align-self-end
| Class |
Variable |
Property |
| u-as-end |
$as-end |
align-self: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$as-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-as-end"></div>
<div class="u-as-end@vp-7"></div>
<div class="u-as-end@to-vp-7"></div>
Align-self-center
| Class |
Variable |
Property |
| u-as-center |
$as-center |
align-self: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$as-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-as-center"></div>
<div class="u-as-center@vp-7"></div>
<div class="u-as-center@to-vp-7"></div>
Align-self-stretch
| Class |
Variable |
Property |
| u-as-stretch |
$as-stretch |
align-self: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$as-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-as-stretch"></div>
<div class="u-as-stretch@vp-7"></div>
<div class="u-as-stretch@to-vp-7"></div>
Place-items-start
| Class |
Variable |
Property |
| u-pi-start |
$pi-start |
place-items: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$pi-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pi-start"></div>
<div class="u-pi-start@vp-7"></div>
<div class="u-pi-start@to-vp-7"></div>
Place-items-end
| Class |
Variable |
Property |
| u-pi-end |
$pi-end |
place-items: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$pi-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pi-end"></div>
<div class="u-pi-end@vp-7"></div>
<div class="u-pi-end@to-vp-7"></div>
Place-items-center
| Class |
Variable |
Property |
| u-pi-center |
$pi-center |
place-items: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$pi-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pi-center"></div>
<div class="u-pi-center@vp-7"></div>
<div class="u-pi-center@to-vp-7"></div>
Place-items-stretch
| Class |
Variable |
Property |
| u-pi-stretch |
$pi-stretch |
place-items: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$pi-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pi-stretch"></div>
<div class="u-pi-stretch@vp-7"></div>
<div class="u-pi-stretch@to-vp-7"></div>
Place-content-start
| Class |
Variable |
Property |
| u-pc-start |
$pc-start |
place-content: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-start"></div>
<div class="u-pc-start@vp-7"></div>
<div class="u-pc-start@to-vp-7"></div>
Place-content-end
| Class |
Variable |
Property |
| u-pc-end |
$pc-end |
place-content: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-end"></div>
<div class="u-pc-end@vp-7"></div>
<div class="u-pc-end@to-vp-7"></div>
Place-content-center
| Class |
Variable |
Property |
| u-pc-center |
$pc-center |
place-content: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-center"></div>
<div class="u-pc-center@vp-7"></div>
<div class="u-pc-center@to-vp-7"></div>
Place-content-stretch
| Class |
Variable |
Property |
| u-pc-stretch |
$pc-stretch |
place-content: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-stretch"></div>
<div class="u-pc-stretch@vp-7"></div>
<div class="u-pc-stretch@to-vp-7"></div>
Place-content-between
| Class |
Variable |
Property |
| u-pc-between |
$pc-between |
place-content: space-between |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-between: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-between"></div>
<div class="u-pc-between@vp-7"></div>
<div class="u-pc-between@to-vp-7"></div>
Place-content-around
| Class |
Variable |
Property |
| u-pc-around |
$pc-around |
place-content: space-around |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-around: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-around"></div>
<div class="u-pc-around@vp-7"></div>
<div class="u-pc-around@to-vp-7"></div>
Place-content-evenly
| Class |
Variable |
Property |
| u-pc-evenly |
$pc-evenly |
place-content: space-evenly |
@use "@littlemissrobot/sass-grid" as _grid with (
$pc-evenly: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-pc-evenly"></div>
<div class="u-pc-evenly@vp-7"></div>
<div class="u-pc-evenly@to-vp-7"></div>
Place-self-start
| Class |
Variable |
Property |
| u-ps-start |
$ps-start |
place-self: start |
@use "@littlemissrobot/sass-grid" as _grid with (
$ps-start: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ps-start"></div>
<div class="u-ps-start@vp-7"></div>
<div class="u-ps-start@to-vp-7"></div>
Place-self-end
| Class |
Variable |
Property |
| u-ps-end |
$ps-end |
place-self: end |
@use "@littlemissrobot/sass-grid" as _grid with (
$ps-end: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ps-end"></div>
<div class="u-ps-end@vp-7"></div>
<div class="u-ps-end@to-vp-7"></div>
Place-self-center
| Class |
Variable |
Property |
| u-ps-center |
$ps-center |
place-self: center |
@use "@littlemissrobot/sass-grid" as _grid with (
$ps-center: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ps-center"></div>
<div class="u-ps-center@vp-7"></div>
<div class="u-ps-center@to-vp-7"></div>
Place-self-stretch
| Class |
Variable |
Property |
| u-ps-stretch |
$ps-stretch |
place-self: stretch |
@use "@littlemissrobot/sass-grid" as _grid with (
$ps-stretch: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-ps-stretch"></div>
<div class="u-ps-stretch@vp-7"></div>
<div class="u-ps-stretch@to-vp-7"></div>
Order-first
| Class |
Variable |
Property |
| u-order-first |
$order-first |
order: -1 |
@use "@littlemissrobot/sass-flex" as _flex with (
$order-first: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-order-first"></div>
<div class="u-order-first@vp-7"></div>
<div class="u-order-first@to-vp-7"></div>
Order-last
| Class |
Variable |
Property |
| u-order-last |
$order-last |
order: 999 |
@use "@littlemissrobot/sass-flex" as _flex with (
$order-last: (
default: true,
at: ("vp-3", "vp-7"),
to: ("vp-3", "vp-7"),
);<div class="u-order-last"></div>
<div class="u-order-last@vp-7"></div>
<div class="u-order-last@to-vp-7"></div>
Order
| Class |
Variable |
Property |
| u-order-1 |
$order |
order: 1 |
@use "@littlemissrobot/sass-flex" as _flex with (
$order: (
value: (1, 2, 3),
at: (
vp-3: (1, 2, 3),
vp-7: (1, 2, 3),
),
to: (
vp-3: (1, 2, 3),
vp-7: (1, 2, 3),
),
);
<div class="u-order-1"></div>
<div class="u-order-2@vp-7"></div>
<div class="u-order-3@to-vp-7"></div>