Skip to content
This repository was archived by the owner on Jul 14, 2023. It is now read-only.

Commit 33c76b9

Browse files
wardpenneywhmii
wardpenney
authored and
whmii
committed
Create container for floated grid
* Add to contrib
1 parent 821160f commit 33c76b9

10 files changed

+127
-223
lines changed

‎contrib/base/_grids.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$grid--nested: (
2+
columns: 3,
3+
gutter: 0,
4+
);

‎contrib/base/_variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$color-neat-blue: #53aee0;
2+
$color-neat-orange: #ff7c56;
3+
$color-white: #fff;

‎contrib/index.html

+46-223
Original file line numberDiff line numberDiff line change
@@ -1,225 +1,48 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
7-
<title>Have fun ❤︎</title>
8-
<link rel="stylesheet" href="styles.css">
9-
</head>
10-
<body>
11-
<header class="welcome-message" role="banner">
12-
<div class="container">
13-
<h1 class="welcome-message-title">
14-
Hey there! Thanks for contributing to
15-
<a href="http://neat.bourbon.io">Neat</a>.
16-
</h1>
17-
<p>
18-
The purpose of this page is to help contributors view and test
19-
changes to Neat.
20-
</p>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<title>Have fun ❤︎</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<header role="banner">
12+
<h1>
13+
Hey there! Thanks for contributing to
14+
<a href="http://neat.bourbon.io">Neat</a>.
15+
</h1>
16+
<p>
17+
The purpose of this page is to help contributors view and test
18+
changes to Neat.
19+
</p>
20+
</header>
21+
<main role="main">
22+
<div class="grid">
23+
<div class="grid__column--full">
24+
<h3>Basic Floated Grid</h3>
2125
</div>
22-
</header>
23-
<main role="main">
24-
<h3>Basic</h3>
25-
<section class="page-section zero">
26-
<code>@include outer-container;</code>
27-
<div class="page-section-inner zero-alpha">
28-
<code>@include span-columns(6);</code>
29-
</div>
30-
<div class="page-section-inner zero-beta">
31-
<code>@include span-columns(6);</code>
32-
</div>
33-
</section>
34-
<h3>Multiple rows</h3>
35-
<section class="page-section first">
36-
<code>@include outer-container;</code>
37-
<div class="page-section-inner first-alpha">
38-
<code>(1)</code>
39-
</div>
40-
<div class="page-section-inner first-beta">
41-
<code>
42-
@include span-columns(11);<br>
43-
@include omega();
44-
</code>
45-
</div>
46-
<div class="page-section-inner first-gamma">
47-
<code>
48-
@include span-columns(2);
49-
</code>
50-
</div>
51-
<div class="page-section-inner first-delta">
52-
<code>
53-
@include span-columns(10);<br>
54-
@include omega();
55-
</code>
56-
</div>
57-
<div class="page-section-inner first-epsilon">
58-
<code>
59-
@include span-columns(3);
60-
</code>
61-
</div>
62-
<div class="page-section-inner first-zeta">
63-
<code>
64-
@include span-columns(9);<br>
65-
@include omega();
66-
</code>
67-
</div>
68-
<div class="page-section-inner first-eta">
69-
<code>
70-
@include span-columns(4);
71-
</code>
72-
</div>
73-
<div class="page-section-inner first-theta">
74-
<code>
75-
@include span-columns(8);<br>
76-
@include omega();
77-
</code>
78-
</div>
79-
<div class="page-section-inner first-iota">
80-
<code>
81-
@include span-columns(5);
82-
</code>
83-
</div>
84-
<div class="page-section-inner first-kappa">
85-
<code>
86-
@include span-columns(7);<br>
87-
@include omega();
88-
</code>
89-
</div>
90-
<div class="page-section-inner first-lambda">
91-
<code>
92-
@include span-columns(6);
93-
</code>
94-
</div>
95-
<div class="page-section-inner first-mu">
96-
<code>
97-
@include span-columns(6);<br>
98-
@include omega();
99-
</code>
100-
</div>
101-
</section>
102-
<h3>Nesting columns</h3>
103-
<section class="page-section second">
104-
<code>@include outer-container;</code>
105-
<div class="page-section-inner second-alpha">
106-
<code>@include span-columns(4);</code>
107-
</div>
108-
<div class="page-section-inner second-beta">
109-
<code class="block">@include span-columns(8);</code>
110-
<aside class="second-beta-alpha">
111-
<code>@include span-columns(4 of 8);</code>
112-
</aside>
113-
<article class="second-beta-beta">
114-
<code>@include span-columns(4 of 8);</code>
115-
</article>
116-
</div>
117-
</section>
118-
<h3>Table grid</h3>
119-
<section class="page-section third">
120-
<code>@include outer-container;</code>
121-
<div class="page-section-inner third-dummy">
122-
<code>
123-
@include fill-parent();<br>
124-
@include row(table);
125-
</code>
126-
</div>
127-
<div class="page-section-inner third-alpha">
128-
<aside class="third-alpha-alpha">
129-
<code>
130-
@include span-columns(4);<br>
131-
@include pad();
132-
</code>
133-
</aside>
134-
<article class="third-alpha-beta">
135-
<code>
136-
@include span-columns(8);<br>
137-
@include reset-display;
138-
</code>
139-
</article>
140-
</div>
141-
</section>
142-
<h3>Shifting columns</h3>
143-
<section class="page-section fourth">
144-
<code>@include outer-container;</code>
145-
<div class="page-section-inner fourth-alpha">
146-
<code>
147-
@include span-columns(6);<br>
148-
@include shift(3);
149-
</code>
150-
</div>
151-
</section>
152-
<h3>Automatic rows</h3>
153-
<div class="code">
154-
<code>@include outer-container;</code>
26+
<div class="grid__column box"></div>
27+
<div class="grid__column box"></div>
28+
<div class="grid__column box"></div>
29+
<div class="grid__column box"></div>
30+
<div class="grid__column box"></div>
31+
<div class="grid__column box"></div>
32+
<div class="grid__column box"></div>
33+
<div class="grid__column box"></div>
34+
<div class="grid__column box"></div>
35+
<div class="grid__column box"></div>
36+
<div class="grid__column box"></div>
37+
<div class="grid__column box"></div>
38+
<div class="grid__column--thirds grid--nested">
39+
<div class="grid--nested__column box--alt"></div>
40+
<div class="grid--nested__column box--alt"></div>
41+
<div class="grid--nested__column box--alt"></div>
15542
</div>
156-
<section class="page-section fifth">
157-
<div class="box">
158-
<pre>
159-
.box {
160-
@include span-columns(3);
161-
@include omega(4n);
162-
}
163-
</pre>
164-
</div>
165-
<div class="fifth-box page-section-inner">
166-
<code>.box</code>
167-
</div>
168-
<div class="fifth-box page-section-inner">
169-
<code>.box</code>
170-
</div>
171-
<div class="fifth-box page-section-inner">
172-
<code>.box</code>
173-
</div>
174-
<div class="fifth-box page-section-inner">
175-
<code>.box</code>
176-
</div>
177-
<div class="fifth-box page-section-inner">
178-
<code>.box</code>
179-
</div>
180-
<div class="fifth-box page-section-inner">
181-
<code>.box</code>
182-
</div>
183-
<div class="fifth-box page-section-inner">
184-
<code>.box</code>
185-
</div>
186-
<div class="fifth-box page-section-inner">
187-
<code>.box</code>
188-
</div>
189-
<div class="fifth-box page-section-inner">
190-
<code>.box</code>
191-
</div>
192-
<div class="fifth-box page-section-inner">
193-
<code>.box</code>
194-
</div>
195-
<div class="fifth-box page-section-inner">
196-
<code>.box</code>
197-
</div>
198-
</section>
199-
<h3>Media Queries</h3>
200-
<section class="page-section sixth">
201-
<pre>
202-
@include outer-container;
203-
$mobile: new-breakpoint(max-width 500px 4);
204-
</pre>
205-
<div class="page-section-inner sixth-alpha">
206-
<pre>
207-
@include span-columns(4);
208-
209-
@include media($mobile) {
210-
@include span-columns(3);
211-
}
212-
</pre>
213-
</div>
214-
<div class="page-section-inner sixth-beta">
215-
<pre>
216-
@include span-columns(8);
217-
@include media($mobile) {
218-
@include span-columns(3);
219-
}
220-
</pre>
221-
</div>
222-
</section>
223-
</main>
224-
</body>
225-
</html>
43+
<div class="grid__column--thirds box"></div>
44+
<div class="grid__column--thirds box"></div>
45+
</div>
46+
</main>
47+
</body>
48+
</html>

‎contrib/patterns/_box.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.box {
2+
background-color: $color-neat-blue;
3+
height: 30px;
4+
margin-bottom: 10px;
5+
}
6+
7+
.box--alt {
8+
@extend .box;
9+
border: 2px solid $color-neat-orange;
10+
}

‎contrib/patterns/_global.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}

‎contrib/patterns/_grid-nested.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.grid--nested {
2+
@include grid-container($grid--nested);
3+
}
4+
5+
.grid--nested__column {
6+
@include grid-column(1, $grid--nested);
7+
}

‎contrib/patterns/_grid.scss

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.grid {
2+
@include grid-container;
3+
}
4+
5+
.grid__column {
6+
@include grid-column;
7+
}
8+
9+
.grid__column--thirds {
10+
@include grid-column(4);
11+
}
12+
13+
.grid__column--full {
14+
@include grid-column(12);
15+
}

‎contrib/styles.scss

+8
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
11
@import "../core/neat";
2+
3+
@import "base/grids";
4+
@import "base/variables";
5+
6+
@import "patterns/box";
7+
@import "patterns/global";
8+
@import "patterns/grid";
9+
@import "patterns/grid-nested";

‎core/_neat.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@
77
@import "neat/settings/settings";
88

99
@import "neat/mixins/grid-column";
10+
@import "neat/mixins/grid-container";

‎core/neat/mixins/_grid-container.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@charset "UTF-8";
2+
/// Creates Neat grid container with clearfix.
3+
///
4+
/// @argument {map} $grid [$neat-default-grid]
5+
/// The type of grid for this column. By default, the global
6+
/// `$neat-default-grid` will be used.
7+
///
8+
/// @example scss
9+
/// .element {
10+
/// @include grid-container;
11+
/// }
12+
///
13+
/// @example css
14+
/// .element {
15+
/// &::after {
16+
/// clear: both;
17+
/// content: "";
18+
/// display: block;
19+
/// }
20+
/// }
21+
22+
@mixin grid-container($grid: $neat-default-grid) {
23+
&::after {
24+
clear: both;
25+
content: "";
26+
display: block;
27+
}
28+
}

0 commit comments

Comments
 (0)