Kitti-grid is lightweight, modern, fluid, responsive, based on flexbox scss grid. The main features - its easy to use and to understand, really easy! Also you may easily set column count for object, just put in mixin argument neccessary part of all columns in row or set adaptive/auto e.g. @include size(3/12), @include size(1/5), @include size(auto), @include size(adaptive) and you may change default gutters in case it's needed e.g. @include row(-20px), @include col(20px), @include size(1/3, 20px), @include offset(1/3, 20px).
Repo contains 2 files - desktop-first set and mobile-first(bootstrap) set. You may choose one you need on your project. If default sets are unsuitable you can easily change them.
I review desktop-first set, if you like bootstrap or mobile-first approach at whole I think you know what to do :)
Additionally I use autoprefixer, cssnano and group-css-media-queries, but presented output code was modified only with group-css-media-queries.
Navigation:
Default variables:
- My designer like to use custom layouts, so gutters change when screen width is reduced.
// desktop first breakpoints
$break_xlg : 1440px;
$break_lg : 1100px;
$break_md : 920px;
$break_sm : 640px;
$break_xs : 480px;
// container, variables and fluid mobile gutters
$mob-padding: 15px;
:root {
--content-width: 1160px;
--gutter: 15px;
}
@include md {
:root {
--gutter: 10px;
}
}
Default clases:
Mixins to use:
>>> Change window width to see result.
Html:
<div class="container">
<div class="row">
<div class="row__item">1</div>
<div class="row__item">2</div>
<div class="row__item">3</div>
<div class="row__item">4</div>
<div class="row__item">5</div>
</div>
</div>
Scss:
.row {
&__item {
@include col();
@include size(1/3);
@include md {
@include size(1/5);
}
@include sm {
@include size(1);
}
}
}
Html:
<div class="container">
<div class="custom-row">
<div class="custom-row__item">1</div>
<div class="custom-row__item">2</div>
<div class="custom-row__item custom-row__item_offset">3</div>
</div>
</div>
Scss:
.custom-row {
@include row();
&__item {
@include col();
@include size(1/5);
@include md{
@include size(1/3);
}
&_offset {
@include offset(1/5);
@include md{
@include size(1/3);
@include offset();
}
}
}
}
Html:
<div class="container">
<div class="adaptive">
<div class="adaptive__item adaptive__item_adaptive">1</div>
<div class="adaptive__item">2</div>
<div class="adaptive__item adaptive__item_adaptive">3</div>
</div>
</div>
Scss:
.adaptive {
@include row();
&__item {
@include col();
@include size(1/5);
@include md{
@include size(4/6);
}
&_adaptive {
@include size(adaptive);
@include md{
@include size(adaptive);
}
}
}
}
Html:
<div class="container">
<div class="auto">
<div class="auto__item auto__item_auto">11111111111111111111</div>
<div class="auto__item">2</div>
<div class="auto__item auto__item_auto">33333333333</div>
</div>
</div>
Scss:
.auto {
@include row();
&__item {
@include col();
@include size(1/3);
@include md{
@include size(2/7);
}
&_auto {
@include size(auto);
@include md{
@include size(2/7);
}
}
}
}
Html:
<div class="container">
<div class="stretched">
<div class="stretched__item">1</div>
<div class="stretched__item">2</div>
<div class="stretched__item">3</div>
<div class="stretched__item">4</div>
<div class="stretched__item">5</div>
<div class="stretched__item">6</div>
<div class="stretched__item">7</div>
<div class="stretched__item">8</div>
</div>
</div>
Scss:
.stretched {
@include row();
&__item {
@include col();
@include size(1/3);
flex-grow: 1;
}
}
Html:
<div class="container">
<div class="centered">
<div class="centered__item">1</div>
<div class="centered__item">2</div>
<div class="centered__item">3</div>
<div class="centered__item">4</div>
<div class="centered__item">5</div>
<div class="centered__item">6</div>
<div class="centered__item">7</div>
<div class="centered__item">8</div>
</div>
</div>
Scss:
.centered {
@include row();
justify-content: center;
@include md{
justify-content: flex-start;
}
&__item {
@include col();
@include size(1/3);
}
}
Html:
<div class="container">
<div class="custom-gutters">
<div class="custom-gutters__item">1</div>
<div class="custom-gutters__item">2</div>
<div class="custom-gutters__item">3</div>
<div class="custom-gutters__item">4</div>
</div>
</div>
Scss:
.custom-gutters {
@include row(-5px);
justify-content: center;
@include md{
@include row(-30px);
}
&__item {
@include col(5px);
@include size(1/4, 5px);
@include md{
@include col(30px);
@include size(1/3, 30px);
}
}
}
Html:
<div class="container-fluid">
<div class="row-wide">
<div class="row-wide__item">1</div>
<div class="row-wide__item">2</div>
<div class="row-wide__item">3</div>
<div class="row-wide__item">4</div>
<div class="row-wide__item">5</div>
<div class="row-wide__item">6</div>
<div class="row-wide__item">7</div>
<div class="row-wide__item">8</div>
<div class="row-wide__item">9</div>
<div class="row-wide__item">10</div>
<div class="row-wide__item">11</div>
</div>
</div>
Scss:
.row-wide {
@include row(0);
//@include no-gutter; -- you can use this mixin instead '0'
&__item {
@include col(0);
@include size(1/4, 0);
@include md{
@include size(1/3, 0);
}
@include sm{
@include size(1/2, 0);
}
&:nth-child(9n+1), &:nth-child(9n+5), &:nth-child(9n+9) {
@include size(2/4, 0);
@include md{
@include size(1/3, 0);
}
@include sm{
@include size(1/2, 0);
}
}
}
}
Output css for #basic example
.row {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.row__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
}
@media screen and (max-width: 920px) {
.row__item {
width: calc(100% * 0.2 - var(--gutter) * 2);
flex-basis: calc(100% * 0.2 - var(--gutter) * 2);
flex-grow: 0;
}
}
@media screen and (max-width: 640px) {
.row__item {
width: calc(100% * 1 - var(--gutter) * 2);
flex-basis: calc(100% * 1 - var(--gutter) * 2);
flex-grow: 0;
}
}
Output css for #offset example
.custom-row {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.custom-row__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.2 - var(--gutter) * 2);
flex-basis: calc(100% * 0.2 - var(--gutter) * 2);
flex-grow: 0;
}
.custom-row__item_offset {
margin-left: calc(100% * 0.2 + var(--gutter));
}
@media screen and (max-width: 920px) {
.custom-row__item {
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
}
.custom-row__item_offset {
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
margin-left: var(--gutter);
}
}
Output css for #adaptiveWidth example
.adaptive {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.adaptive__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.2 - var(--gutter) * 2);
flex-basis: calc(100% * 0.2 - var(--gutter) * 2);
flex-grow: 0;
}
.adaptive__item_adaptive {
width: 100%;
flex-basis: 0;
flex-grow: 1;
}
@media screen and (max-width: 920px) {
.adaptive__item {
width: calc(100% * 0.66667 - var(--gutter) * 2);
flex-basis: calc(100% * 0.66667 - var(--gutter) * 2);
flex-grow: 0;
}
.adaptive__item_adaptive {
width: 100%;
flex-basis: 0;
flex-grow: 1;
}
}
Output css for #autoWidth example
.auto {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.auto__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
}
.auto__item_auto {
width: auto;
flex-basis: auto;
flex-grow: 0;
}
@media screen and (max-width: 920px) {
.auto__item {
width: calc(100% * 0.28571 - var(--gutter) * 2);
flex-basis: calc(100% * 0.28571 - var(--gutter) * 2);
flex-grow: 0;
}
.auto__item_auto {
width: calc(100% * 0.28571 - var(--gutter) * 2);
flex-basis: calc(100% * 0.28571 - var(--gutter) * 2);
flex-grow: 0;
}
}
Output css for #lastItemsStretched example
.stretched {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
}
.stretched__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
flex-grow: 1;
}
Output css for #lastItemsCentered example
.centered {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: calc(var(--gutter) * -1);
margin-right: calc(var(--gutter) * -1);
justify-content: center;
}
.centered__item {
box-sizing: border-box;
margin-left: var(--gutter);
margin-right: var(--gutter);
width: calc(100% * 0.33333 - var(--gutter) * 2);
flex-basis: calc(100% * 0.33333 - var(--gutter) * 2);
flex-grow: 0;
}
@media screen and (max-width: 920px) {
.centered {
justify-content: flex-start;
}
}
Output css for #customGutters example
.custom-gutters {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: -5px;
margin-right: -5px;
justify-content: center;
}
.custom-gutters__item {
box-sizing: border-box;
margin-left: 5px;
margin-right: 5px;
width: calc(100% * 0.25 - 5px * 2);
flex-basis: calc(100% * 0.25 - 5px * 2);
flex-grow: 0;
}
@media screen and (max-width: 920px) {
.custom-gutters {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: -30px;
margin-right: -30px;
}
.custom-gutters__item {
box-sizing: border-box;
margin-left: 30px;
margin-right: 30px;
width: calc(100% * 0.33333 - 30px * 2);
flex-basis: calc(100% * 0.33333 - 30px * 2);
flex-grow: 0;
}
}
Output css for #fullWidthContainer example
.row-wide {
display: flex;
flex-wrap: wrap;
clear: both;
margin-left: 0;
margin-right: 0;
}
.row-wide__item {
box-sizing: border-box;
margin-left: 0;
margin-right: 0;
width: calc(100% * 0.25);
flex-basis: calc(100% * 0.25);
flex-grow: 0;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
padding: 50px 10px;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.row-wide__item:nth-child(odd) {
background: #8f76ff;
}
.row-wide__item:nth-child(even) {
background: #615761;
}
.row-wide__item:nth-child(9n+1),
.row-wide__item:nth-child(9n+5),
.row-wide__item:nth-child(9n+9) {
width: calc(100% * 0.5);
flex-basis: calc(100% * 0.5);
flex-grow: 0;
}
@media screen and (max-width: 920px) {
.row-wide__item {
width: calc(100% * 0.33333);
flex-basis: calc(100% * 0.33333);
flex-grow: 0;
}
.row-wide__item:nth-child(9n+1),
.row-wide__item:nth-child(9n+5),
.row-wide__item:nth-child(9n+9) {
width: calc(100% * 0.33333);
flex-basis: calc(100% * 0.33333);
flex-grow: 0;
}
}
@media screen and (max-width: 640px) {
.row__item {
width: calc(100% * 1 - var(--gutter) * 2);
flex-basis: calc(100% * 1 - var(--gutter) * 2);
flex-grow: 0;
}
.row-wide__item {
width: calc(100% * 0.5);
flex-basis: calc(100% * 0.5);
flex-grow: 0;
}
.row-wide__item:nth-child(9n+1),
.row-wide__item:nth-child(9n+5),
.row-wide__item:nth-child(9n+9) {
width: calc(100% * 0.5);
flex-basis: calc(100% * 0.5);
flex-grow: 0;
}
If you have some questions you may contact me via telegram @dendash
My english is very good I know :)