@jogarcia/mgrid v1.0.2
Grid System
This grid system is inspired by Bootstrap's layout system but utilizes CSS Grid. It is built with 12 columns, which can be spanned in various ways to create flexible layouts.
This module contains files that are fully modular. I don't offer a full bundle. So, if you want all the files you'll have to import them yourself.
How to import
In a js file:
import "@jogarcia/mgrid/container.scss";
import "@jogarcia/mgrid/g-row.scss";
import "@jogarcia/mgrid/g-col.scss";
import "@jogarcia/mgrid/gap.scss";
import "@jogarcia/mgrid/margin.scss";
import "@jogarcia/mgrid/padding.scss";
or
import "@jogarcia/mgrid/dist/container.css";
import "@jogarcia/mgrid/dist/g-row.css";
import "@jogarcia/mgrid/dist/g-col.css";
import "@jogarcia/mgrid/dist/gap.css";
import "@jogarcia/mgrid/dist/margin.css";
import "@jogarcia/mgrid/dist/padding.css";
In a scss/sass file:
@import "~@jogarcia/mgrid/container.scss";
@import "~@jogarcia/mgrid/g-row.scss";
@import "~@jogarcia/mgrid/g-col.scss";
@import "~@jogarcia/mgrid/gap.scss";
@import "~@jogarcia/mgrid/margin.scss";
@import "~@jogarcia/mgrid/padding.scss";
or
@import "~@jogarcia/mgrid/dist/container.css";
@import "~@jogarcia/mgrid/dist/g-row.css";
@import "~@jogarcia/mgrid/dist/g-col.css";
@import "~@jogarcia/mgrid/dist/gap.css";
@import "~@jogarcia/mgrid/dist/margin.css";
@import "~@jogarcia/mgrid/dist/padding.css";
Classes
.container
: Diminishes the spacing around the tag that its applied to..g-row
: Use this class for a grid row. It creates a grid layout context and contains 12 grid columns..g-col-{number}
: Spans {number} columns on from 0px on..g-col-{breakpoint}-{number}
: Spans {number} columns on from {breakpoint} on..gap-{number}
: Adds a gap with value {number}, uses the rem measure unit by default..m-{number}
: Adds margin in all directions. Uses the em measure unit by default..m{direction}-{number}
: Adds margin in the {direction} given..p-{number}
: Adds padding in all directions. Uses the em measure unit by default..p{direction}-{number}
: Adds padding in the {direction} given.
If you have used before most styles libraries you must be used to breakpoints. These are the default breakpoints of this library.
- xs: >= 0px
- sm: >= 576px
- md: >= 768px
- lg: >= 992px
- xl: >= 1200px
- 2xl:>= 1400px
Directions specified:
- t = top
- b = bottom
- l = left
- r = right
- x = right and left
- y = top and bottom
- If no specification = all the dimensions at the same time
Customization
All the files posses customization options that can be changed at import. This section defines each.
Container
You can change the breakpoints of the container by passing them like this:
@use "~@jogarcia/mgrid/container.scss" with (
$breakpoints: (
"xs": (
"min": 0px,
"width": 100%,
),
"sm": (
"min": 576px,
"width": 100%,
),
)
);
Row
Row does not have customization options
Col
Similar to the container you can change the col breakpoints passing them like this:
@use "~@jogarcia/mgrid/g-col.scss" with (
$breakpoints: (
"xs": 0px,
"sm": 476px,
"md": 668px,
"lg": 792px,
)
);
Gap, margin and padding
You can personalize the following variables in these 3:
- range. Defines how much classes there will be
- base. Allows you to multiply each iteration by this number. By default 1 for gap and 0.25 for margin and padding.
- unit. You can set your preferred unit. For gap I use rem while for margin and padding I use em.
An example with gap:
@use "~@jogarcia/mgrid/gap.scss" with (
$base: 1,
$range: 20,
$unit: px
);
This will create gap classes from 0 to 20 using the pixels unit and multiplying each iteration with 1.