1.0.6 • Published 2 years ago
css-cols v1.0.6
CSS Cols
CSS grid and breakpoints.
Installation
npm install
npm start
in case you want to build grid and demo with your own values.
How to link to your project
Import src/scss/main.scss
to your project's main.scss file. In this case the DartSass is required.
@use "./node_modules/css-cols/src/scss/variables" as *;
@use "./node_modules/css-cols/src/scss/mixins" as *;
@use "./node_modules/css-cols/src/scss/cols" as *;
@use "./node_modules/css-cols/src/scss/functions" as *;
OR
Link built main.css to your site.
<link rel="stylesheet" href="/css/main.min.css">
Usage
Columns and devices
{COL}
is a number from 1 to 12.
{DEVICE}
is a device:
- mobile
- tablet
- tablet-landscape
- desktop
- desktop-big
Default values of breakpoints
- "mobile": up to 599px,
- "tablet": from 600px,
- "tablet-landscape": from 900px,
- "desktop": from 1200px,
- "desktop-big": from 1800px
These values can be changed or you can add your own in src/scss/_variables.scss
Classes
.container {}
.row {}
.col {}
.col-{COL} {}
.col-{DEVICE}-up {}
.col-push-{COL}-{DEVICE}-up {}
.col-pull-{COL}-{DEVICE}-up {}
Mixins
@include breakpoint({DEVICE}) {}
Examples
The same sizes of columns - all devices including mobile
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Various sizes of columns - all devices including mobile
<div class="row">
<div class="col col-3">col-3</div>
<div class="col col-4">col-4</div>
<div class="col col-5">col-5</div>
</div>
Various sizes of columns - across all devices except mobile. Mobile remains 100%.
<div class="row">
<div class="col col-12 col-4-tablet-up">col-12 col-4-tablet-up</div>
<div class="col col-12 col-8-tablet-up">col-12 col-8-tablet-up</div>
</div>
Push & pull columns
<div class="row">
<div class="col col-6 push-1-desktop-up">col-6 push-1-desktop-up</div>
<div class="col col-6 pull-2-desktop-up">col-6 pull-2-desktop-up</div>
</div>