Skip to content

Commit 1ac594a

Browse files
thingsymthingsym
committed
Merge branch 'release-0.3.3'
2 parents 1c49d7a + d6e7f34 commit 1ac594a

38 files changed

+10443
-239
lines changed

‎.github/workflows/lint.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ on:
1212

1313
jobs:
1414
lint:
15-
runs-on: ubuntu-18.04
15+
runs-on: ubuntu-20.04
1616
timeout-minutes: 10
1717

1818
steps:

‎.github/workflows/npm-publish.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ on:
88
jobs:
99
publish:
1010
name: Publish to npm registry
11-
runs-on: ubuntu-18.04
11+
runs-on: ubuntu-20.04
1212
timeout-minutes: 10
1313

1414
steps:

‎README.md‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,40 @@ Flexbox Grid Mixins documentation: [https://thingsym.github.io/flexbox-grid-mixi
2323

2424
### Sass
2525

26-
#### LibSass
26+
#### Dart Sass
2727

2828
```
29-
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
29+
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
3030
3131
$default-grid-gutter: 2%;
3232
3333
.grid {
34-
@include grid($gutter: $default-grid-gutter);
34+
@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
3535
3636
> .grid__col-3 {
37-
@include grid-col($col: 3, $gutter: $default-grid-gutter);
37+
@include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter);
3838
}
3939
> .grid__col-9 {
40-
@include grid-col($col: 9, $gutter: $default-grid-gutter);
40+
@include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter);
4141
}
4242
}
4343
```
4444

45-
#### Dart Sass
45+
#### LibSass
4646

4747
```
48-
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
48+
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
4949
5050
$default-grid-gutter: 2%;
5151
5252
.grid {
53-
@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
53+
@include grid($gutter: $default-grid-gutter);
5454
5555
> .grid__col-3 {
56-
@include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter);
56+
@include grid-col($col: 3, $gutter: $default-grid-gutter);
5757
}
5858
> .grid__col-9 {
59-
@include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter);
59+
@include grid-col($col: 9, $gutter: $default-grid-gutter);
6060
}
6161
}
6262
```
@@ -113,73 +113,73 @@ $ yarn add flexbox-grid-mixins --dev
113113

114114
### Manual Install
115115

116-
Include `sass/\_flexbox-grid-mixins.scss` or `dart-sass/\_flexbox-grid-mixins.scss` in the appropriate location in your project.
116+
Include `dart-sass/\_flexbox-grid-mixins.scss` or `sass/\_flexbox-grid-mixins.scss` in the appropriate location in your project.
117117

118-
## Getting Started using LibSass
119-
120-
Note: [LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated). See [Future Plans](https://sass-lang.com/blog/the-module-system-is-launched#future-plans).
118+
## Getting Started using Dart Sass
121119

122120
### 1. Import Flexbox Grid Mixins in Sass/SCSS file
123121

124122
```
125-
@import 'flexbox-grid-mixins';
123+
@use 'flexbox-grid-mixins';
126124
```
127125

128126
Example : import from node_modules
129127

130128
```
131-
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
129+
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
132130
```
133131

134132
### 2. Define the grid container
135133

136134
```
137135
.grid {
138-
@include grid();
136+
@include flexbox-grid-mixins.grid();
139137
}
140138
```
141139

142140
### 3. Generate the grid columns
143141

144142
```
145143
.grid__col-3 {
146-
@include grid-col(3);
144+
@include flexbox-grid-mixins.grid-col(3);
147145
}
148146
.grid__col-9 {
149-
@include grid-col(9);
147+
@include flexbox-grid-mixins.grid-col(9);
150148
}
151149
```
152150

153-
## Getting Started using Dart Sass
151+
## Getting Started using LibSass
152+
153+
Note: [LibSass is Deprecated](https://sass-lang.com/blog/libsass-is-deprecated). See [Future Plans](https://sass-lang.com/blog/the-module-system-is-launched#future-plans).
154154

155155
### 1. Import Flexbox Grid Mixins in Sass/SCSS file
156156

157157
```
158-
@use 'flexbox-grid-mixins';
158+
@import 'flexbox-grid-mixins';
159159
```
160160

161161
Example : import from node_modules
162162

163163
```
164-
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
164+
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
165165
```
166166

167167
### 2. Define the grid container
168168

169169
```
170170
.grid {
171-
@include flexbox-grid-mixins.grid();
171+
@include grid();
172172
}
173173
```
174174

175175
### 3. Generate the grid columns
176176

177177
```
178178
.grid__col-3 {
179-
@include flexbox-grid-mixins.grid-col(3);
179+
@include grid-col(3);
180180
}
181181
.grid__col-9 {
182-
@include flexbox-grid-mixins.grid-col(9);
182+
@include grid-col(9);
183183
}
184184
```
185185

@@ -196,28 +196,31 @@ See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-m
196196
* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)
197197
* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)
198198

199-
### LibSass
200-
201-
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
202-
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
203-
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
204-
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
205-
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)
206-
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example/stack.html)
207-
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)
208-
* [Testing Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example/test-stick-out.html)
209-
210-
211199
### Dart Sass
212200

213201
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/example.html)
214202
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/holy-grail-layout.html)
215203
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/responsive.html)
216-
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/unit-set.html)
204+
* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/gap.html)
205+
* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/auto-margin.html)
217206
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/box-sizing.html)
218207
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/stack.html)
219208
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/grid-type.html)
220-
* [Testing Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/test-stick-out.html)
209+
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/unit-set.html)
210+
* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/test-stick-out.html)
211+
212+
### LibSass
213+
214+
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
215+
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
216+
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
217+
* [Gap (grid-gap) css property](http://thingsym.github.io/flexbox-grid-mixins/example/gap.html)
218+
* [Auto margin](http://thingsym.github.io/flexbox-grid-mixins/example/auto-margin.html)
219+
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)
220+
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example/stack.html)
221+
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)
222+
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
223+
* [Test] [Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example/test-stick-out.html)
221224

222225
## Package manager
223226

@@ -246,6 +249,12 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
246249

247250
## Changelog
248251

252+
* Version 0.3.3
253+
* update README
254+
* update index.html
255+
* update example
256+
* add condense
257+
* add $gap argument for gap CSS property
249258
* Version 0.3.2
250259
* fix gulp-sass compiler
251260
* update package.json
@@ -313,4 +322,4 @@ Licensed under the MIT License.
313322

314323
[thingsym](https://github.com/thingsym)
315324

316-
Copyright (c) 2016-2020 thingsym
325+
Copyright (c) 2016-2022 thingsym

‎dart-sass/_flexbox-grid-mixins.scss‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// ===================================================================
22
// Flexbox Grid Mixins (Dart Sass)
3-
// Version 0.3.2
3+
// Version 0.3.3
44
// Description: Sass Mixins to generate Flexbox grid
55
// Author: thingsym
66
// GitHub: https://github.com/thingsym/flexbox-grid-mixins
@@ -17,7 +17,7 @@ $flexbox-grid-mixins-grid-type: skeleton !default;
1717
$flexbox-grid-mixins-box-sizing: border-box !default;
1818
$flexbox-grid-mixins-stack: margin-bottom !default;
1919

20-
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null)
20+
@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null)
2121
{
2222
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
2323
box-sizing: $flexbox-grid-mixins-box-sizing;
@@ -55,15 +55,40 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
5555
}
5656
}
5757

58+
@if $gap != null {
59+
@if length($gap) == 1 {
60+
gap: $gap;
61+
} @else if length($gap) == 2 {
62+
$row-gap: nth($gap, 1);
63+
$column-gap: nth($gap, 2);
64+
65+
row-gap: $row-gap;
66+
column-gap: $column-gap;
67+
}
68+
} @else {
69+
row-gap: $row-gap;
70+
column-gap: $column-gap;
71+
}
72+
5873
@content;
5974
}
6075

61-
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
76+
@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $gap: null, $row-gap: null, $column-gap: null, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $condense: false, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
6277
{
6378
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
6479
box-sizing: $flexbox-grid-mixins-box-sizing;
6580
}
6681

82+
@if $gap != null {
83+
@if length($gap) == 1 {
84+
$row-gap: $gap;
85+
$column-gap: $gap;
86+
} @else if length($gap) == 2 {
87+
$row-gap: nth($gap, 1);
88+
$column-gap: nth($gap, 2);
89+
}
90+
}
91+
6792
@if meta.type-of($col) == number and math.is-unitless($col) == true {
6893
$flex-shrink: 0;
6994
$flex-basis: math.percentage(math.div($col, $grid-columns));
@@ -75,6 +100,13 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
75100
$flex-basis: calc( #{$flex-basis} - #{$gutter} );
76101
}
77102

103+
@if $column-gap and unit($column-gap) == '%' {
104+
$flex-basis: $flex-basis - $column-gap + $column-gap / $grid-columns * $col;
105+
} @else if $column-gap and unitless($column-gap) == false {
106+
@if ( $grid-columns != $col ) {
107+
$flex-basis: calc( #{$flex-basis} - #{$column-gap} + #{math.div($column-gap, $grid-columns) * $col});
108+
}
109+
}
78110
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
79111
@if $gutter and math.unit($gutter) == '%' {
80112
$flex-basis: math.div(100% - ($gutter * (math.div($grid-columns, $col) - 1)), math.div($grid-columns, $col));
@@ -183,13 +215,15 @@ $flexbox-grid-mixins-stack: margin-bottom !default;
183215
}
184216
}
185217

186-
@if $flexbox-grid-mixins-stack == margin-top {
187-
margin-top: $gutter;
188-
} @else if $flexbox-grid-mixins-stack == margin-bottom {
189-
margin-bottom: $gutter;
190-
} @else if $flexbox-grid-mixins-stack == margin-both {
191-
margin-top: math.div($gutter, 2);
192-
margin-bottom: math.div($gutter, 2);
218+
@if $condense == false {
219+
@if $flexbox-grid-mixins-stack == margin-top {
220+
margin-top: $gutter;
221+
} @else if $flexbox-grid-mixins-stack == margin-bottom {
222+
margin-bottom: $gutter;
223+
} @else if $flexbox-grid-mixins-stack == margin-both {
224+
margin-top: math.div($gutter, 2);
225+
margin-bottom: math.div($gutter, 2);
226+
}
193227
}
194228
}
195229

‎docs/css-dart-sass/default.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ td.example {
127127
text-align: center;
128128
}
129129

130-
.column {
130+
.columns {
131131
-webkit-box-sizing: border-box;
132132
box-sizing: border-box;
133133
display: -webkit-box;
@@ -136,7 +136,7 @@ td.example {
136136
margin-left: -1%;
137137
margin-right: -1%;
138138
}
139-
.column > .columns {
139+
.columns > .column {
140140
-webkit-box-sizing: border-box;
141141
box-sizing: border-box;
142142
-webkit-box-flex: 0;

0 commit comments

Comments
 (0)