Skip to content

Commit 5aa03ee

Browse files
dariusrosendahldariusrosendahl
committed
Package.json + grid
Added the CastleCSS Grid Added a package.json to install CastleCSS with npm
1 parent bf3905e commit 5aa03ee

File tree

2 files changed

+347
-0
lines changed

2 files changed

+347
-0
lines changed

‎package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "castlecss-core",
3+
"version": "1.0.0",
4+
"description": "CastleCSS a SCSS framework with modular building blocks for the web",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/CastleCSS/castlecss-core.git"
12+
},
13+
"keywords": [
14+
"castlecss",
15+
"castle",
16+
"css",
17+
"scss",
18+
"framework",
19+
"building",
20+
"blocks",
21+
"modular"
22+
],
23+
"author": "Darius Rosendahl <darius@denieuwezaak.nl> (https://github.com/CastleCSS)",
24+
"license": "MIT",
25+
"bugs": {
26+
"url": "https://github.com/CastleCSS/castlecss-core/issues"
27+
},
28+
"homepage": "https://github.com/CastleCSS/castlecss-core#readme"
29+
}

‎sass/grid.scss‎

Lines changed: 318 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,318 @@
1+
/*
2+
* Flexbox grid
3+
* Fully Responsive
4+
* Based on understandable breakpoint variables
5+
* Doesn't use columns, but proportions
6+
* Fully fluid with fixed-width gutters
7+
* Fully nestable
8+
* Will fall back to floating for IE9 and below
9+
* Will not work in IE7 and below.
10+
*
11+
*/
12+
13+
$flexbox: true;
14+
$grid-gutter: 12px;
15+
$grid-gutter-b1: $grid-gutter;
16+
$grid-gutter-b2: $grid-gutter;
17+
$grid-gutter-b3: $grid-gutter;
18+
$grid-gutter-b4: $grid-gutter;
19+
$grid-gutter-b5: $grid-gutter;
20+
21+
/*========== Grid basis ==========*/
22+
23+
.g {
24+
/* You can turn off flexbox by setting $flex: 0; in the variables; */
25+
@if $flexbox == true {
26+
display: flex;
27+
flex-wrap: wrap;
28+
flex-direction: row;
29+
}
30+
padding: 0; list-style: none;
31+
margin-left: -$grid-gutter;
32+
33+
/* Clearfix for older browsers without flexbox */
34+
&:before, &:after {
35+
content:""; display:table;
36+
}
37+
38+
/* Reset grid to floating */
39+
&.grid-float {
40+
display: block;
41+
}
42+
43+
&.dir-row { flex-direction: row; }
44+
&.dir-row-reverse { flex-direction: row-reverse; }
45+
&.dir-column { flex-direction: column; }
46+
&.dir-column-reverse { flex-direction: column-reverse; }
47+
48+
/* Grid wrapping */
49+
&.wrap { flex-wrap: wrap; }
50+
&.nowrap { flex-wrap: nowrap; }
51+
52+
/* ===== Alignment ===== */
53+
54+
/* Justify content */
55+
&.jc-flex-start { justify-content: flex-start; }
56+
&.jc-flex-end { justify-content: flex-end; }
57+
&.jc-center { justify-content: center; }
58+
&.jc-space-around { justify-content: space-around; }
59+
&.jc-space-between { justify-content: space-between; }
60+
61+
/* Align items */
62+
&.ai-flex-start { align-items: flex-start; }
63+
&.ai-flex-end { align-items: flex-end; }
64+
&.ai-center { align-items: center; }
65+
&.ai-space-around { align-items: baseline; }
66+
&.ai-stretch { align-items: stretch; }
67+
68+
/* Align content */
69+
&.ac-flex-start { align-content: flex-start; }
70+
&.ac-flex-end { align-content: flex-end; }
71+
&.ac-center { align-content: center; }
72+
&.ac-space-around { align-content: space-around; }
73+
&.ac-space-between { align-content: space-between; }
74+
75+
/* ===== Grid Items =====
76+
* Every direct child within .g is a grid item
77+
* Used to be .gi, the new method is less susceptible to errors
78+
* Every grid item has the standard gutter spacing from $grid-gutter
79+
*/
80+
81+
> * {
82+
/* Floating as fallback for older browsers */
83+
float: left;
84+
padding-left: $grid-gutter;
85+
86+
&.as-flex-start { align-self: flex-start; }
87+
&.as-flex-end { align-self: flex-end; }
88+
&.as-stretch { align-self: stretch; }
89+
&.as-center { align-self: center; }
90+
&.as-baseline { align-self: baseline; }
91+
&.as-initial { align-self: initial; }
92+
&.as-inherit { align-self: inherit; }
93+
94+
/* Set order per grid item */
95+
@for $i from 0 through 12 {
96+
97+
&.order-#{ $i } {
98+
order: #{ $i };
99+
}
100+
}
101+
102+
}
103+
104+
/* Gutters */
105+
&.gutter-none {
106+
margin-left: 0;
107+
108+
* {
109+
padding-left: 0;
110+
}
111+
}
112+
113+
/* Smaller gutter */
114+
&.gutter-small {
115+
margin-left: -$grid-gutter / 2;
116+
117+
* {
118+
padding-left: $grid-gutter / 2;
119+
}
120+
}
121+
122+
/* Larger gutter */
123+
&.gutter-large {
124+
margin-left: -$grid-gutter * 2;
125+
126+
* {
127+
padding-left: $grid-gutter * 2;
128+
}
129+
}
130+
131+
/* Let grid items decide their size on their own without setting a width */
132+
&.auto {
133+
134+
> * {
135+
flex: 1 0 auto;
136+
}
137+
}
138+
139+
140+
}
141+
142+
/*========== Grid widths ==========*/
143+
144+
@for $i from 1 through 12 {
145+
$width: ($i/12) * 100%;
146+
147+
@if $i < 10 {
148+
.b0_0#{ $i } { width: $width; }
149+
150+
.b0_push_0#{ $i } { margin-left: $width; }
151+
} @else {
152+
153+
.b0_#{ $i } { width: $width; }
154+
155+
.b0_push_#{ $i } { margin-left: $width; }
156+
157+
}
158+
}
159+
@for $i from 13 through 24 {
160+
$width: ($i/12) * 100%;
161+
}
162+
163+
.b0_push_none { margin-left: 0; }
164+
.b0_hide { display: none; }
165+
.b0_show { display: block; }
166+
167+
/*========== /GRID WIDTHS ==========*/
168+
169+
/*========== BREAKPOINTS ==========*/
170+
171+
// $b1
172+
@media only screen and (min-width: $b1) {
173+
174+
@for $i from 1 through 12 {
175+
$width: ($i/12) * 100%;
176+
177+
@if $i < 10 {
178+
.b1_0#{ $i } { width: $width; }
179+
180+
.b1_push_0#{ $i } { margin-left: $width; }
181+
} @else {
182+
183+
.b1_#{ $i } { width: $width; }
184+
185+
.b1_push_#{ $i } { margin-left: $width; }
186+
}
187+
}
188+
@for $i from 13 through 24 {
189+
$width: ($i/12) * 100%;
190+
}
191+
192+
.b1_push_none { margin-left: 0; }
193+
194+
.b1_hide { display: none; }
195+
.b1_show {
196+
display: block;
197+
}
198+
}
199+
200+
201+
// $b2
202+
@media only screen and (min-width: $b2) {
203+
204+
@for $i from 1 through 12 {
205+
$width: ($i/12) * 100%;
206+
207+
@if $i < 10 {
208+
.b2_0#{ $i } { width: $width; }
209+
210+
.b2_push_0#{ $i } { margin-left: $width; }
211+
} @else {
212+
213+
.b2_#{ $i } { width: $width; }
214+
215+
.b2_push_#{ $i } { margin-left: $width; }
216+
}
217+
@for $i from 13 through 24 {
218+
$width: ($i/12) * 100%;
219+
}
220+
}
221+
222+
.b2_push_none { margin-left: 0; }
223+
224+
.b2_hide { display: none; }
225+
.b2_show {
226+
display: block;
227+
}
228+
}
229+
230+
// $b3
231+
@media only screen and (min-width: $b3) {
232+
233+
@for $i from 1 through 24 {
234+
$width: ($i/24) * 100%;
235+
236+
@if $i < 10 {
237+
.b3_0#{ $i } { width: $width; }
238+
239+
.b3_push_0#{ $i } { margin-left: $width; }
240+
} @else {
241+
.b3_#{ $i } { width: $width; }
242+
243+
.b3_push_#{ $i } { margin-left: $width; }
244+
}
245+
@for $i from 13 through 48 {
246+
$width: ($i/24) * 100%;
247+
}
248+
}
249+
250+
.b3_x5 { width: 20%; }
251+
.b3_x7 { width: 14.28571428571429%; }
252+
253+
.b3_push_none { margin-left: 0; }
254+
255+
.b3_hide { display: none; }
256+
.b3_show {
257+
display: block;
258+
}
259+
}
260+
261+
// $b4
262+
@media only screen and (min-width: $b4) {
263+
264+
@for $i from 1 through 24 {
265+
$width: ($i/24) * 100%;
266+
267+
@if $i < 10 {
268+
.b4_0#{ $i } { width: $width; }
269+
270+
.b4_push_0#{ $i } { margin-left: $width; }
271+
} @else {
272+
273+
.b4_#{ $i } { width: $width; }
274+
275+
.b4_push_#{ $i } { margin-left: $width; }
276+
}
277+
}
278+
279+
.b4_x5 { width: 20%; }
280+
.b4_x7 { width: 14.28571428571429%; }
281+
282+
.b4_push_none { margin-left: 0; }
283+
284+
.b4_hide { display: none; }
285+
.b4_show {
286+
display: block;
287+
}
288+
289+
}
290+
291+
// $b5
292+
@media only screen and (min-width: $b5) {
293+
294+
@for $i from 1 through 24 {
295+
$width: ($i/24) * 100%;
296+
297+
@if $i < 10 {
298+
.b5_0#{ $i } { width: $width; }
299+
300+
.b5_push_0#{ $i } { margin-left: $width; }
301+
} @else {
302+
303+
.b5_#{ $i } { width: $width; }
304+
305+
.b5_push_#{ $i } { margin-left: $width; }
306+
}
307+
}
308+
309+
.b5_x5 { width: 20%; }
310+
.b5_x7 { width: 14.28571428571429%; }
311+
312+
.b5_push_none { margin-left: 0; }
313+
314+
.b5_hide { display: none; }
315+
.b5_show {
316+
display: block;
317+
}
318+
}

0 commit comments

Comments
 (0)