feat(page): Add dc-page and dc-container. Close #226.

docs/demo/assets/styles/partials/_layout.scss

@@ -29,7 +29,6 @@ a {
 	@include border-box;
 	position: relative;
 	margin-top: $dc-touch-size;
-	padding: $dc-space50;
 	z-index: 0;
 	min-height: calc(100vh - 4.4rem);
 	transition: transform .2s ease-out, padding .2s ease-out;
@@ -60,14 +59,4 @@ a {
 		}
 	}
 
-	@include breakpoint($dc-large-width)
-	{
-		padding: $dc-space100;
-	}
-
-	@include breakpoint($dc-monstrous-width)
-	{
-		padding: $dc-space100 $dc-space150;
-	}
-
 }

docs/demo/materials/02-structure-and-grid/01-page-structure.html

@@ -0,0 +1,6 @@
+---
+notes: |
+    Use `dc-page` to set up the page space. It applies the default page padding for several screen sizes.
+
+    Use `dc-container` to create the main content container. Your content and cards should go inside of this container. Use `dc-container--contained` to limit the maximum size of the container.
+---

docs/demo/views/02-structure-and-grid.html

@@ -0,0 +1,11 @@
+---
+fabricator: true
+---
+
+<h1 class="dc-h1" data-f-toggle="labels">Page Structure and Grid</h1>
+
+{{#each materials.02-structure-and-grid.items}}
+
+{{> f-item this}}
+
+{{/each}}

docs/demo/views/layouts/default.html

@@ -31,14 +31,16 @@
 		</header>
 		{{> f-icons}}
 		{{> f-menu}}
-		<div class="f-container">
+		<div class="f-container dc-page">
+            <div class="dc-container dc-container--limited">
 	{{/if}}
 
 
 	{% body %}
 
 	{{#if fabricator}}
-		</div>
+		    </div>
+        </div>
 		<div class="dc-grid"></div>
 
 		<script src="{{basePath}}/assets/scripts/main.js"></script>

src/styles/dress-code.scss

@@ -1,8 +1,8 @@
 // core
 @import "core/core";
 
-// grid
-@import "grid/grid";
+// structure and grid
+@import "structure/structure";
 
 // atoms
 @import "atoms/btn";
@@ -44,7 +44,8 @@
     @include dc-typography-selectors;
     @include dc-patterns-selectors;
 
-    // grid
+    // structure and grid
+    @include dc-structure-selectors;
     @include dc-grid-selectors;
 
     // atoms

src/styles/structure/_page-container.scss

@@ -0,0 +1,35 @@
+@mixin dc-page {
+
+    padding: $dc-space75;
+
+    @include breakpoint($dc-large-width) {
+        padding: $dc-space100;
+    }
+
+    @include breakpoint($dc-huge-width) {
+        padding: $dc-space150;
+    }
+
+    @include breakpoint($dc-giant-width) {
+        padding: $dc-space150 $dc-space250;
+    }
+}
+
+@mixin dc-container {
+    margin: 0 auto;
+
+    &--limited {
+        max-width: 120rem;
+    }
+}
+
+
+@mixin dc-structure-selectors {
+    .dc-page {
+        @include dc-page;
+    }
+
+    .dc-container {
+        @include dc-container;
+    }
+}

src/styles/grid/_grid.scss → src/styles/structure/_structure.scss

@@ -1,3 +1,4 @@
 @import "grid-variables";
 @import "grid-mixins";
 @import "grid-classes";
+@import "page-container";