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

Commit

Permalink
Add grid container
Browse files Browse the repository at this point in the history 
* Adds a wrapping element for a grid
* Demonstrate contrib example in rough fashion
  • Loading branch information
@wardpenney
wardpenney authored and Ward Penney committed Mar 1, 2016
1 parent 5cae999 commit e7005de
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 229 deletions.
271 changes: 47 additions & 224 deletions contrib/index.html
View file
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>
48 changes: 48 additions & 0 deletions contrib/styles.scss
View file
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;
}
1 change: 1 addition & 0 deletions core/_neat.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
@import "neat/settings/settings";

@import "neat/mixins/grid-column";
@import "neat/mixins/grid-container";
28 changes: 28 additions & 0 deletions core/neat/mixins/_grid-container.scss
View file
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;
}
}
2 changes: 1 addition & 1 deletion core/neat/settings/_settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
/// @property {number (unitless)} columns 12
/// Number of grid columns
///
/// @property {number (with unit)} gutter 40px
/// @property {number (with unit)} gutter [20px]
/// Grid gutter width.
///
/// @access private
Expand Down
4 changes: 0 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@
"test": "echo \"No test specified\"",
"contrib": "gulp"
},
"dependencies": {
"bourbon": "^4.2",
"node-sass": "^3.4"
},
"devDependencies": {
"gulp": "^3.9",
"gulp-autoprefixer": "^3.1",
Expand Down

0 comments on commit e7005de

Please sign in to comment.