diff --git a/docs/demo/assets/styles/partials/_layout.scss b/docs/demo/assets/styles/partials/_layout.scss index 03d197fb..846b1b71 100644 --- a/docs/demo/assets/styles/partials/_layout.scss +++ b/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; - } - } diff --git a/docs/demo/materials/02-structure-and-grid/01-page-structure.html b/docs/demo/materials/02-structure-and-grid/01-page-structure.html new file mode 100644 index 00000000..9dbdc1b8 --- /dev/null +++ b/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. +--- diff --git a/docs/demo/materials/02-grid/01-Grid/01-basic-grid.html b/docs/demo/materials/02-structure-and-grid/02-grid/02-basic-grid.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/01-basic-grid.html rename to docs/demo/materials/02-structure-and-grid/02-grid/02-basic-grid.html diff --git a/docs/demo/materials/02-grid/01-Grid/02-shrink-columns.html b/docs/demo/materials/02-structure-and-grid/02-grid/03-shrink-columns.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/02-shrink-columns.html rename to docs/demo/materials/02-structure-and-grid/02-grid/03-shrink-columns.html diff --git a/docs/demo/materials/02-grid/01-Grid/03-responsive-grid.html b/docs/demo/materials/02-structure-and-grid/02-grid/04-responsive-grid.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/03-responsive-grid.html rename to docs/demo/materials/02-structure-and-grid/02-grid/04-responsive-grid.html diff --git a/docs/demo/materials/02-grid/01-Grid/04-grid-column-sizes.html b/docs/demo/materials/02-structure-and-grid/02-grid/05-grid-column-sizes.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/04-grid-column-sizes.html rename to docs/demo/materials/02-structure-and-grid/02-grid/05-grid-column-sizes.html diff --git a/docs/demo/materials/02-grid/01-Grid/05-offset-columns.html b/docs/demo/materials/02-structure-and-grid/02-grid/06-offset-columns.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/05-offset-columns.html rename to docs/demo/materials/02-structure-and-grid/02-grid/06-offset-columns.html diff --git a/docs/demo/materials/02-grid/01-Grid/06-collapse-columns.html b/docs/demo/materials/02-structure-and-grid/02-grid/07-collapse-columns.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/06-collapse-columns.html rename to docs/demo/materials/02-structure-and-grid/02-grid/07-collapse-columns.html diff --git a/docs/demo/materials/02-grid/01-Grid/07-nested-grid-rows.html b/docs/demo/materials/02-structure-and-grid/02-grid/08-nested-grid-rows.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/07-nested-grid-rows.html rename to docs/demo/materials/02-structure-and-grid/02-grid/08-nested-grid-rows.html diff --git a/docs/demo/materials/02-grid/01-Grid/08-block-grid.html b/docs/demo/materials/02-structure-and-grid/02-grid/09-block-grid.html similarity index 100% rename from docs/demo/materials/02-grid/01-Grid/08-block-grid.html rename to docs/demo/materials/02-structure-and-grid/02-grid/09-block-grid.html diff --git a/docs/demo/materials/02-grid/02-horizontal-alignment/01-row-align-centered.html b/docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/01-row-align-centered.html similarity index 100% rename from docs/demo/materials/02-grid/02-horizontal-alignment/01-row-align-centered.html rename to docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/01-row-align-centered.html diff --git a/docs/demo/materials/02-grid/02-horizontal-alignment/02-row-align-right.html b/docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/02-row-align-right.html similarity index 100% rename from docs/demo/materials/02-grid/02-horizontal-alignment/02-row-align-right.html rename to docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/02-row-align-right.html diff --git a/docs/demo/materials/02-grid/02-horizontal-alignment/03-row-align-spaced.html b/docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/03-row-align-spaced.html similarity index 100% rename from docs/demo/materials/02-grid/02-horizontal-alignment/03-row-align-spaced.html rename to docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/03-row-align-spaced.html diff --git a/docs/demo/materials/02-grid/02-horizontal-alignment/04-row-align-justified.html b/docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/04-row-align-justified.html similarity index 100% rename from docs/demo/materials/02-grid/02-horizontal-alignment/04-row-align-justified.html rename to docs/demo/materials/02-structure-and-grid/03-horizontal-alignment/04-row-align-justified.html diff --git a/docs/demo/materials/02-grid/04-scss-reference/01-mixins.html b/docs/demo/materials/02-structure-and-grid/04-scss-reference/01-mixins.html similarity index 100% rename from docs/demo/materials/02-grid/04-scss-reference/01-mixins.html rename to docs/demo/materials/02-structure-and-grid/04-scss-reference/01-mixins.html diff --git a/docs/demo/materials/02-grid/04-scss-reference/02-default-grid-variables.html b/docs/demo/materials/02-structure-and-grid/04-scss-reference/02-default-grid-variables.html similarity index 100% rename from docs/demo/materials/02-grid/04-scss-reference/02-default-grid-variables.html rename to docs/demo/materials/02-structure-and-grid/04-scss-reference/02-default-grid-variables.html diff --git a/docs/demo/materials/02-grid/03-vertical-alignment/01-row-align-top.html b/docs/demo/materials/02-structure-and-grid/05-vertical-alignment/01-row-align-top.html similarity index 100% rename from docs/demo/materials/02-grid/03-vertical-alignment/01-row-align-top.html rename to docs/demo/materials/02-structure-and-grid/05-vertical-alignment/01-row-align-top.html diff --git a/docs/demo/materials/02-grid/03-vertical-alignment/02-row-align-middle.html b/docs/demo/materials/02-structure-and-grid/05-vertical-alignment/02-row-align-middle.html similarity index 100% rename from docs/demo/materials/02-grid/03-vertical-alignment/02-row-align-middle.html rename to docs/demo/materials/02-structure-and-grid/05-vertical-alignment/02-row-align-middle.html diff --git a/docs/demo/materials/02-grid/03-vertical-alignment/03-row-align-bottom.html b/docs/demo/materials/02-structure-and-grid/05-vertical-alignment/03-row-align-bottom.html similarity index 100% rename from docs/demo/materials/02-grid/03-vertical-alignment/03-row-align-bottom.html rename to docs/demo/materials/02-structure-and-grid/05-vertical-alignment/03-row-align-bottom.html diff --git a/docs/demo/materials/02-grid/03-vertical-alignment/04-self-align-columns.html b/docs/demo/materials/02-structure-and-grid/05-vertical-alignment/04-self-align-columns.html similarity index 100% rename from docs/demo/materials/02-grid/03-vertical-alignment/04-self-align-columns.html rename to docs/demo/materials/02-structure-and-grid/05-vertical-alignment/04-self-align-columns.html diff --git a/docs/demo/views/02-grid.html b/docs/demo/views/02-grid.html deleted file mode 100644 index 8cf99152..00000000 --- a/docs/demo/views/02-grid.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -fabricator: true ---- - -

Dress Code Grid

- -{{#each materials.02-grid.items}} - -{{> f-item this}} - -{{/each}} diff --git a/docs/demo/views/02-structure-and-grid.html b/docs/demo/views/02-structure-and-grid.html new file mode 100644 index 00000000..c9c49995 --- /dev/null +++ b/docs/demo/views/02-structure-and-grid.html @@ -0,0 +1,11 @@ +--- +fabricator: true +--- + +

Page Structure and Grid

+ +{{#each materials.02-structure-and-grid.items}} + +{{> f-item this}} + +{{/each}} diff --git a/docs/demo/views/layouts/default.html b/docs/demo/views/layouts/default.html index 421ccf68..e251633c 100644 --- a/docs/demo/views/layouts/default.html +++ b/docs/demo/views/layouts/default.html @@ -31,14 +31,16 @@ {{> f-icons}} {{> f-menu}} -
+
+
{{/if}} {% body %} {{#if fabricator}} -
+
+
diff --git a/src/styles/dress-code.scss b/src/styles/dress-code.scss index 912ad3a2..e849b8a4 100644 --- a/src/styles/dress-code.scss +++ b/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 diff --git a/src/styles/grid/_grid-classes.scss b/src/styles/structure/_grid-classes.scss similarity index 100% rename from src/styles/grid/_grid-classes.scss rename to src/styles/structure/_grid-classes.scss diff --git a/src/styles/grid/_grid-mixins.scss b/src/styles/structure/_grid-mixins.scss similarity index 100% rename from src/styles/grid/_grid-mixins.scss rename to src/styles/structure/_grid-mixins.scss diff --git a/src/styles/grid/_grid-variables.scss b/src/styles/structure/_grid-variables.scss similarity index 100% rename from src/styles/grid/_grid-variables.scss rename to src/styles/structure/_grid-variables.scss diff --git a/src/styles/structure/_page-container.scss b/src/styles/structure/_page-container.scss new file mode 100644 index 00000000..17030c5d --- /dev/null +++ b/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; + } +} diff --git a/src/styles/grid/_grid.scss b/src/styles/structure/_structure.scss similarity index 73% rename from src/styles/grid/_grid.scss rename to src/styles/structure/_structure.scss index 4b5fe73e..8b4e00dc 100644 --- a/src/styles/grid/_grid.scss +++ b/src/styles/structure/_structure.scss @@ -1,3 +1,4 @@ @import "grid-variables"; @import "grid-mixins"; @import "grid-classes"; +@import "page-container";