This repository has been archived by the owner on Jul 14, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 428
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Adds a wrapping element for a grid * Demonstrate contrib example in rough fashion
- Loading branch information
1 parent
5cae999
commit e7005de
Showing
6 changed files
with
125 additions
and
229 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,225 +1,48 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
<meta name="viewport" content="width=device-width,initial-scale=1"> | ||
<title>Have fun ❤︎</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<header class="welcome-message" role="banner"> | ||
<div class="container"> | ||
<h1 class="welcome-message-title"> | ||
Hey there! Thanks for contributing to | ||
<a href="http://neat.bourbon.io">Neat</a>. | ||
</h1> | ||
<p> | ||
The purpose of this page is to help contributors view and test | ||
changes to Neat. | ||
</p> | ||
</div> | ||
</header> | ||
<main role="main"> | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
<meta name="viewport" content="width=device-width,initial-scale=1"> | ||
<title>Have fun ❤︎</title> | ||
<link rel="stylesheet" href="styles.css"> | ||
</head> | ||
<body> | ||
<header class="welcome-message" role="banner"> | ||
<div class="container"> | ||
<h1 class="welcome-message-title"> | ||
Hey there! Thanks for contributing to | ||
<a href="http://neat.bourbon.io">Neat</a>. | ||
</h1> | ||
<p> | ||
The purpose of this page is to help contributors view and test | ||
changes to Neat. | ||
</p> | ||
</div> | ||
</header> | ||
<main role="main" class="examples"> | ||
<div class="column--full"> | ||
<h3>Basic</h3> | ||
<section class="page-section zero"> | ||
<code>@include outer-container;</code> | ||
<div class="page-section-inner zero-alpha"> | ||
<code>@include span-columns(6);</code> | ||
</div> | ||
<div class="page-section-inner zero-beta"> | ||
<code>@include span-columns(6);</code> | ||
</div> | ||
</section> | ||
<h3>Multiple rows</h3> | ||
<section class="page-section first"> | ||
<code>@include outer-container;</code> | ||
<div class="page-section-inner first-alpha"> | ||
<code>(1)</code> | ||
</div> | ||
<div class="page-section-inner first-beta"> | ||
<code> | ||
@include span-columns(11);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-gamma"> | ||
<code> | ||
@include span-columns(2); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-delta"> | ||
<code> | ||
@include span-columns(10);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-epsilon"> | ||
<code> | ||
@include span-columns(3); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-zeta"> | ||
<code> | ||
@include span-columns(9);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-eta"> | ||
<code> | ||
@include span-columns(4); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-theta"> | ||
<code> | ||
@include span-columns(8);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-iota"> | ||
<code> | ||
@include span-columns(5); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-kappa"> | ||
<code> | ||
@include span-columns(7);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-lambda"> | ||
<code> | ||
@include span-columns(6); | ||
</code> | ||
</div> | ||
<div class="page-section-inner first-mu"> | ||
<code> | ||
@include span-columns(6);<br> | ||
@include omega(); | ||
</code> | ||
</div> | ||
</section> | ||
<h3>Nesting columns</h3> | ||
<section class="page-section second"> | ||
<code>@include outer-container;</code> | ||
<div class="page-section-inner second-alpha"> | ||
<code>@include span-columns(4);</code> | ||
</div> | ||
<div class="page-section-inner second-beta"> | ||
<code class="block">@include span-columns(8);</code> | ||
<aside class="second-beta-alpha"> | ||
<code>@include span-columns(4 of 8);</code> | ||
</aside> | ||
<article class="second-beta-beta"> | ||
<code>@include span-columns(4 of 8);</code> | ||
</article> | ||
</div> | ||
</section> | ||
<h3>Table grid</h3> | ||
<section class="page-section third"> | ||
<code>@include outer-container;</code> | ||
<div class="page-section-inner third-dummy"> | ||
<code> | ||
@include fill-parent();<br> | ||
@include row(table); | ||
</code> | ||
</div> | ||
<div class="page-section-inner third-alpha"> | ||
<aside class="third-alpha-alpha"> | ||
<code> | ||
@include span-columns(4);<br> | ||
@include pad(); | ||
</code> | ||
</aside> | ||
<article class="third-alpha-beta"> | ||
<code> | ||
@include span-columns(8);<br> | ||
@include reset-display; | ||
</code> | ||
</article> | ||
</div> | ||
</section> | ||
<h3>Shifting columns</h3> | ||
<section class="page-section fourth"> | ||
<code>@include outer-container;</code> | ||
<div class="page-section-inner fourth-alpha"> | ||
<code> | ||
@include span-columns(6);<br> | ||
@include shift(3); | ||
</code> | ||
</div> | ||
</section> | ||
<h3>Automatic rows</h3> | ||
<div class="code"> | ||
<code>@include outer-container;</code> | ||
</div> | ||
<section class="page-section fifth"> | ||
<div class="box"> | ||
<pre> | ||
.box { | ||
@include span-columns(3); | ||
@include omega(4n); | ||
} | ||
</pre> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
<div class="fifth-box page-section-inner"> | ||
<code>.box</code> | ||
</div> | ||
</section> | ||
<h3>Media Queries</h3> | ||
<section class="page-section sixth"> | ||
<pre> | ||
@include outer-container; | ||
$mobile: new-breakpoint(max-width 500px 4); | ||
</pre> | ||
<div class="page-section-inner sixth-alpha"> | ||
<pre> | ||
@include span-columns(4); | ||
|
||
@include media($mobile) { | ||
@include span-columns(3); | ||
} | ||
</pre> | ||
</div> | ||
<div class="page-section-inner sixth-beta"> | ||
<pre> | ||
@include span-columns(8); | ||
@include media($mobile) { | ||
@include span-columns(3); | ||
} | ||
</pre> | ||
</div> | ||
</section> | ||
</main> | ||
</body> | ||
</html> | ||
</div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column"></div> | ||
<div class="box column--thirds"> | ||
<div class="box--nested column--thirds--alt"></div> | ||
<div class="box--nested column--thirds--alt"></div> | ||
<div class="box--nested column--thirds--alt"></div> | ||
</div> | ||
<div class="box column--thirds"> | ||
</div><div class="box column--thirds"></div> | ||
</main> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,49 @@ | ||
@import "../core/neat"; | ||
|
||
$color-neat-blue: #53aee0; | ||
$color-neat-orange: #ff7c56; | ||
$color-white: #fff; | ||
|
||
*, | ||
*::before, | ||
*::after { | ||
box-sizing: border-box; | ||
} | ||
|
||
.box { | ||
background-color: $color-neat-blue; | ||
height: 30px; | ||
margin-bottom: 10px; | ||
} | ||
|
||
.box--nested { | ||
@extend .box; | ||
border: 2px solid $color-neat-orange; | ||
} | ||
|
||
.examples { | ||
@include grid-container; | ||
} | ||
|
||
.column { | ||
@include grid-column; | ||
} | ||
|
||
.column--thirds { | ||
@include grid-column(4); | ||
} | ||
|
||
$nested-grid: ( | ||
columns: 3, | ||
gutter: 0, | ||
); | ||
|
||
.column--thirds--alt { | ||
@include grid-column(1, $nested-grid); | ||
} | ||
|
||
.column--full { | ||
@include grid-column(12); | ||
background-color: $color-neat-blue; | ||
margin-bottom: 10px; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,3 +7,4 @@ | |
@import "neat/settings/settings"; | ||
|
||
@import "neat/mixins/grid-column"; | ||
@import "neat/mixins/grid-container"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
@charset "UTF-8"; | ||
/// Creates Neat grid container with clearfix. | ||
/// | ||
/// @argument {map} $grid [$neat-default-grid] | ||
/// The type of grid for this column. By default, the global | ||
/// `$neat-default-grid` will be used. | ||
/// | ||
/// @example scss | ||
/// .element { | ||
/// @include grid-container; | ||
/// } | ||
/// | ||
/// @example css | ||
/// .element { | ||
/// &::after { | ||
/// clear: both; | ||
/// content: ""; | ||
/// display: block; | ||
/// } | ||
/// } | ||
@mixin grid-container($grid: $neat-default-grid) { | ||
&::after { | ||
clear: both; | ||
content: ""; | ||
display: block; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters