custom-grid-scss
v1.1.2
Published
This module provides a customized grid with the ability to expand functionality for different resolutions with a different number of columns. To do this, you need to configure only one css $ grid object and all styles will be rebuilt to fit the required p
Downloads
18
Maintainers
vlad_druzyakinReadme
Custom Grid SCSS
This module provides a customized grid with the ability to expand functionality for different resolutions with a different number of columns. To do this, you need to configure only one scss $grid object and all styles will be rebuilt to fit the required parameters.
Installation and configuration
Install grid.scss
npm i custom-grid-scss --save
For quick work with grid scss you need to import settings_base.scss and grid.scss file to your main scss file.
@import '../../../node_modules/custom-grid-scss/settings_base';
@import '../../../node_modules/custom-grid-scss/grid';After connecting scss files, you can use grid. The basic grid settings are as follows.
settings_base.scss
$grid: (
'column-color': rgba(255, 0, 0, 0.1), // column color
'base': (
'container': ( // container settings
'width': 1920px, // max-width container
'padding': (
'x': 16px,
'y': 0px,
),
),
'column': (
'width': (
'min': 0px, // min width column
'max': 1fr, // max width column
),
'gap': 32px, // column gap
'count': 12, // count column
),
),
'media': (
'breakpoint': ( // your number of breakpoints
'xl',
'lg',
'md',
'sm',
),
'xl': (
'max-width': 1200px, // max-width breakpoint
'container': (
'width': 1920px, // max-width container
'padding': (
'x': 16px,
'y': 0px,
),
),
'column': (
'width': (
'min': 0px, // min width column
'max': 1fr, // max width column
),
'gap': 32px, // column gap
'count': 12, // count column
),
),
...
);But if you don't want to use a standard grid. Then you can create your own scss $grid object and reassign it to the values you need. You can also add more backpoints, but each new added breakpoint needs to be added to the $grid - media - breakpoint and set your own parameters for it as shown in the standard grid.
How to use
To work with a grid, you need to create a grid container <div class="grid-container-fluid">...</div>. Then inside you use <div class="grid-row full">...</div> and inside it you can also split content using <div class="col-4 col-sm-1">...</div>.
grid container
There are two types of containers, they are grid-container and grid-container-fluid.
grid-row
We use <div class="grid-row"></div> to divide content into conditional lines in the template or into blocks as you prefer. With <div class="grid-row"></div>, you can also use an additional class full <div class="grid-row full"></div>, and then the line will always occupy all columns, or you can explicitly indicate how many columns the line will occupy and at what resolution this number will change <div class="grid-row col-6 col-md-4 col-sm-2"></div>.
сol
Use <div class="grid-row"></div> inside. Specify how much column <div class="col-<breakpoint>-<number>"></div> will take.
оffset
Use <div class="grid-row"></div> inside. Specify how many columns need to be indented <span class="offset-<breakpoint>-<number>"></span>.
Example:
<div class="grid-container-fluid">
<header class="grid-row full">
<a href="#" class="logo col-2 col-sm-1"> GRID </a>
<span class="offset-6 offset-lg-2 offset-md-none"></span>
<div class="menu col-4 col-sm-none">
<nav>
<li><a href="#">Main</a></li>
<li><a href="#">Grid row</a></li>
<li><a href="#">Grid column</a></li>
</nav>
</div>
</header>
<div class="cards grid-row full">
<div class="col-4"><p>First block</p></div>
<div class="col-4"><p>Two block</p></div>
<div class="col-4"><p>Trhee block</p></div>
</div>Grid background
There are two options for displaying the grid. The first is by adding a class to the tag body. (Only works fine if you are using a grid-container with side padding).
<body class="grid-bg-before">
<div class="grid-container">
...
</div>
</body>The second is by adding grid-bg or grid-bg-fluid at the beginning of the body tag with the maximum number of your specified columns.
<div class="grid-bg"> // or grid-bg-fluid
<span class="col"></span>
... // If you have a maximum number of columns of 12, then there should be 12 elements.
<span class="col"></span>
</div>As a result, we will get such a grid.
