From aa6e0e84ceeb759cebd71cd18c47f02a2b2dcf60 Mon Sep 17 00:00:00 2001 From: Yiran Mao Date: Fri, 30 Jun 2017 19:14:48 -0400 Subject: [PATCH] feat(layout-grid): Implement layout grid alignment. Closes #749. --- demos/layout-grid.html | 22 +++-- packages/mdc-layout-grid/README.md | 93 +++++++++++-------- packages/mdc-layout-grid/mdc-layout-grid.scss | 9 ++ 3 files changed, 78 insertions(+), 46 deletions(-) diff --git a/demos/layout-grid.html b/demos/layout-grid.html index f33bba53438..2fcf373a78f 100644 --- a/demos/layout-grid.html +++ b/demos/layout-grid.html @@ -69,11 +69,6 @@ max-width: 1280px; } - .demo-grid.left-align { - margin-left: 0; - margin-right: auto; - } - .demo-grid-legend { margin: 16px 0 8px 0; } @@ -288,7 +283,8 @@ -
Grid with max width (1280px) and center alignment
+

Grid with max width

+
Grid with max width (1280px) and center alignment by default
@@ -298,7 +294,7 @@
Grid with max width (1280px) and left alignment
-
+
@@ -306,7 +302,7 @@
-
Fixed column width layout grid
+

Fixed column width layout grid

@@ -338,6 +334,7 @@
+
Fixed column width layout grid and center alignment by default
@@ -346,6 +343,15 @@
+
Fixed column width layout grid and right alignment
+
+
+
+
+
+
+
+
diff --git a/packages/mdc-layout-grid/README.md b/packages/mdc-layout-grid/README.md index ce2884e511f..3df1c91dbe2 100644 --- a/packages/mdc-layout-grid/README.md +++ b/packages/mdc-layout-grid/README.md @@ -92,7 +92,9 @@ You can change the margins and gutters for a grid using the `--mdc-layout-grid-m You can change the margins and gutters using sass variables if you are compiling from them. MDC layout grid uses sass map `mdc-layout-grid-default-margin` and `mdc-layout-grid-default-gutter` to define margins and gutters on different screen types. -### Column spans +### Grid cells + +#### Column spans ```html
@@ -131,13 +133,49 @@ In the example above, the first cell has a default span of 6, the second 4, and the first cell becomes 8 columns wide instead, and the second 6 columns wide. At phone sizes, the third cell becomes 4 columns wide. +#### Cell reordering + +By default, items are positioned in the source order. However, you can reorder them by using the +`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12. + +```html +
+
+
+
+
+
+
+``` + +Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow +source order. + + +#### Cell alignment -### Max width +Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different +behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of +`{top}`, `{middle}` or `{bottom}`. + +```html +
+
+
+
+
+
+
+``` + +### Grid with restricted width + +#### Max width MDC layout grids take up the parent element space by default. However, user can set `$mdc-layout-grid-max-width` to restrict the max-width of the layout grid. -### Fixed column width grid +#### Fixed column width grid You can designate each column to have a certain width by using `mdc-layout-grid--fixed-column-width` modifier. The column width can be specified through sass map `$mdc-layout-grid-column-width` or css custom properties `--mdc-layout-grid-column-width-{screen_size}`. The column width is set to 72px on all devices by default. @@ -156,6 +194,20 @@ You can designate each column to have a certain width by using `mdc-layout-grid-
``` +#### Alignment of grid + +The grid is by default center aligned. User can add `mdc-layout-grid--align-left` +or `mdc-layout-grid--align-right` modifier class to change this behavior. Note, these +modifiers will have no effect when the grid already fills its container. + +``` +
+
+
+
+
+
+``` ### Nested grid @@ -180,41 +232,6 @@ However, Material guideline do not recommend have a deeply nested grid since it
``` -### Reordering - -By default, items are positioned in the source order. However, you can reorder them by using the -`mdc-layout-grid__cell--order-{number}` classes, where `{order}` is an integer between 1 and 12. - -```html -
-
-
-
-
-
-
-``` - -Please bear in mind that this may have an impact on accessibility, since screen readers and other tools tend to follow -source order. - - -### Alignment - -Items are defined to stretch, by default, taking up the height of their corresponding row. You can switch to a different -behavior by using one of the `mdc-layout-grid__cell--align-{position}` alignment classes, where `{position}` is one of -`{top}`, `{middle}` or `{bottom}`. - -```html -
-
-
-
-
-
-
-``` - ## Sass mixin usage diff --git a/packages/mdc-layout-grid/mdc-layout-grid.scss b/packages/mdc-layout-grid/mdc-layout-grid.scss index 8d903d702e5..8e572753df5 100644 --- a/packages/mdc-layout-grid/mdc-layout-grid.scss +++ b/packages/mdc-layout-grid/mdc-layout-grid.scss @@ -97,4 +97,13 @@ } } +.mdc-layout-grid--align-left { + margin-right: auto; + margin-left: 0; +} + +.mdc-layout-grid--align-right { + margin-right: 0; + margin-left: auto; +} // postcss-bem-linter: end