Skip to content

Commit 7fbca5a

Browse files
author
Ivan Demidov
committed
update core
1 parent 18ddabe commit 7fbca5a

4 files changed

Lines changed: 40 additions & 127 deletions

File tree

‎app/pcss/_core.pcss‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22
[class*="sl-row"] {
33
box-sizing: border-box;
44
}
5-
5+
[class*="sl-container-row"],
6+
[class*="sl-container-col"] {
7+
@mixin clearfix;
8+
}
69

710
[class*="sl-container-row"] {
811
margin-top: calc(var(--grid-gutter) / 2);
912
margin-bottom: calc(var(--grid-gutter) / 2);
10-
11-
&:after,
12-
&:before {
13-
content: "";
14-
display: table;
15-
}
16-
&:after {
17-
clear: both;
18-
}
1913
}
2014

2115
[class*="sl-row"] {
@@ -27,15 +21,6 @@
2721
[class*="sl-container-col"] {
2822
margin-left: calc(var(--grid-gutter) / 2);
2923
margin-right: calc(var(--grid-gutter) / 2);
30-
31-
&:after,
32-
&:before {
33-
content: "";
34-
display: table;
35-
}
36-
&:after {
37-
clear: both;
38-
}
3924
}
4025

4126
[class*="sl-col"] {
@@ -50,9 +35,3 @@
5035
width: calc( ($i * 100%)/ var(--grid-col-count));
5136
}
5237
}
53-
54-
@for $i from 1 to var(--grid-row-count) {
55-
.sl-col-$i {
56-
width: calc( ($i * 100%)/ var(--grid-col-count));
57-
}
58-
}

‎app/pcss/_mixin.pcss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@define-mixin clearfix {
2+
&:after, &:before {
3+
content: "";
4+
display: table;
5+
}
6+
&:after {
7+
clear: both;
8+
}
9+
}

‎app/pcss/slim-grid.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import "_variable.pcss";
2+
@import "_mixin.pcss";
23
@import "_core.pcss";

‎dist/css/slim-grid.css‎

Lines changed: 26 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,78 @@
11
/**
22
* Copyright (c) 2015 GitScrum
33
* slim-grid - Vanilla CSS grid with support columns and rows
4-
* @version 0.0.0
4+
* @version 0.1.0
55
* @link https://github.com/GitScrum/slim-grid
66
* @license MIT
77
**/
8-
:root {
9-
--grid-gutter: 20px;
10-
--grid-col-count: 12;
11-
--grid-row-count: 13;
12-
--grid-row-height: 20px;
13-
}
148
[class*="sl-col"],
159
[class*="sl-row"] {
1610
box-sizing: border-box;
1711
}
18-
19-
20-
[class*="sl-container-row"] {
21-
margin-top: calc(var(--grid-gutter) / 2);
22-
margin-bottom: calc(var(--grid-gutter) / 2);
23-
}
24-
25-
26-
[class*="sl-container-row"]:after,
27-
[class*="sl-container-row"]:before {
12+
[class*="sl-container-row"]:after, [class*="sl-container-row"]:before, [class*="sl-container-col"]:after, [class*="sl-container-col"]:before {
2813
content: "";
2914
display: table;
3015
}
31-
32-
33-
[class*="sl-container-row"]:after {
16+
[class*="sl-container-row"]:after, [class*="sl-container-col"]:after {
3417
clear: both;
3518
}
3619

37-
[class*="sl-row"] {
38-
padding-top: calc(var(--grid-gutter) / 2);
39-
padding-bottom: calc(var(--grid-gutter) / 2);
40-
}
41-
42-
43-
[class*="sl-container-col"] {
44-
margin-left: calc(var(--grid-gutter) / 2);
45-
margin-right: calc(var(--grid-gutter) / 2);
20+
[class*="sl-container-row"] {
21+
margin-top: 10px;
22+
margin-bottom: 10px;
4623
}
4724

48-
49-
[class*="sl-container-col"]:after,
50-
[class*="sl-container-col"]:before {
51-
content: "";
52-
display: table;
25+
[class*="sl-row"] {
26+
padding-top: 10px;
27+
padding-bottom: 10px;
5328
}
5429

5530

56-
[class*="sl-container-col"]:after {
57-
clear: both;
31+
[class*="sl-container-col"] {
32+
margin-left: 10px;
33+
margin-right: 10px;
5834
}
5935

6036
[class*="sl-col"] {
6137
float: left;
62-
padding-left: calc(var(--grid-gutter) / 2);
63-
padding-right: calc(var(--grid-gutter) / 2);
38+
padding-left: 10px;
39+
padding-right: 10px;
6440
}
6541

6642
/* col grid */
6743
.sl-col-1 {
68-
width: calc( 1/ var(--grid-col-count));
44+
width: 8.33%;
6945
}
7046
.sl-col-2 {
71-
width: calc( 2/ var(--grid-col-count));
47+
width: 16.67%;
7248
}
7349
.sl-col-3 {
74-
width: calc( 3/ var(--grid-col-count));
50+
width: 25%;
7551
}
7652
.sl-col-4 {
77-
width: calc( 4/ var(--grid-col-count));
53+
width: 33.33%;
7854
}
7955
.sl-col-5 {
80-
width: calc( 5/ var(--grid-col-count));
56+
width: 41.67%;
8157
}
8258
.sl-col-6 {
83-
width: calc( 6/ var(--grid-col-count));
59+
width: 50%;
8460
}
8561
.sl-col-7 {
86-
width: calc( 7/ var(--grid-col-count));
62+
width: 58.33%;
8763
}
8864
.sl-col-8 {
89-
width: calc( 8/ var(--grid-col-count));
65+
width: 66.67%;
9066
}
9167
.sl-col-9 {
92-
width: calc( 9/ var(--grid-col-count));
68+
width: 75%;
9369
}
9470
.sl-col-10 {
95-
width: calc( 10/ var(--grid-col-count));
71+
width: 83.33%;
9672
}
9773
.sl-col-11 {
98-
width: calc( 11/ var(--grid-col-count));
74+
width: 91.67%;
9975
}
10076
.sl-col-12 {
101-
width: calc( 12/ var(--grid-col-count));
102-
}
103-
104-
.sl-col-1 {
105-
width: calc( 1/ var(--grid-col-count));
106-
}
107-
108-
.sl-col-2 {
109-
width: calc( 2/ var(--grid-col-count));
110-
}
111-
112-
.sl-col-3 {
113-
width: calc( 3/ var(--grid-col-count));
114-
}
115-
116-
.sl-col-4 {
117-
width: calc( 4/ var(--grid-col-count));
118-
}
119-
120-
.sl-col-5 {
121-
width: calc( 5/ var(--grid-col-count));
122-
}
123-
124-
.sl-col-6 {
125-
width: calc( 6/ var(--grid-col-count));
126-
}
127-
128-
.sl-col-7 {
129-
width: calc( 7/ var(--grid-col-count));
130-
}
131-
132-
.sl-col-8 {
133-
width: calc( 8/ var(--grid-col-count));
134-
}
135-
136-
.sl-col-9 {
137-
width: calc( 9/ var(--grid-col-count));
138-
}
139-
140-
.sl-col-10 {
141-
width: calc( 10/ var(--grid-col-count));
142-
}
143-
144-
.sl-col-11 {
145-
width: calc( 11/ var(--grid-col-count));
146-
}
147-
148-
.sl-col-12 {
149-
width: calc( 12/ var(--grid-col-count));
150-
}
151-
152-
.sl-col-13 {
153-
width: calc( 13/ var(--grid-col-count));
77+
width: 100%;
15478
}

0 commit comments

Comments
 (0)