Skip to content

Commit

Permalink
docs(Elevation and Layout): Typos fixed and improved documentation. (#…
Browse files Browse the repository at this point in the history 
…1878)

* Update Elevation.vue

Typos fixed

* Update Layout.vue

Improve document descriptions

* Update Layout.vue

Typos fixed
  • Loading branch information
@zapping @VdustR
zapping authored and VdustR committed Jul 27, 2018
1 parent 6fbdd21 commit ba308fc
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 24 deletions.
2 changes: 1 addition & 1 deletion docs/app/pages/UiElements/Elevation/Elevation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<page-container centered :title="$t('pages.elevation.title')">
<div class="page-container-section">
<p>Measured from the front of one surface to the front of another, an element’s elevation indicates the distance between surfaces and the depth of its shadow.</p>
<p>Elevation classes goes from 1px to 24px depth. You can add this class on any HTML tag.</p>
<p>Elevation classes range from 1px to 24px in depth. You can add this class to any HTML tag.</p>
</div>

<div class="page-container-section">
Expand Down
46 changes: 23 additions & 23 deletions docs/app/pages/UiElements/Layout/Layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,29 @@
<template>
<page-container centered :title="$t('pages.layout.title')">
<div class="page-container-section">
<p>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.</p>
<p>By default you can create gutter-free layouts or make the grid system calculate the best margin size for each screen size.</p>
<p>The layout system use the concept of rows and columns. You can create sized columns or leave the system to make your layout fluid. You'll be able to set the size for each breakpoint, even on nested columns.</p>
<p>Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoints that detail about how the contents reflow on different screens and a description of how an app can scale from small to extra-large screens.</p>
<p>By default you can create gutter-free layouts or make the grid system itself calculate the best margin size for each of your possible screen sizes.</p>
<p>The layout system use the concept of rows and columns. You can create custom sized columns or leave the system to make your layout fluid. You'll be able to set the size for each breakpoint, even on nested columns.</p>
</div>

<div class="page-container-section">
<h2>Breakpoints</h2>
<p>Vue Material layout uses some breakpoints for responsiveness:</p>
<p>Vue Material layout uses breakpoints for responsiveness:</p>
<api-table :headings="breakpoints.props.headings" :props="breakpoints.props.props" slot="props" />
</div>

<div class="page-container-section">
<h2>Column Layout</h2>

<p>The layout system in Vue Material is essentially based on columns and makes use of flexbox to be flexible enough and give the best experience with a great and easy API.</p>
<p>What you have to do to getting started with layouts is to create a <code>md-layout</code> parent element, that will hold a list of <code>md-layout-item</code>. You can set up as many columns you want:</p>
<p>The layout system in Vue Material is essentially based on columns and makes use of the flexbox to be flexible enough and thereby gives you the best experience with a great and easy API.</p>
<p>What you have to do to get started with layouts is to create a <code>md-layout</code> parent element, that will hold a list of <code>md-layout-item</code>. You can set up as many columns as you want using <code>md-layout-item</code>:</p>
<code-example title="Columns" :component="examples['layout-horizontal-columns']" />
</div>

<div class="page-container-section">
<p>By default layout items do not have space between each other. This can be kind of bad for regular layouts, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and those spaces are based on the screen width, using the same breakpoints:</p>
<p>By default layout items do not have space between each other. Regular layouts would rather prefer to have spaces between the layout items, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and these spaces are based on the screen width, using the breakpoints:</p>
<api-table :headings="gutter.props.headings" :props="gutter.props.props" slot="props" />
<p>Look at this pice of code and resize you browser to see the changes:</p>
<p>Look at this piece of code and resize your browser to see the changes:</p>
<code-example title="Gutter" :component="examples['layout-horizontal-gutter']" />
</div>

Expand All @@ -41,12 +41,12 @@
</div>

<div class="page-container-section">
<p>You can use layouts for almost anything on your app, even for small parts. To help you with that you can have differents alignments per <code>md-layout</code>, combining horizontal and vertical alignments, using the <code>md-alignment-[horizontal]-[vertical]</code> class, e.g. <code>md-alignment-top-center</code>. The alignment works on the parent element and will affect the position of all children items:</p>
<p>You can use layouts for almost anything in your app, even for small parts. To help you with that you can have different alignments for <code>md-layout</code> with various combinations of horizontal and vertical alignments to the <code>md-alignment-[horizontal]-[vertical]</code> class, e.g. <code>md-alignment-top-center</code>. The alignment works on the parent element and it will change the position of all the child items:</p>
<code-example title="Alignments" :component="examples['layout-horizontal-alignment']" />
</div>

<div class="page-container-section">
<p>In the last examples the layout system did the calculation of the children sizes based on the amount of items. But if you want to set sizes for each item? You can simply set a <code>md-size-[amount]</code> in the item that you want, e.g. <code>md-size-30</code>. The sizes, that are always in %, can be values multiple of 5 and also accepts the values 33 and 66.</p>
<p>In the previous examples the layout system did the calculation of the size of the child items based on the no. of items. But if you want to set size for each item, you can simply set the class, <code>md-size-[amount]</code>, to the item that you want, e.g. <code>md-size-30</code>. The size are always in % and the values can be multiple of 5 and also accepts the values 33 and 66.</p>
<p>You don't even need to set the size for all elements, as the flexbox model will calculate the size for the remaining items. Cool, uh?</p>
<code-example title="Size" :component="examples['layout-horizontal-sizes']" />
</div>
Expand All @@ -57,7 +57,7 @@
</div>

<div class="page-container-section">
<p>Although is not the best option, is quite common the need of hiding elements on smaller screen. You can do that using the <code>md-[breakpoint]-hide</code> classes:</p>
<p>Although this is not the best option, it is quite common to hide elements on smaller screen. You can do that using the <code>md-[breakpoint]-hide</code> classes:</p>
<code-example title="Hide Elements" :component="examples['layout-horizontal-hide']" />
</div>

Expand All @@ -68,7 +68,7 @@
</api-item>

<api-item title="API - md-layout-item">
<p>The following classes can be applied to any HTML Element direct children of <code>md-layout</code>:</p>
<p>The following classes can be applied to any HTML Element that are direct children of <code>md-layout</code>:</p>

<api-table :headings="item.headings" :props="item.props" slot="classes" />
</api-item>
Expand All @@ -94,27 +94,27 @@
props: [
{
name: 'xsmall',
description: 'For screens who have the maximum of 599px wide. For small, medium and large handsets in portrait. Also applies to small tablets in portrait.',
description: 'Applicable to screens that are maximum 599px wide. For small, medium and large handsets in portrait. Also applies to small tablets in portrait.',
value: '<599px'
},
{
name: 'small',
description: 'For screens who have between of 600px and 959px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors.',
description: 'Applicable to screens that are between 600px and 959px wide. For medium and large handsets in landscape. For small and large tablets in portrait mode and for some desktop monitors.',
value: '959px'
},
{
name: 'medium',
description: 'For screens who have between of 960px and 1279px wide. For small and large tablets in landscape and desktop monitors.',
description: 'Applicable to screens that are between 960px and 1279px wide. For small and large tablets in landscape and desktop monitors.',
value: '1279px'
},
{
name: 'large',
description: 'For screens who have between of 1280px and 1919px wide. For large desktop monitors.',
description: 'Applicable to screens that are between 1280px and 1919px wide. For large desktop monitors.',
value: '1919px'
},
{
name: 'xlarge',
description: 'For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens.',
description: 'Applicable to screens wider than 1920px. For huge desktop monitors or side-by-side screens.',
value: '>1920px'
}
]
Expand Down Expand Up @@ -152,11 +152,11 @@
},
{
name: 'md-layout-nowrap',
description: 'By default the layout items will be always wrapper under the parent layout. Use this class if you want to disable this behaviour, but the responsiveness will not work.'
description: 'By default the layout items will always be wrapped under the parent layout. Use this class if you want to disable this behaviour, but the responsiveness will not work.'
},
{
name: 'md-alignment-<code>[x]</code>-<code>[y]</code>',
description: `Sets the alignment of all children based on a value per coordinate. The alignment only works if both x and y is present e.g. <code>md-alignment-top-center</code>. The possible values are: <br>
description: `Sets the alignment of all children based on a value per coordinate. The alignment only works if both x and y are present e.g. <code>md-alignment-top-center</code>. The possible values are: <br>
<ul>
<li>top</li>
<li>center</li>
Expand All @@ -173,11 +173,11 @@
props: [
{
name: 'md-size-<code>[amount]</code>',
description: 'Sets a size to a particular item. The amount can be multiple of five, e.g. <code>md-size-25</code>. Also accepts 33, 66 and 100 for easy prototyping.'
description: 'Sets a size to a particular item. The value can be multiples of 5, e.g. <code>md-size-25</code>. Also accepts 33, 66 and 100 for easy prototyping.'
},
{
name: 'md-<code>[breakpoint]</code>-size-<code>[amount]</code>',
description: `Sets a size to a particular item on a particular breakpoint. The breakpoints follow the <a href="https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints" target="_blank">Material Design guidelines</a> for layout. The possible values are:
name: `md-<code>[breakpoint]</code>-size-<code>[amount]</code>',
description: 'Sets a size to a particular item for a particular breakpoint. The breakpoints follow the <a href="https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints" target="_blank">Material Design guidelines</a> for layout. The possible values are:
<ul>
<li>xsmall</li>
<li>small</li>
Expand All @@ -194,7 +194,7 @@
props: [
{
name: 'md-<code>[breakpoint]</code>-hide',
description: `Hides a particular element on a particular breakpoint. The breakpoints follow the <a href="https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints" target="_blank">Material Design guidelines</a> for layout. The possible values are:
description: `Hides a particular element for a particular breakpoint. The breakpoints follow the <a href="https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints" target="_blank">Material Design guidelines</a> for layout. The possible values are:
<ul>
<li>xsmall</li>
<li>small</li>
Expand Down

0 comments on commit ba308fc

Please sign in to comment.