Skip to content

Commit

Permalink
feature(docs): flexbox layout intro (#101)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyleledbetter @emoralesb05
kyleledbetter authored and emoralesb05 committed Oct 14, 2016
1 parent 63da8b2 commit f151d59
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 1 deletion.
145 changes: 144 additions & 1 deletion src/app/components/layouts/overview/overview.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<td-layout-nav logo="app/assets/icons/teradata.svg" title="Covalent">
<td-layout-card-over title="Layout Options" subtitle="We offer 4 Material Design layouts for you">
<md-card-content hide-xs>
<p>For your entire app or for different sections of your app, select one of these Material Design layout options:</p>
<div layout="row" layout-padding>
<a md-button flex [routerLink]="'nav-view'">
<img src="app/assets/images/nav-view.png" alt="Navigation View">
Expand All @@ -20,7 +21,7 @@
</a>
</div>
</md-card-content>
<md-nav-list>
<md-nav-list hide-gt-xs>
<template let-item let-last="last" ngFor [ngForOf]="items">
<a md-list-item [routerLink]="[item.route]">
<md-icon md-list-avatar>{{item.icon}}</md-icon>
Expand All @@ -30,6 +31,148 @@ <h3 md-line> {{item.title}} </h3>
<md-divider *ngIf="!last" md-inset></md-divider>
</template>
</md-nav-list>
<div after-card>
<h3 class="md-title">Flexbox Layout (&quot;grid&quot;)</h3>
<td-expansion-panel expand="true" label="Flexbox Introduction" sublabel="what powers this layout?">
<div class="md-padding">
<p>We've ported the CSS3 Flexbox layout system from <a href="https://material.angularjs.org/latest/layout/introduction" target="_blank">Angular-Material v1</a>, so those <a href="https://material.angularjs.org/latest/layout/introduction" target="_blank">docs</a> shoud be your starting point. </p>
<p>In a nutshell, the Flexbox layout gives you:</p>
<ul>
<li>Horizontal row layout for child elements</li>
<li>Vertical column layout for child elements</li>
<li>Alignment &amp; ordering for child elements</li>
<li>Any &quot;flex&quot; elastic width for child elements</li>
<li>Conditionally responsive versions for xs,sm,md,lg,xl breakpoints</li>
</ul>
</div>
</td-expansion-panel>
<td-expansion-panel label="Rows &amp; Columns" sublabel="directional parent containers">
<div class="md-padding">
<p>Horizontal row container:</p>
<div layout="row">
<div flex class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="row">
<div flex>child</div>
<div flex>child</div>
<div flex>child</div>
</div>
]]>
</td-highlight>
<md-divider class="push-top push-bottom"></md-divider>
<p>Vertical column container:</p>
<div layout="column">
<div flex class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="column">
<div flex>child</div>
<div flex>child</div>
<div flex>child</div>
</div>
]]>
</td-highlight>
</div>
</td-expansion-panel>
<td-expansion-panel label="Layout margin &amp; padding" sublabel="for child elements">
<div class="md-padding">
<p>Layout margin</p>
<div layout="row" layout-margin>
<div flex class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="row" layout-margin>
<div flex>child</div>
<div flex>child</div>
<div flex>child</div>
</div>
]]>
</td-highlight>
<md-divider class="push-top push-bottom"></md-divider>
<p>Layout padding</p>
<div layout="row" layout-padding>
<div flex class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="row" layout-padding>
<div flex>child</div>
<div flex>child</div>
<div flex>child</div>
</div>
]]>
</td-highlight>
</div>
</td-expansion-panel>
<td-expansion-panel label="Responsive widths" sublabel="for child elements">
<div class="md-padding">
<p>40/flex/30 (notice how <code>flex</code> fills remaining space):</p>
<div layout="row" layout-padding>
<div flex="40" class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex="30" class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="row" layout-padding>
<div flex="40">child</div>
<div flex>child</div>
<div flex="30">child</div>
</div>
]]>
</td-highlight>
<md-divider class="push-top push-bottom"></md-divider>
<p>Responsive widths (will change as you resize browser):</p>
<div layout="row" layout-padding>
<div flex-gt-xs="40" flex-md="50" class="bgc-teal-600 tc-teal-50">child</div>
<div flex class="bgc-indigo-600 tc-indigo-50">child</div>
<div flex-gt-xs="30" flex-md="20" flex-lg="10" class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout="row" layout-padding>
<div flex-gt-xs="40" flex-md="50">child</div>
<div flex>child</div>
<div flex-gt-xs="30" flex-md="20" flex-lg="10">child</div>
</div>
]]>
</td-highlight>
<md-divider class="push-top push-bottom"></md-divider>
<p>Typical responsive layout (just collapse on xs which is mobile)</p>
<div layout-gt-xs="row">
<div flex-gt-xs="60" class="bgc-teal-600 tc-teal-50">child</div>
<div flex-gt-xs="40" class="bgc-purple-600 tc-purple-50">child</div>
</div>
<md-divider class="push-top push-bottom"></md-divider>
<td-highlight lang="html">
<![CDATA[
<div layout-gt-xs="row">
<div flex-gt-xs="60">child</div>
<div flex-gt-xs="40">child</div>
</div>
]]>
</td-highlight>
</div>
</td-expansion-panel>
</div>
</td-layout-card-over>
</td-layout-nav>

Expand Down
3 changes: 3 additions & 0 deletions src/app/components/layouts/overview/overview.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
img {
height: auto;
width: 100%;
}
div[after-card] {
margin: 30px 8px 8px 8px;
}

0 comments on commit f151d59

Please sign in to comment.