diff --git a/docs/demo/assets/fabricator/styles/fabricator.scss b/docs/demo/assets/fabricator/styles/fabricator.scss index 128a2e2b..fe298be3 100644 --- a/docs/demo/assets/fabricator/styles/fabricator.scss +++ b/docs/demo/assets/fabricator/styles/fabricator.scss @@ -18,7 +18,6 @@ // Import typography from toolkit for @extend @import "../../../../../src/styles/modules/typography"; -@import "../../../../../src/styles/modules/grid"; // Custom Styleguide components @import 'partials/sg-icon'; diff --git a/docs/demo/materials/atoms/grid.html b/docs/demo/materials/atoms/grid.html deleted file mode 100644 index 77c8a2ee..00000000 --- a/docs/demo/materials/atoms/grid.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -notes: | - Alignment is key. ---- - -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis tempore id labore nemo praesentium, provident assumenda quod neque dolores excepturi rem veritatis atque libero officia blanditiis, dolorum nam quia dolorem. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ad optio enim quibusdam ullam illum laboriosam magnam mollitia excepturi sunt nostrum amet. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis beatae explicabo molestiae eius nisi laudantium, reprehenderit est unde aperiam libero ipsum eveniet fugiat quae atque, error vitae consequatur, perspiciatis. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, obcaecati! -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam consectetur distinctio excepturi blanditiis dolores nulla sunt, itaque, quos est molestias veritatis ipsam. Sequi nihil, beatae ipsam, voluptatem doloremque recusandae amet! -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, consequatur. Inventore quibusdam, doloribus nostrum fugit maxime sequi repudiandae ipsam. -
-
- -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis tempore id labore nemo praesentium, provident assumenda quod neque dolores excepturi rem veritatis atque libero officia blanditiis, dolorum nam quia dolorem. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore ad optio enim quibusdam ullam illum laboriosam magnam mollitia excepturi sunt nostrum amet. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nobis beatae explicabo molestiae eius nisi laudantium, reprehenderit est unde aperiam libero ipsum eveniet fugiat quae atque, error vitae consequatur, perspiciatis. -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, obcaecati! -
-
diff --git a/docs/demo/views/templates/grid.html b/docs/demo/views/templates/grid.html deleted file mode 100644 index dc65a04d..00000000 --- a/docs/demo/views/templates/grid.html +++ /dev/null @@ -1,409 +0,0 @@ -
- - Back -
- -
-
-

Outside The Box Grid

-
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
3
-
- -
-
3
-
- -
-
3
-
- -
-
3
-
- -
-
4
-
- -
-
4
-
- -
-
4
-
- -
-
5
-
- -
-
2
-
- -
-
5
-
- -
-
6
-
- -
-
6
-
- -
-
7
-
- -
-
5
-
- -
-
8
-
- -
-
4
-
- -
-
9
-
- -
-
3
-
- -
-
10
-
- -
-
2
-
- -
-
11
-
- -
-
1
-
- -
-
12
-
-
- -
-
-

Analytics Style

-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cumque praesentium dignissimos, eveniet nostrum voluptatem excepturi quod quibusdam delectus dolorum sequi, aliquid explicabo vel repellendus sunt accusantium. Nemo, iure, assumenda!
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At praesentium laboriosam cupiditate accusamus eum iusto corporis rerum dolore suscipit modi libero sapiente cumque ipsum, dolor id similique ex ab, dolores!
-
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit animi provident autem suscipit omnis veritatis sapiente, eaque, alias? Rem, nostrum, labore. Esse eius inventore dolorem perspiciatis necessitatibus eos libero hic?
-
-
- -
-

Inside The Box Grid

-
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
1
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
2
-
- -
-
3
-
- -
-
3
-
- -
-
3
-
- -
-
3
-
- -
-
4
-
- -
-
4
-
- -
-
4
-
- -
-
5
-
- -
-
2
-
- -
-
5
-
- -
-
6
-
- -
-
6
-
- -
-
7
-
- -
-
5
-
- -
-
8
-
- -
-
4
-
- -
-
9
-
- -
-
3
-
- -
-
10
-
- -
-
2
-
- -
-
11
-
- -
-
1
-
- -
-
12
-
-
- -
-

Fancy Responsive Grid

-
-
Hi
-
- -
-
I'm
-
- -
-
fancy.
-
- -
-
How
-
- -
-
'bout
-
- -
-
you?
-
-
- -
-
-
Hi
-
- -
-
I'm
-
- -
-
fancy.
-
- -
-
How
-
- -
-
'bout
-
- -
-
you?
-
-
- -
diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 338a9d37..5ec0fe11 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -9,9 +9,6 @@ // Third party mixin and variables plus our mixin and variables @import "import"; -// The grid -@import "modules/grid"; - // Patterns @import "patterns/clearfix"; @import "patterns/nav"; diff --git a/src/styles/modules/_grid.scss b/src/styles/modules/_grid.scss deleted file mode 100644 index d771fadd..00000000 --- a/src/styles/modules/_grid.scss +++ /dev/null @@ -1,86 +0,0 @@ -// --------------------------------------------------------------------------- -// -// Defines the grid and generates helper classes. -// -// --------------------------------------------------------------------------- - - -// = BUILD GRID HELPER CLASSES -// --------------------------------------------------------------------------- - -$layouts: $dc-tiny $dc-small $dc-medium $dc-large $dc-huge $dc-giant $dc-monstrous; -$breakpoints: $dc-tiny-width $dc-small-width $dc-medium-width $dc-large-width $dc-huge-width $dc-giant-width $dc-monstrous-width; -$breakpoint-names: "tiny" "small" "medium" "large" "huge" "giant" "monstrous"; - -.dc-span--demo { - margin-bottom: $dc-space50; - padding: $dc-space50 / 2; - border: 1px solid rgba($dc-orange40, .6); - background: rgba($dc-orange60, .4); - color: $dc-orange20; - font-size: $dc-font50; - line-height: 1.5; -} - -.dc-grid--padded { - padding: $dc-space50; - - @include breakpoint($dc-small-width) { - padding: $dc-space100; - } - - @include breakpoint($dc-giant-width) { - padding: $dc-space150; - } - - @include breakpoint($dc-monstrous-width) { - padding: $dc-space200; - } -} - -.dc-grid { - - // For each breakpoint - @for $j from 1 through length($breakpoints) { - // Check if there is another breakpoint after - // the current one. If yes, limit the media query. - @if($j < length($breakpoints)) { - // E. g. "80em 99.9em" - $mq: nth($breakpoints, $j) nth($breakpoints, $j + 1) - .1; - } @else { - // E. g. "100em" - $mq: nth($breakpoints, $j); - } - - // Add the media query - @include breakpoint(nth($breakpoints, $j)) { - // Set the layout on the grid itself - @include container(nth($layouts, $j)); - - // For each column size (1-12) - @for $i from 1 through 12 { - // Generate classes like .dc-large-span4 - .dc-#{nth($breakpoint-names, $j)}-span#{$i} { - @include span($i of nth($layouts, $j)); - } - } - } - // Add the media query - @include breakpoint($mq) { - @for $i from 1 through 12 { - // Generate classes for last columns like .dc-large-last - .dc-#{nth($breakpoint-names, $j)}-last { - // Reset last column to prevent line break - @include last; - - // The first element of a new row must clear floats - // otherwise rows could get messed up when columns - // do not have the same height. - + [class*='-span'] { - clear: both; - } - } - } - } - } -}