Skip to content

Commit a8112f7

Browse files
dariusrosendahldariusrosendahl
authored
Merge pull request #29 from CastleCSS/develop
2.4 release
2 parents f65cd5b + 803275f commit a8112f7

File tree

6 files changed

+165
-74
lines changed

6 files changed

+165
-74
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "castlecss-core",
3-
"version": "2.3.0",
3+
"version": "2.4.0",
44
"description": "CastleCSS a SCSS framework with modular building blocks for the web",
55
"main": "index.js",
66
"scripts": {

‎sass/base/utility.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,14 @@
4545
list-style: none;
4646
}
4747

48+
.equal-height {
49+
display: flex;
50+
51+
> * {
52+
flex: 1;
53+
}
54+
}
55+
4856
/* Text alignment per breakpoint */
4957
.ta-left { text-align: left; }
5058
.ta-right { text-align: right; }
@@ -94,6 +102,57 @@
94102
border-radius: $radius;
95103
}
96104

105+
/* Helper classes for color and background-color */
106+
.color-color01 {
107+
color: $color01;
108+
}
109+
.color-color02 {
110+
color: $color02;
111+
}
112+
.color-color03 {
113+
color: $color03;
114+
}
115+
.bgcolor-color01 {
116+
background-color: $color01;
117+
}
118+
.bgcolor-color02 {
119+
background-color: $color02;
120+
}
121+
.bgcolor-color03 {
122+
background-color: $color03;
123+
}
124+
125+
.color-theme01 {
126+
color: $theme01;
127+
}
128+
.color-theme02 {
129+
color: $theme02;
130+
}
131+
.color-theme03 {
132+
color: $theme03;
133+
}
134+
.color-theme04 {
135+
color: $theme04;
136+
}
137+
.color-theme05 {
138+
color: $theme05;
139+
}
140+
.bgcolor-theme01 {
141+
background-color: $theme01;
142+
}
143+
.bgcolor-theme02 {
144+
background-color: $theme02;
145+
}
146+
.bgcolor-theme03 {
147+
background-color: $theme03;
148+
}
149+
.bgcolor-theme04 {
150+
background-color: $theme04;
151+
}
152+
.bgcolor-theme05 {
153+
background-color: $theme05;
154+
}
155+
97156
/* Clearfix */
98157
.cf:before, .cf:after {content:"";display:table;}
99158
.cf:after, .g:after {clear:both;}

‎sass/base/utility_spacers.scss

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,54 @@
11
/* Padding */
22

33
.p { padding: $padding-default; }
4-
.pt { padding-top: $padding-default; }
5-
.pb { padding-bottom: $padding-default; }
6-
.pl { padding-left: $padding-default; }
7-
.pr { padding-right: $padding-default; }
8-
94
.p-2x { padding: $padding-default*2; }
10-
.pt-2x { padding-top: $padding-default*2; }
11-
.pb-2x { padding-bottom: $padding-default*2; }
12-
.pl-2x { padding-left: $padding-default*2; }
13-
.pr-2x { padding-right: $padding-default*2; }
14-
155
.p-3x { padding: $padding-default*3; }
16-
.pt-3x { padding-top: $padding-default*3; }
17-
.pb-3x { padding-bottom: $padding-default*3; }
18-
.pl-3x { padding-left: $padding-default*3; }
19-
.pr-3x { padding-right: $padding-default*3; }
20-
216
.p-0 { padding: 0; }
7+
8+
.pt { padding-top: $padding-default; }
9+
.pt-2x { padding-top: $padding-default*2; }
10+
.pt-3x { padding-top: $padding-default* 3; }
2211
.pt-0 { padding-top: 0; }
12+
13+
.pb { padding-bottom: $padding-default; }
14+
.pb-2x { padding-bottom: $padding-default*2; }
15+
.pb-3x { padding-bottom: $padding-default* 3; }
2316
.pb-0 { padding-bottom: 0; }
17+
18+
.pl { padding-left: $padding-default; }
19+
.pl-2x { padding-left: $padding-default*2; }
20+
.pl-3x { padding-left: $padding-default* 3; }
2421
.pl-0 { padding-left: 0; }
22+
23+
.pr { padding-right: $padding-default; }
24+
.pr-2x { padding-right: $padding-default*2; }
25+
.pr-3x { padding-right: $padding-default* 3; }
2526
.pr-0 { padding-right: 0; }
2627

2728
/* Margin */
2829
.m { margin: $margin-default; }
29-
.mt { margin-top: $margin-default; }
30-
.mb { margin-bottom: $margin-default; }
31-
.ml { margin-left: $margin-default; }
32-
.mr { margin-right: $margin-default; }
33-
3430
.m-2x { margin: $margin-default*2; }
35-
.mt-2x { margin-top: $margin-default*2; }
36-
.mb-2x { margin-bottom: $margin-default*2; }
37-
.ml-2x { margin-left: $margin-default*2; }
38-
.mr-2x { margin-right: $margin-default*2; }
39-
4031
.m-3x { margin: $margin-default*3; }
41-
.mt-3x { margin-top: $margin-default*3; }
42-
.mb-3x { margin-bottom: $margin-default*3; }
43-
.ml-3x { margin-left: $margin-default*3; }
44-
.mr-3x { margin-right: $margin-default*3; }
45-
4632
.m-0 { margin: 0; }
33+
34+
.mt { margin-top: $margin-default; }
35+
.mt-2x { margin-top: $margin-default*2; }
36+
.mt-3x { margin-top: $margin-default*3; }
4737
.mt-0 { margin-top: 0; }
38+
39+
.mb { margin-bottom: $margin-default; }
40+
.mb-2x { margin-bottom: $margin-default*2; }
41+
.mb-3x { margin-bottom: $margin-default*3; }
4842
.mb-0 { margin-bottom: 0; }
43+
44+
.ml { margin-left: $margin-default; }
45+
.ml-2x { margin-left: $margin-default*2; }
46+
.ml-3x { margin-left: $margin-default*3; }
4947
.ml-0 { margin-left: 0; }
48+
49+
.mr { margin-right: $margin-default; }
50+
.mr-2x { margin-right: $margin-default*2; }
51+
.mr-3x { margin-right: $margin-default*3; }
5052
.mr-0 { margin-right: 0; }
5153

5254
@for $b from 1 through $amount-breakpoints {
@@ -55,53 +57,55 @@
5557
@media only screen and (min-width: $breakpoint) {
5658

5759
/* Padding */
58-
.p-b#{$b} { padding: $padding-default; }
59-
.pt-b#{$b} { padding-top: $padding-default; }
60-
.pb-b#{$b} { padding-bottom: $padding-default; }
61-
.pl-b#{$b} { padding-left: $padding-default; }
62-
.pr-b#{$b} { padding-right: $padding-default; }
63-
60+
.p-b#{$b} { padding: $padding-default; }
6461
.p-b#{$b}-2x { padding: $padding-default*2; }
65-
.pt-b#{$b}-2x { padding-top: $padding-default*2; }
66-
.pb-b#{$b}-2x { padding-bottom: $padding-default*2; }
67-
.pl-b#{$b}-2x { padding-left: $padding-default*2; }
68-
.pr-b#{$b}-2x { padding-right: $padding-default*2; }
69-
70-
.p-b#{$b}-3x { padding: $padding-default*3; }
71-
.pt-b#{$b}-3x { padding-top: $padding-default*3; }
72-
.pb-b#{$b}-3x { padding-bottom: $padding-default*3; }
73-
.pl-b#{$b}-3x { padding-left: $padding-default*3; }
74-
.pr-b#{$b}-3x { padding-right: $padding-default*3; }
75-
62+
.p-b#{$b}-3x { padding: $padding-default*3; }
7663
.p-b#{$b}-0 { padding: 0; }
64+
65+
.pt-b#{$b} { padding-top: $padding-default; }
66+
.pt-b#{$b}-2x { padding-top: $padding-default*2; }
67+
.pt-b#{$b}-3x { padding-top: $padding-default*3; }
7768
.pt-b#{$b}-0 { padding-top: 0; }
69+
70+
.pb-b#{$b} { padding-bottom: $padding-default; }
71+
.pb-b#{$b}-2x { padding-bottom: $padding-default*2; }
72+
.pb-b#{$b}-3x { padding-bottom: $padding-default*3; }
7873
.pb-b#{$b}-0 { padding-bottom: 0; }
74+
75+
.pl-b#{$b} { padding-left: $padding-default; }
76+
.pl-b#{$b}-2x { padding-left: $padding-default*2; }
77+
.pl-b#{$b}-3x { padding-left: $padding-default*3; }
7978
.pl-b#{$b}-0 { padding-left: 0; }
79+
80+
.pr-b#{$b} { padding-right: $padding-default; }
81+
.pr-b#{$b}-2x { padding-right: $padding-default*2; }
82+
.pr-b#{$b}-3x { padding-right: $padding-default*3; }
8083
.pr-b#{$b}-0 { padding-right: 0; }
8184

8285
/* Margin */
83-
.m-b#{$b} { margin: $margin-default; }
84-
.mt-b#{$b} { margin-top: $margin-default; }
85-
.mb-b#{$b} { margin-bottom: $margin-default; }
86-
.ml-b#{$b} { margin-left: $margin-default; }
87-
.mr-b#{$b} { margin-right: $margin-default; }
88-
86+
.m-b#{$b} { margin: $margin-default; }
8987
.m-b#{$b}-2x { margin: $margin-default*2; }
90-
.mt-b#{$b}-2x { margin-top: $margin-default*2; }
91-
.mb-b#{$b}-2x { margin-bottom: $margin-default*2; }
92-
.ml-b#{$b}-2x { margin-left: $margin-default*2; }
93-
.mr-b#{$b}-2x { margin-right: $margin-default*2; }
94-
9588
.m-b#{$b}-3x { margin: $margin-default*3; }
96-
.mt-b#{$b}-3x { margin-top: $margin-default*3; }
97-
.mb-b#{$b}-3x { margin-bottom: $margin-default*3; }
98-
.ml-b#{$b}-3x { margin-left: $margin-default*3; }
99-
.mr-b#{$b}-3x { margin-right: $margin-default*3; }
100-
10189
.m-b#{$b}-0 { margin: 0; }
90+
91+
.mt-b#{$b} { margin-top: $margin-default; }
92+
.mt-b#{$b}-2x { margin-top: $margin-default*2; }
93+
.mt-b#{$b}-3x { margin-top: $margin-default*3; }
10294
.mt-b#{$b}-0 { margin-top: 0; }
95+
96+
.mb-b#{$b} { margin-bottom: $margin-default; }
97+
.mb-b#{$b}-2x { margin-bottom: $margin-default*2; }
98+
.mb-b#{$b}-3x { margin-bottom: $margin-default*3; }
10399
.mb-b#{$b}-0 { margin-bottom: 0; }
100+
101+
.ml-b#{$b} { margin-left: $margin-default; }
102+
.ml-b#{$b}-2x { margin-left: $margin-default*2; }
103+
.ml-b#{$b}-3x { margin-left: $margin-default*3; }
104104
.ml-b#{$b}-0 { margin-left: 0; }
105+
106+
.mr-b#{$b} { margin-right: $margin-default; }
107+
.mr-b#{$b}-2x { margin-right: $margin-default*2; }
108+
.mr-b#{$b}-3x { margin-right: $margin-default*3; }
105109
.mr-b#{$b}-0 { margin-right: 0; }
106110
}
107111
}

‎sass/layout/grid.scss

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
padding: 0; list-style: none;
1616
margin-left: -$grid-gutter;
1717

18+
19+
1820
/* You can turn off flexbox by setting $flexbox-grid: 0; in the variables; */
1921
@if $flexbox-grid == true {
2022
display: flex;
@@ -23,7 +25,7 @@
2325
}
2426

2527
/* Clearfix for older browsers without flexbox */
26-
&:before, &:after {
28+
&:before, &:after {
2729
content: " ";
2830
visibility: hidden;
2931
display: block;
@@ -32,10 +34,31 @@
3234
}
3335

3436
/* Reset grid to floating */
37+
&-float {
38+
display: block;
39+
}
40+
41+
/* Make children of grid items equal height */
42+
&-equal-height {
43+
44+
> * {
45+
display: flex;
46+
47+
> * {
48+
flex: 1;
49+
}
50+
}
51+
}
52+
/*
53+
DO NOT USE; Use g-float.
54+
Legacy class for reset grid to floating
55+
TODO: Remove in new major version
56+
*/
3557
&.grid-float {
3658
display: block;
3759
}
3860

61+
3962
&.dir-row { flex-direction: row; }
4063
&.dir-row-reverse { flex-direction: row-reverse; }
4164
&.dir-column { flex-direction: column; }

‎sass/variables.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ $b2: 480px;
4242
$b3: 768px;
4343
$b4: 1024px;
4444
$b5: 1280px;
45-
$b6: 1600px;
45+
$b6: 1680px;
4646

4747
/*
4848
Mapping for breakpoint loops
@@ -65,10 +65,10 @@ $amount-breakpoints: length($breakpoint-map);
6565
$container: 100%;
6666
$container-b1: 100%;
6767
$container-b2: 100%;
68-
$container-b3: 744px;
69-
$container-b4: 996px;
70-
$container-b5: 1224px;
71-
$container-b6: 1400px;
68+
$container-b3: 752px;
69+
$container-b4: 992px;
70+
$container-b5: 1208px;
71+
$container-b6: 1592px;
7272

7373
/*
7474
Container map
@@ -95,10 +95,10 @@ $flexbox-grid: true;
9595
$grid-gutter: 12px;
9696
$grid-gutter-b1: 12px;
9797
$grid-gutter-b2: 12px;
98-
$grid-gutter-b3: 12px;
99-
$grid-gutter-b4: 12px;
100-
$grid-gutter-b5: 12px;
101-
$grid-gutter-b6: 12px;
98+
$grid-gutter-b3: 16px;
99+
$grid-gutter-b4: 16px;
100+
$grid-gutter-b5: 16px;
101+
$grid-gutter-b6: 16px;
102102

103103
/*
104104
Default margin and padding

0 commit comments

Comments
 (0)