Skip to content

Commit cef86c0

Browse files
thingsymthingsym
committed
Merge branch 'release-0.3.0'
2 parents e6513a3 + 754979a commit cef86c0

File tree

77 files changed

+20011
-3779
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+20011
-3779
lines changed

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: thingsym

‎README.md‎

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

2424
### Sass
2525

26+
#### LibSass
27+
2628
```
2729
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
2830
@@ -40,6 +42,25 @@ $default-grid-gutter: 2%;
4042
}
4143
```
4244

45+
#### Dart Sass
46+
47+
```
48+
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
49+
50+
$default-grid-gutter: 2%;
51+
52+
.grid {
53+
@include flexbox-grid-mixins.grid($gutter: $default-grid-gutter);
54+
55+
> .grid__col-3 {
56+
@include flexbox-grid-mixins.grid-col($col: 3, $gutter: $default-grid-gutter);
57+
}
58+
> .grid__col-9 {
59+
@include flexbox-grid-mixins.grid-col($col: 9, $gutter: $default-grid-gutter);
60+
}
61+
}
62+
```
63+
4364
### CSS
4465

4566
```
@@ -92,17 +113,19 @@ $ yarn add flexbox-grid-mixins --dev
92113

93114
### Manual Install
94115

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

97-
## Getting Started
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).
98121

99122
### 1. Import Flexbox Grid Mixins in Sass/SCSS file
100123

101124
```
102125
@import 'flexbox-grid-mixins';
103126
```
104127

105-
Example : import form node_modules
128+
Example : import from node_modules
106129

107130
```
108131
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';
@@ -127,6 +150,39 @@ Example : import form node_modules
127150
}
128151
```
129152

153+
## Getting Started using Dart Sass
154+
155+
### 1. Import Flexbox Grid Mixins in Sass/SCSS file
156+
157+
```
158+
@use 'flexbox-grid-mixins';
159+
```
160+
161+
Example : import from node_modules
162+
163+
```
164+
@use 'node_modules/flexbox-grid-mixins/dart-sass/flexbox-grid-mixins';
165+
```
166+
167+
### 2. Define the grid container
168+
169+
```
170+
.grid {
171+
@include flexbox-grid-mixins.grid();
172+
}
173+
```
174+
175+
### 3. Generate the grid columns
176+
177+
```
178+
.grid__col-3 {
179+
@include flexbox-grid-mixins.grid-col(3);
180+
}
181+
.grid__col-9 {
182+
@include flexbox-grid-mixins.grid-col(9);
183+
}
184+
```
185+
130186
## Documentation
131187

132188
See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-mixins/](http://thingsym.github.io/flexbox-grid-mixins/)
@@ -139,15 +195,30 @@ See Flexbox Grid Mixins documentation: [http://thingsym.github.io/flexbox-grid-m
139195

140196
* [Basic Example](http://thingsym.github.io/flexbox-grid-mixins/#Basic-Example)
141197
* [Grid System Example](http://thingsym.github.io/flexbox-grid-mixins/#Grid-System-Example)
198+
199+
### LibSass
200+
142201
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example/example.html)
143202
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/holy-grail-layout.html)
144203
* [Responsive web design - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example/responsive.html)
145204
* [Unit-Set Grid (Experimental stage)](http://thingsym.github.io/flexbox-grid-mixins/example/unit-set.html)
146-
* [Box Sizing using Variable Defaults](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)
205+
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example/box-sizing.html)
147206
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example/stack.html)
148207
* [Grid Type](http://thingsym.github.io/flexbox-grid-mixins/example/grid-type.html)
149208
* [Testing Stick Out Grid](http://thingsym.github.io/flexbox-grid-mixins/example/test-stick-out.html)
150209

210+
211+
### Dart Sass
212+
213+
* [Flexbox Grid Mixins Example](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/example.html)
214+
* [Holy Grail Layout - Using Flexbox Grid Mixins](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/holy-grail-layout.html)
215+
* [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)
217+
* [Box Sizing using Default Values](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/box-sizing.html)
218+
* [Stack](http://thingsym.github.io/flexbox-grid-mixins/example-dart-sass/stack.html)
219+
* [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)
221+
151222
## Package manager
152223

153224
[flexbox-grid-mixins - npm](https://www.npmjs.com/package/flexbox-grid-mixins)
@@ -177,6 +248,10 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
177248

178249
## Changelog
179250

251+
* Version 0.3.0
252+
* add example for dart sass
253+
* add Flexbox Grid Mixins for Dart Sass
254+
* add dart sass workfows with gulpfile.js
180255
* Version 0.2.2
181256
* remove .travis.yml, change CI/CD to GitHub Actions
182257
* Version 0.2.1
@@ -185,15 +260,15 @@ Small patches and bug reports can be submitted a issue tracker in Github. Forkin
185260
* Version 0.2.0
186261
* update example
187262
* update package.json
188-
* add Variable Defaults flexbox-grid-mixins-stack
263+
* add Default Values flexbox-grid-mixins-stack
189264
* change margin property, remove @mixin, grid-margin and grid-col-margin
190265
* remove breakpoint value of col argument
191266
* remove condensed argument
192-
* change grid-type from argument to Variable Defaults flexbox-grid-mixins-grid-type
267+
* change grid-type from argument to Default Values flexbox-grid-mixins-grid-type
193268
* remove bower.json
194269
* add .travis.yml
195270
* Version 0.1.6
196-
* add Variable Defaults $flexbox-grid-mixins-box-sizing
271+
* add Default Values $flexbox-grid-mixins-box-sizing
197272
* update package.json
198273
* change lint from scss-lint to stylelint
199274
* Version 0.1.5

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

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
// ===================================================================
2+
// Flexbox Grid Mixins (Dart Sass)
3+
// Version 0.3.0
4+
// Description: Sass Mixins to generate Flexbox grid
5+
// Author: thingsym
6+
// GitHub: https://github.com/thingsym/flexbox-grid-mixins
7+
// MIT License
8+
// ===================================================================
9+
10+
@charset 'utf-8';
11+
12+
// Built-In Modules
13+
@use "sass:math";
14+
@use "sass:meta";
15+
16+
$flexbox-grid-mixins-grid-type: skeleton !default;
17+
$flexbox-grid-mixins-box-sizing: border-box !default;
18+
$flexbox-grid-mixins-stack: margin-bottom !default;
19+
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)
21+
{
22+
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
23+
box-sizing: $flexbox-grid-mixins-box-sizing;
24+
}
25+
26+
@if $display {
27+
display: $display;
28+
}
29+
30+
@if $flex-direction {
31+
flex-direction: $flex-direction;
32+
}
33+
@if $flex-wrap {
34+
flex-wrap: $flex-wrap;
35+
}
36+
37+
@if $flex-flow {
38+
flex-flow: $flex-flow;
39+
}
40+
41+
@if $justify-content {
42+
justify-content: $justify-content;
43+
}
44+
@if $align-items {
45+
align-items: $align-items;
46+
}
47+
@if $align-content {
48+
align-content: $align-content;
49+
}
50+
51+
@if $flexbox-grid-mixins-grid-type == skeleton {
52+
@if $gutter {
53+
margin-left: $gutter / 2 * -1;
54+
margin-right: $gutter / 2 * -1;
55+
}
56+
}
57+
58+
@content;
59+
}
60+
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)
62+
{
63+
@if $flexbox-grid-mixins-box-sizing == 'border-box' or $flexbox-grid-mixins-box-sizing == 'content-box' {
64+
box-sizing: $flexbox-grid-mixins-box-sizing;
65+
}
66+
67+
@if meta.type-of($col) == number and math.is-unitless($col) == true {
68+
$flex-shrink: 0;
69+
$flex-basis: math.percentage($col / $grid-columns);
70+
71+
@if $flexbox-grid-mixins-grid-type == skeleton {
72+
@if $gutter and math.unit($gutter) == '%' {
73+
$flex-basis: $flex-basis - $gutter;
74+
} @else if $gutter and math.is-unitless($gutter) == false {
75+
$flex-basis: calc( #{$flex-basis} - #{$gutter});
76+
}
77+
78+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
79+
@if $gutter and math.unit($gutter) == '%' {
80+
$flex-basis: (100% - ($gutter * ($grid-columns / $col - 1))) / ($grid-columns / $col);
81+
} @else if $gutter and math.is-unitless($gutter) == false {
82+
$flex-basis: calc( #{$flex-basis} - #{$gutter * ($grid-columns / $col - 1) / ($grid-columns / $col)});
83+
}
84+
}
85+
86+
@if $col-offset and math.unit($col-offset) == '%' {
87+
$flex-basis: $flex-basis + $col-offset;
88+
} @else if $col-offset and math.is-unitless($col-offset) == false {
89+
$flex-basis: calc( #{$flex-basis} + #{$col-offset});
90+
}
91+
} @else if meta.type-of($col) == number and math.is-unitless($col) == false {
92+
$flex-grow: 0;
93+
$flex-shrink: 0;
94+
$flex-basis: $col;
95+
} @else if meta.type-of($col) == string and $col == 'auto' {
96+
// flex: auto;
97+
$flex-grow: 1;
98+
$flex-shrink: 1;
99+
$flex-basis: auto;
100+
} @else if meta.type-of($col) == string and $col == 'equal' {
101+
// flex: 1;
102+
$flex-grow: 1;
103+
$flex-shrink: 1;
104+
$flex-basis: 0;
105+
} @else if meta.type-of($col) == string and $col == 'none' {
106+
// flex: none;
107+
$flex-grow: 0;
108+
$flex-shrink: 0;
109+
$flex-basis: auto;
110+
} @else if meta.type-of($col) == string and $col == 'initial' {
111+
// flex: initial;
112+
$flex-grow: 0;
113+
$flex-shrink: 1;
114+
$flex-basis: auto;
115+
} @else if meta.type-of($col) == string and $col == 'positive' {
116+
// positive number
117+
@if $flex-grow == 0 {
118+
$flex-grow: 1;
119+
}
120+
$flex-shrink: 0;
121+
$flex-basis: 0;
122+
}
123+
124+
@if meta.type-of($shorthand) == bool and $shorthand == true {
125+
flex: $flex-grow $flex-shrink $flex-basis;
126+
} @else {
127+
flex-basis: $flex-basis;
128+
flex-grow: $flex-grow;
129+
flex-shrink: $flex-shrink;
130+
}
131+
132+
@if $align-self != null {
133+
align-self: $align-self;
134+
}
135+
136+
@if meta.type-of($order) == number {
137+
order: $order;
138+
}
139+
140+
@if meta.type-of($width) == bool and $width == true {
141+
width: $flex-basis;
142+
} @else if meta.type-of($width) == number and math.is-unitless($width) == false {
143+
width: $width;
144+
} @else if meta.type-of($width) == string and $width == 'auto' {
145+
width: auto;
146+
}
147+
148+
@if meta.type-of($max-width) == bool and $max-width == true {
149+
max-width: $flex-basis;
150+
} @else if meta.type-of($max-width) == number and math.is-unitless($max-width) == false {
151+
max-width: $max-width;
152+
} @else if meta.type-of($max-width) == string and $max-width == 'auto' {
153+
max-width: auto;
154+
}
155+
156+
@if meta.type-of($min-width) == bool and $min-width == true {
157+
min-width: $flex-basis;
158+
} @else if meta.type-of($min-width) == number and math.is-unitless($min-width) == false {
159+
min-width: $min-width;
160+
} @else if meta.type-of($min-width) == string and $min-width == 'auto' {
161+
min-width: auto;
162+
}
163+
164+
@if $height != null {
165+
height: $height;
166+
}
167+
@if $max-height != null {
168+
max-height: $max-height;
169+
}
170+
@if $min-height != null {
171+
min-height: $min-height;
172+
}
173+
174+
@if $gutter and math.is-unitless($gutter) == false {
175+
@if $flexbox-grid-mixins-grid-type == skeleton {
176+
margin-left: $gutter / 2;
177+
margin-right: $gutter / 2;
178+
} @else if $flexbox-grid-mixins-grid-type == margin-offset {
179+
@if meta.type-of($last-child) == bool and $last-child == true {
180+
margin-right: 0;
181+
} @else {
182+
margin-right: $gutter;
183+
}
184+
}
185+
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: $gutter / 2;
192+
margin-bottom: $gutter / 2;
193+
}
194+
}
195+
196+
@content;
197+
}

0 commit comments

Comments
 (0)