Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsynlms/sass-greedy
a flexible, lightweight and simple grid generator for sass
https://github.com/hsynlms/sass-greedy
flex-grid flexbox-grid grid sass
Last synced: about 1 month ago
JSON representation
a flexible, lightweight and simple grid generator for sass
- Host: GitHub
- URL: https://github.com/hsynlms/sass-greedy
- Owner: hsynlms
- License: mit
- Created: 2019-06-28T16:34:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T17:16:15.000Z (over 3 years ago)
- Last Synced: 2024-08-09T22:35:28.328Z (3 months ago)
- Topics: flex-grid, flexbox-grid, grid, sass
- Language: SCSS
- Size: 154 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# What is sass-greedy?
> **sass-greedy** is a flexible, lightweight and simple grid generator for Sass.
[](https://npmjs.com/sass-greedy)
[](https://packagephobia.com/result?p=sass-greedy)
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](https://github.com/eduardoboucas/include-media) to give the support of breakpoints for your responsive grid system.
# What is mixin injection?
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**
```scss
@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': 'md', 'breakpoint': '>=md'),
('name': 'lg', 'breakpoint': '>=lg'),
('name': 'xl', 'breakpoint': '>=xl')
)
));
```
Let's dive deep.
# Mixin injections
### Custom row mixin injection
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:
```scss
@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;
}
```
### Custom size mixin injection
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:
```scss
@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;
}
}
```
### Custom column mixin injection
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:
```scss
@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;
}
}
```
# Roadmap
1. ~~Multiple breakpoint query support.~~
2. Spesific mixin injection enabling/disabling feature.