From e7005de9c2aa4e309f519b9f4b68f8b4a346eb39 Mon Sep 17 00:00:00 2001 From: Ward Penney Date: Fri, 12 Feb 2016 16:07:34 -0500 Subject: [PATCH] Add grid container * Adds a wrapping element for a grid * Demonstrate contrib example in rough fashion --- contrib/index.html | 271 +++++--------------------- contrib/styles.scss | 48 +++++ core/_neat.scss | 1 + core/neat/mixins/_grid-container.scss | 28 +++ core/neat/settings/_settings.scss | 2 +- package.json | 4 - 6 files changed, 125 insertions(+), 229 deletions(-) create mode 100644 core/neat/mixins/_grid-container.scss diff --git a/contrib/index.html b/contrib/index.html index c24b40ea..ded8dd09 100644 --- a/contrib/index.html +++ b/contrib/index.html @@ -1,225 +1,48 @@ - - - - - - - Have fun ❤︎ - - - - -
+ + + + + + + Have fun ❤︎ + + + + +
+

Basic

-
- @include outer-container; -
- @include span-columns(6); -
-
- @include span-columns(6); -
-
-

Multiple rows

-
- @include outer-container; -
- (1) -
-
- - @include span-columns(11);
- @include omega(); - -
-
- - @include span-columns(2); - -
-
- - @include span-columns(10);
- @include omega(); - -
-
- - @include span-columns(3); - -
-
- - @include span-columns(9);
- @include omega(); - -
-
- - @include span-columns(4); - -
-
- - @include span-columns(8);
- @include omega(); - -
-
- - @include span-columns(5); - -
-
- - @include span-columns(7);
- @include omega(); - -
-
- - @include span-columns(6); - -
-
- - @include span-columns(6);
- @include omega(); - -
-
-

Nesting columns

-
- @include outer-container; -
- @include span-columns(4); -
-
- @include span-columns(8); - -
- @include span-columns(4 of 8); -
-
-
-

Table grid

-
- @include outer-container; -
- - @include fill-parent();
- @include row(table); - -
-
- -
- - @include span-columns(8);
- @include reset-display; - -
-
-
-

Shifting columns

-
- @include outer-container; -
- - @include span-columns(6);
- @include shift(3); - -
-
-

Automatic rows

-
- @include outer-container; -
-
-
-
-  .box {
-    @include span-columns(3);
-    @include omega(4n);
-  }
-
-
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
- .box -
-
-

Media Queries

-
-
-  @include outer-container;
-  $mobile: new-breakpoint(max-width 500px 4);
-
-
-
-  @include span-columns(4);
-
-  @include media($mobile) {
-    @include span-columns(3);
-  }
-
-
-
-
-  @include span-columns(8);
-  @include media($mobile) {
-    @include span-columns(3);
-  }
-
-
-
-
- - + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/contrib/styles.scss b/contrib/styles.scss index b2a82536..9eb24eab 100644 --- a/contrib/styles.scss +++ b/contrib/styles.scss @@ -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; +} diff --git a/core/_neat.scss b/core/_neat.scss index 93a18170..8e4323fd 100644 --- a/core/_neat.scss +++ b/core/_neat.scss @@ -7,3 +7,4 @@ @import "neat/settings/settings"; @import "neat/mixins/grid-column"; +@import "neat/mixins/grid-container"; diff --git a/core/neat/mixins/_grid-container.scss b/core/neat/mixins/_grid-container.scss new file mode 100644 index 00000000..9b0dfc73 --- /dev/null +++ b/core/neat/mixins/_grid-container.scss @@ -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; + } +} diff --git a/core/neat/settings/_settings.scss b/core/neat/settings/_settings.scss index 7edda896..a9c6af74 100644 --- a/core/neat/settings/_settings.scss +++ b/core/neat/settings/_settings.scss @@ -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 diff --git a/package.json b/package.json index 76e17386..1fe12f96 100644 --- a/package.json +++ b/package.json @@ -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",