sass-greedy is a flexible, lightweight and simple grid generator for Sass.
Basically, it generates row and column styles and supports breakpoints for responsiveness and multiple grid generation. There are three mixin injections to give you more flexibility while building your own grid.
sass-greedy uses include-media to give the support of breakpoints for your responsive grid system.
Mixin injection allows you to put custom grid styles in a simple way to have more control/flexibility on the grid system. You have access to reach greedy options to be used if it's necessary for all mixin injections.
Greedy options are the combination of greedy defaults and the grid options provided when sass-greedy invoked.
Greedy defaults can be overridden in the grid options.
1. sass-greedy defaults
| Property Name | Type | Default | Description |
|---|---|---|---|
| row-class | string/boolean | 'row' |
Class name of the row element of the grid. If its false, row element CSS style will not be rendered. |
| column-class | string/boolean | 'column' |
Class name of the column element of the grid. If its false, column element CSS style will not be rendered. |
| numbered-column-class | string | 'slice' |
Class name of the numbered column element of the grid. If its empty, column-class will be used instead. |
| grid-wrapper-class | string/boolean | false |
Class name of the wrapper element of the grid system. If its false, grid row and columns will not be children of the grid wrapper class anymore. |
| injections | boolean | true |
Enable/disable mixin injections. |
2. grid options
@include greedy((
'columns': 14, // number of the grid columns
'gutter': 1.6rem, // grid columns gutter size
'sizes': ( // grid sizes (output e.g.: .slice-xs-1, slice-xl-2 etc.). supports breakpoints
'', // mandatory. empty string size also here to generate columns if no breakpoint / responsive design needed
('name': 'xs', 'breakpoint': '<sm'),
('name': 'sm', 'breakpoint': '>=sm'),
('name': 'md', 'breakpoint': '>=md'),
('name': 'lg', 'breakpoint': '>=lg'),
('name': 'xl', 'breakpoint': '>=xl')
)
));Let's dive deep.
sass-greedy runs custom row mixin injection which is defined externally before generating grid column styles.
Let’s assume that you wish to have no-gutters CSS style for row element of the grid system to remove spacings. Here is an example to do it in sass-greedy:
@mixin greedy-custom-row-mixins() {
// no-gutters for row element
.no-gutters {
margin-left: 0;
margin-right: 0;
&> .#{greedy-options('column-class')} {
padding-left: 0;
padding-right: 0;
}
}
}
// output example
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.8rem;
margin-right: -0.8rem;
}
.no-gutters {
margin-left: 0;
margin-right: 0;
}
.no-gutters > .column {
padding-left: 0;
padding-right: 0;
}sass-greedy runs custom size mixin injection which is defined externally while looping column sizes.
Let’s assume that you wish to have flex-row-reverse CSS style to have the flexibility to change the row flex direction in any provided breakpoint size. Here is an example to do it in sass-greedy:
@mixin greedy-custom-size-mixins($size, $breakpoint) {
$flex-name: 'flex';
@if $size and $size != '' {
$flex-name: '#{$flex-name}-#{$size}';
}
// e.g.: flex-row-reverse
.#{$flex-name}-row-reverse {
flex-direction: row-reverse;
}
}
// output example
.flex-row-reverse {
flex-direction: row-reverse;
}
// for the size of sm which is provided in options
@media (min-width: 576px) {
.flex-sm-row-reverse {
flex-direction: row-reverse;
}
}
// for the size of xl which is provided in options
@media (min-width: 1200px) {
.flex-xl-row-reverse {
flex-direction: row-reverse;
}
}sass-greedy runs custom column mixin injection which is defined externally while generating each numbered column styles in all provided sizes.
Let’s assume that you wish to have order CSS style to have the flexibility to change the order of the flex grid columns in any provided breakpoint size. Here is an example to do it in sass-greedy:
@mixin greedy-custom-column-mixins($size, $iteration) {
$order-name: 'order';
@if $size and $size != '' {
$order-name: '#{$order-name}-#{$size}';
}
// e.g.: order-3
.#{$order-name}-#{$iteration} {
order: #{$iteration};
}
}
// output example
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 1;
}
// for the size of md which is provided in options
@media (min-width: 768px) {
.order-md-2 {
order: 2;
}
.order-md-3 {
order: 3;
}
}
// for the size of xl which is provided in options
@media (min-width: 1200px) {
.order-xl-3 {
order: 3;
}
.order-xl-4 {
order: 4;
}
}Multiple breakpoint query support.- Spesific mixin injection enabling/disabling feature.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent