1.0.1 • Published 2 years ago
@hkst/css-grid v1.0.1
HKST CSS GRID
Flexbox grid system.
How to use
Installation
npm i @hkst/css-grid
How to use in your SASS files
@import '~bem-css-grid-test/src/scss/grid/styles';
Classnames
.g-wrap
The main grid wrapper
.g-row
The main grid row container
.g-row--MODIFIER
Grid row with gutter modifier. See breakpoints variable
.g-col
Auto width column
.g-col--BP-1-12
Column with 1-12 columns space since BP breakpoint width. See breakpoints variable
Basic markup structure with auto width columns
If you don't use columns modifier classnames the columns has auto width. In this example the grid system have 12 columns and each .g-col element in this markup use 3 columns space(3*4=12)
<div class="g-wrap">
<div class="g-row">
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
<div class="g-col">
<!-- Your content -->
</div>
</div>
</div>
Basic markup structure with columns width by breakpoint
(Very similar html markup concept than bootstrap grid)
<div class="g-wrap">
<div class="g-row">
<div class="g-col--xs-6">
<!-- Your 6 columns content in all breakpoints -->
</div>
<div class="g-col--xs-6">
<!-- Your 6 columns content in all breakpoints -->
</div>
<div class="g-col--sm-6 g-col--md-4">
<!-- Your 6 columns content since 'small' breakpoint -->
<!-- Your 4 columns content since 'medium' breakpoint -->
</div>
<div class="g-col--sm-6 g-col--md-4">
<!-- Your 6 columns content since 'small' breakpoint -->
<!-- Your 4 columns content since 'medium' breakpoint -->
</div>
<div class="g-col--lg-4">
<!-- Your 4 columns content since 'large' breakpoint -->
</div>
</div>
</div>
Variables
Grid width
$grid-width: 100% !default;
Grid columns
$grid-columns: 12 !default;
Grid main gutter
$grid-gutter: 14px !default;
Grid breakpoints
$grid-breakpoints: ( "xs" : 0px, "sm" : 768px, "md" : 992px, "lg" : 1200px) !default;
Grid gutter modifiers
$grid-gutter-modifiers: ( "xs" : 0.25, "sm" : 0.75, "md" : 1.5, "lg" : 1.75) !default;
If you use .g-row--xs, the gutter is $grid-gutter * 0.25;
.
If you use .g-row--lg, the gutter is $grid-gutter * 1.75;
.
Custom variables values
$grid-gutter: 30px;
@import '~bem-css-grid-test/src/scss/grid/styles';