From 2d0a431405160c64a3469ed98c300d64a7766532 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Fri, 16 Dec 2016 02:41:15 -0200 Subject: [PATCH] create docs for layout --- docs/src/components/PageContent.vue | 6 +- docs/src/pages/ui-elements/Layout.vue | 227 ++++++++++++++++++++++++-- src/components/mdLayout/mdLayout.scss | 12 ++ 3 files changed, 227 insertions(+), 18 deletions(-) diff --git a/docs/src/components/PageContent.vue b/docs/src/components/PageContent.vue index 5ed14cd..4970860 100644 --- a/docs/src/components/PageContent.vue +++ b/docs/src/components/PageContent.vue @@ -8,10 +8,10 @@
{{ pageTitle }}
-
+
Version: - - {{ doc }} + + {{ doc }}
diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue index c404525..e9d3173 100644 --- a/docs/src/pages/ui-elements/Layout.vue +++ b/docs/src/pages/ui-elements/Layout.vue @@ -3,6 +3,126 @@

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

+

By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the md-gutter property. If you want the automatic calculation the engine will set 16px for small screens and then apply 24px for medium to large.

+

You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.

+

The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:

+ + + + Name + Size + Description + + + + + + xsmall + 600px + For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small handsets in portrait. + + + + small + 960px + For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors. + + + + medium + 1280px + For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors. + + + + large + 1920px + For screens who have between of 1280px and 1920px wide. For large desktop monitors. + + + + xlarge + >1920px + For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens. + + + +
+ +
+ + + + + Name + Type + Description + + + + + + md-tag + String + The output tag. Default div + + + + md-gutter + Boolean|Number + Apply a gutter space to direct childs of the element that have this property. If true the gutter will be calculated automatically by the current screen size. If number the size will be fixed. Accepts 8|16|24|40. Default false + + + + md-row + Boolean + Create a row container. All child will be side by side. + + + + md-row-{type} + Boolean + Create a row container on screen sizes less than or equal to given breakpoint. Example: md-row-large + + + + md-column + Boolean + Create a column container. All child will be one underneath the other. + + + + md-column-{type} + Boolean + Create a column container on screen sizes less than or equal to given breakpoint. Example: md-column-small + + + + md-hide-{type} + Boolean + Hide a layout container/child on screen sizes less than or equal to given breakpoint. Example: md-hide-medium + + + + md-flex + Boolean|Number + Create a flexible child. If true the child element will grow to fill the empty space available on the parent element. If Number the size of the child will be sized according to the giver size. Accepts values multiple of 5. Also accepts the values 33 and 66. Default: true + + + + md-flex-{type} + Boolean|Number + Create a flexible child on screen sizes less than or equal to given breakpoint. Example: md-flex-small="33" + + + + md-flex-offset + Number + Create a empty space before the actual child. Accepts the same value of md-flex Example: md-flex-offset="50" + + + +
@@ -131,36 +251,100 @@ -
+
- - - - - + + 8px + + + + 8px + + + + 8px + + + + 8px + + + + 8px + + + + 8px + - - - - + + 16px + + + + 16px + + + + 16px + + + + 16px + + + + 16px + - - - + + 24px + + + + 24px + + + + 24px + + + + 24px + - - + + 40px + + + + 40px + + + + 40px + + + + + + Automatic + + + + Automatic +
@@ -195,6 +379,13 @@ padding: 16px; } + .gutter .color .md-layout { + color: rgba(#000, .54); + font-size: 13px; + font-weight: 500; + text-indent: 8px; + } + .color { $sizes: (8, 16, 24, 40); @@ -266,4 +457,10 @@ .color-orange:before { background-color: #FF9800 !important; } + + .properties { + table tr td:first-child { + white-space: nowrap; + } + } diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss index b80ece9..5e48a6f 100644 --- a/src/components/mdLayout/mdLayout.scss +++ b/src/components/mdLayout/mdLayout.scss @@ -32,6 +32,18 @@ @include layout(); +/* Container */ + +.md-layout.md-container { + width: 100%; + max-width: 1200px; + + &.md-centered { + margin: 0 auto; + } +} + + /* Gutter Size */ @mixin layout-gutter($margin: -12px, $padding: 12px) {