Skip to content

Commit 3b97a58

Browse files
BrockensteinBrockenstein
committed
Version 1.0.0 Fixes math on flexed columns
Version 1.1.0 fixes math on grid columns Version 1.1.0 addes more classes to control alignment Documentation updated and examples provided
1 parent 328a8fb commit 3b97a58

12 files changed

+4335
-665
lines changed

‎.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"liveServer.settings.port": 5502,
3+
"liveSassCompile.settings.formats": [
4+
{
5+
"format": "expanded",
6+
"extensionName": ".css",
7+
"savePath": "~../css",
8+
"savePathReplacementPairs": null
9+
}
10+
]
11+
}

‎README.md‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,30 +15,29 @@ Note: This is not just a pre-compiled CSS library that you add to your project b
1515

1616
```
1717
18-
// Breakpoint mixin
18+
// Breakpoint mixin used with the Flexspan Grid System
1919
@mixin breakpoint($break) {
2020
@media screen and (min-width: $break) {
2121
@content;
2222
}
2323
}
24-
25-
// Default variables, easily overwritten
26-
$xxs: 360px !default;
27-
$xs: 480px !default;
28-
$s: 550px !default;
29-
$sm: 600px !default;
30-
$m: 768px!default;
31-
$ml: 960px !default;
32-
$l: 1024px !default;
33-
$xl: 1200px !default;
34-
$xxl: 1400px !default;
35-
24+
25+
// Breakpoints you may use across the site within mixins
26+
$xxs: 360px;
27+
$xs: 480px;
28+
$s: 550px;
29+
$sm: 600px;
30+
$m: 768px;
31+
$ml: 960px;
32+
$l: 1024px;
33+
$xl: 1200px;
34+
$xxl: 1400px;
3635
37-
// Breakpoints you plan on using for the grid system
36+
// Breakpoints you plan on using with the Flexspan Grid System
3837
$breakpointsUsedForGrid:
39-
"s" $s,
40-
"m" $m,
41-
"l" $l;
38+
"s" $s,
39+
"m" $m,
40+
"l" $l;
4241
4342
// CSS Variable
4443
// NOTE: You can not add SCSS variables to CSS variables, however you can use CSS variables in SCSS mixins
@@ -47,7 +46,7 @@ Note: This is not just a pre-compiled CSS library that you add to your project b
4746
--fs-spacing-row: 15px;
4847
}
4948
50-
// Importing the mixings for flexbox
49+
// Importing the mixings for the Flexspan Grid System
5150
@import "_flexspan-grid-mixins", "_flexspan-grid-classes";
5251
```
5352

‎dist/_flexspan-grid-classes.scss‎

Lines changed: 108 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,47 @@
1+
// "Flexspan Grid System" Classes
2+
// Version 1.1.0
3+
// Documentation on how to use the classes https://brockenstein.github.io/Flexspan-Grid-System/
4+
// ===================================================================
5+
16
.fs-container {
2-
@include flex(flex, row, wrap, space-between, start, start);
7+
@include flex-parent(flex, row, wrap, space-between, stretch, start);
38
}
49

510
.fs-row {
6-
@include flex(flex, row, nowrap, space-between, stretch, start);
11+
@include flex-parent(flex, row, nowrap, space-between, stretch, start);
712
}
813

914
.fs-row-gap {
1015
margin-bottom: var(--fs-spacing-row);
1116
}
1217

18+
.fs-nogap {
19+
--fs-spacing-col: 0px;
20+
--fs-spacing-row: 0px;
21+
}
22+
1323
// Iterations through all the sizes for Flexbox styles
1424

1525
.fs-auto {
16-
@include flex-col(auto,12,null,null,1,1,null)
26+
@include flex-item(auto,12,null,null,true,null,1,1)
1727
}
1828

1929
@for $i from 1 through 12 { //12 Colmun Grid
2030
@if $i == 12 {
2131
.fs-#{$i} {
22-
@include flex-col($i,12,null,null,0,0,100%)
32+
@include flex-item($i,12,null,null,true,null,0,0,100%)
2333
}
2434
}
2535
@else {
2636
.fs-#{$i} {
27-
@include flex-col($i,12,null,null,0,0,null)
37+
@include flex-item($i,12,null,null,true,null,0,0)
2838
}
2939
}
3040
}
3141

3242
@for $i from 1 through 12 { //12 Colmun Grid
3343
.fs-fluid .fs-#{$i} {
34-
@include flex-col($i,12,null,null,1,0,null)
44+
@include flex-item($i,12,null,null,true,null,1,0)
3545
}
3646
}
3747

@@ -45,6 +55,14 @@
4555
flex-direction: column-reverse;
4656
}
4757

58+
.fs-first-in-row {
59+
grid-row-start: 1;
60+
}
61+
62+
.fs-first-in-col {
63+
grid-column-start: 1;
64+
}
65+
4866
// Alignment Classes
4967

5068
.fs-top {
@@ -79,6 +97,22 @@
7997
align-self: flex-end;
8098
}
8199

100+
.fs-content-top {
101+
align-content: flex-start;
102+
}
103+
104+
.fs-content-middle {
105+
align-content: center;
106+
}
107+
108+
.fs-content-stretch {
109+
align-content: stretch;
110+
}
111+
112+
.fs-content-bottom {
113+
align-content: flex-end;
114+
}
115+
82116
.fs-around {
83117
justify-content: space-around;
84118
}
@@ -111,25 +145,43 @@
111145

112146
// Off Set styles
113147

114-
@for $i from 1 through 11 { // For 12 Colmun Grid, we can only offset 11 columns
115-
.fs-offset-#{$i} {
116-
@include flex-forced-offset($i,12)
117-
}
148+
@for $i from 0 through 11 { // For 12 Colmun Grid, we can only offset 11 columns
149+
.fs-offset-left-#{$i} {
150+
@include flex-item($i,12,$i,left,false)
151+
}
152+
.fs-offset-right-#{$i} {
153+
@include flex-item($i,12,$i,right,false)
154+
}
118155
}
119156

157+
// CSS Grid column count classes
120158
@for $i from 1 through 12 { //12 Colmun Grid
121159
.fs-col-count-#{$i} {
122160
display: grid;
123161
gap: var(--fs-spacing-row) var(--fs-spacing-col);
124162

125-
grid-template-columns: repeat(#{$i}, 1fr);
163+
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
164+
}
165+
.fs-col-span-#{$i} {
166+
grid-column: span #{$i};
167+
}
168+
}
169+
170+
// Width classes
171+
@for $i from 1 through 12 { //12 Colmun Grid
172+
.fs-exact-#{$i} {
173+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,true,true,true)
174+
}
175+
.fs-max-#{$i} {
176+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,false,true,false)
177+
}
178+
.fs-min-#{$i} {
179+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,false,false,true)
126180
}
127181
}
128182

129183

130184
// Styles For each breakpoint
131-
132-
$x: 1;
133185
@each $name, $breakpointSize, $size in $breakpointsUsedForGrid {
134186

135187
@include breakpoint($breakpointSize) {
@@ -138,26 +190,44 @@ $x: 1;
138190
@for $i from 1 through 12 { //12 Colmun Grid
139191
@if $i == 12 {
140192
.fs-#{$name}-#{$i} {
141-
@include flex-col($i,12,null,null,0,0,100%)
193+
@include flex-item($i,12,null,null,true,null,0,0,100%)
142194
}
143195
}
144196
@else {
145197
.fs-#{$name}-#{$i} {
146-
@include flex-col($i,12,null,null,0,0,null)
198+
@include flex-item($i,12,null,null,true,null,0,0)
147199
}
148200
}
149201
}
150202

151203
@for $i from 1 through 12 {
152204
.fs-fluid .fs-#{$name}-#{$i} {
153-
@include flex-col($i,12,null,null,1,1)
205+
@include flex-item($i,12,null,null,true,null,1,1)
154206
}
155207
}
156208

157209
.fs-#{$name}-auto {
158-
@include flex-col(auto,12,null,null,1,1,null)
210+
@include flex-item(auto,12,null,null,true,null,1,1)
159211
}
160212

213+
// Width classes
214+
@for $i from 1 through 12 { //12 Colmun Grid
215+
.fs-exact-#{$name}-#{$i} {
216+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,true,true,true)
217+
}
218+
.fs-max-#{$name}-#{$i} {
219+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,false,true,false)
220+
}
221+
.fs-min-#{$name}-#{$i} {
222+
@include flex-item($i,12,null,null,false,null,null,null,null,null,null,false,false,true)
223+
}
224+
}
225+
226+
// No gap in all the breakpoints
227+
.fs-#{$name}-nogap {
228+
--fs-spacing-col: 0px;
229+
--fs-spacing-row: 0px;
230+
}
161231

162232
// Iterations through all the breakpoint sizes for reverse styles
163233

@@ -169,6 +239,14 @@ $x: 1;
169239
flex-direction: column-reverse;
170240
}
171241

242+
.fs-#{$name}-first-in-row {
243+
grid-row-start: 1;
244+
}
245+
246+
.fs-#{$name}-first-in-col {
247+
grid-column-start: 1;
248+
}
249+
172250
// Iterations through all the breakpoint sizes for Alignment Classes
173251

174252
.fs-#{$name}-top {
@@ -227,7 +305,6 @@ $x: 1;
227305
justify-content: flex-end;
228306
}
229307

230-
231308
// Flex Growth Classes
232309

233310
.fs-container .fs-#{$name}-no-grow {
@@ -236,26 +313,33 @@ $x: 1;
236313

237314
// Off Set styles
238315

239-
@for $i from 1 through 11 { // For 12 Colmun Grid, we can only offset 11 columns
240-
.fs-offset-#{$name}-#{$i} {
241-
@include flex-forced-offset($i,12)
316+
@for $i from 0 through 11 { // For 12 Colmun Grid, we can only offset 11 columns
317+
.fs-offset-left-#{$name}-#{$i} {
318+
@include flex-item($i,12,$i,left,false)
319+
}
320+
.fs-offset-right-#{$name}-#{$i} {
321+
@include flex-item($i,12,$i,right,false)
322+
242323
}
243324
}
244325

245-
// Grid Solution
326+
// CSS Grid column count classes
246327

247328
@for $i from 1 through 12 { //12 Colmun Grid
248329
.fs-col-count-#{$name}-#{$i} {
249-
grid-template-columns: repeat(#{$i}, 1fr);
330+
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
250331
&.fs-forced-container {
251332
display: grid;
252333
gap: var(--fs-spacing-row) var(--fs-spacing-col);
253334
}
254335
}
336+
337+
.fs-col-span-#{$name}-#{$i} {
338+
grid-column: span #{$i};
339+
}
255340
}
256341

257342

258343
}
259-
$x: $x + 1;
260344

261345
}

0 commit comments

Comments
 (0)