Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(layout): reduce layout CSS size by reverting some of #11247 (#11331)
Browse files Browse the repository at this point in the history 
reduces unminified layout CSS size by ~77KB

Fixes #11000. Relates to #9546.
  • Loading branch information
@Splaktar @jelbourn
Splaktar authored and jelbourn committed Jun 19, 2018
1 parent 74d2445 commit 5e37b63
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 51 deletions.
8 changes: 4 additions & 4 deletions docs/app/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -869,10 +869,10 @@ table.md-css-table td p {

.layout_note {
font-size: 0.9em;
margin: -5px 40px 0px 20px;
color: rgb(1, 57, 114);
background-color: rgba(156, 204, 101,0.4);
padding: 20px;
margin: -5px 40px 0 20px;
color: rgb(1, 57, 114);
background-color: rgba(156, 204, 101,0.4);
padding: 20px;
}

.contributor_tables {
Expand Down
103 changes: 96 additions & 7 deletions docs/app/partials/layout-children.tmpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ <h3>Children within a Layout Container</h3>

<p>
To customize the size and position of elements in a layout <b>container</b>, use the
<code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes on the container's <u>child</u> elements:
<code>flex</code>, <code>flex-order</code>, and <code>flex-offset</code> attributes on the
container's <b>child</b> elements:
</p>

<docs-demo demo-title="Flex Directive" class="small-demo colorNested">
Expand All @@ -24,9 +25,10 @@ <h3>Children within a Layout Container</h3>
</docs-demo>

<p>
Add the <code>flex</code> directive to a layout's child element and the element will flex (grow or shrink) to fit
the area unused by other elements. <code>flex</code> defines how the element will adjust its size with respect to its
<u>parent</u> container and the other elements within the container.
Add the <code>flex</code> directive to a layout's child element and the element will flex
(grow or shrink) to fit the area unused by other elements. <code>flex</code> defines how the
element will adjust its size with respect to its <b>parent</b> container and the other elements
within the container.
</p>

<docs-demo demo-title="Flex Percent Values" class="small-demo colorNested-noPad">
Expand Down Expand Up @@ -73,16 +75,103 @@ <h3>Children within a Layout Container</h3>
flex 33% on mobile, <br/>and 66% on gt-sm devices.
</div>
<div flex-gt-sm="33" flex="66">
flex 66% on mobile, <br/>and 33% on gt-sm devices.
flex 66% on mobile, <br/>and 33% on gt-sm devices.
</div>
</div>
</demo-file>
</docs-demo>

<p>
You can specify multiple <code>flex</code> directives on the same element in order to create
flexible responsive behaviors across device sizes.
</p>
<p>
Please take care not to overlap these directives, for example:
<code>flex="100" flex-md="50" flex-gt-sm="25"</code>. In this example, there are two directives
that apply to "medium" devices (<code>50</code> and <code>25</code>).
</p>
<p>
The below example demonstrates how to use multiple <code>flex</code> directives overrides to
achieve a desirable outcome:
</p>

<docs-demo demo-title="Overriding Responsive Flex Directives" class="colorNested-noPad">
<demo-file name="index.html">
<div layout="row" layout-wrap>
<div flex="100" flex-gt-sm="33">
flex 100% on mobile, <br/>and 33% on gt-sm devices.
</div>
<div flex="100" flex-gt-sm="66">
flex 100% on mobile, <br/>and 66% on gt-sm devices.
</div>
<div flex="100" flex-md="50" flex-gt-md="25">
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
</div>
<div flex="100" flex-md="50" flex-gt-md="25">
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
</div>
<div flex="100" flex-md="50" flex-gt-md="25">
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
</div>
<div flex="100" flex-md="50" flex-gt-md="25">
flex 100% on mobile, 50% on md, and 25% on gt-md devices.
</div>
</div>
</demo-file>
</docs-demo>

<p>
When a responsive layout directive like <code>layout-gt-sm</code> is active, any flex directives
within that layout, that you want applied, should be active at the same time. This means that
the flex directives that match up with <code>layout-gt-sm</code> would be
<code>flex-gt-sm</code> and not just <code>flex</code>.
</p>
<p>
This example demonstrates what happens when the proper flex suffix is omitted. In this case, the
<code>flex="66"</code> directive is interpreted in context of the <code>layout="column"</code>
layout. This is most likely not desirable.
</p>

<docs-demo demo-title="Incorrect use of Flex Directives within Responsive Layouts"
class="small-demo colorNested-noPad">
<demo-file name="index.html">
<div layout="column" layout-gt-sm="row">
<!-- In order to work within a layout-gt-sm, the flex directive needs to match.
flex-gt-sm="33" will work when layout-gt-sm="row" is active", but flex="33" would
only apply when layout="column" is active. -->
<div flex-gt-sm="33">
column layout on mobile, <br/>flex 33% on gt-sm devices.
</div>
<!-- In this case, we failed to use the gt-sm suffix with the flex directive,
resulting in undesirable behavior. -->
<div flex="66">
[flex 66%]
</div>
</div>
</demo-file>
</docs-demo>

<p>
Here's the same example as above with the correct <code>flex-gt-sm="66"</code> directive:
</p>

<docs-demo demo-title="Use of Responsive Flex Directives within Responsive Layouts"
class="small-demo colorNested-noPad">
<demo-file name="index.html">
<div layout="column" layout-gt-sm="row">
<div flex-gt-sm="33">
column layout on mobile, <br/>flex 33% on gt-sm devices.
</div>
<div flex-gt-sm="66">
column layout on mobile, <br/>flex 66% on gt-sm devices.
</div>
</div>
</demo-file>
</docs-demo>

<p>
See the <a href="layout/options">layout options page</a> for more information on responsive flex directives like
<code>hide-sm</code> and <code>layout-wrap</code> used in the above examples.
See the <a href="layout/options">layout options page</a> for more information on responsive flex
directives like <code>hide-sm</code> and <code>layout-wrap</code> used in the above examples.
</p>

<br/>
Expand Down
45 changes: 5 additions & 40 deletions src/core/style/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,30 +168,13 @@
// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-height: 0; }
}

@if ($name != '') {
.layout#{$name}-row > .flex-#{$i * 5} {
flex: 1 1 100%;
max-width: #{$value};
max-height: 100%;
box-sizing: border-box;

// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-width: 0; }
}

.layout#{$name}-column > .flex-#{$i * 5} {
flex: 1 1 100%;
max-width: 100%;
max-height: #{$value};
box-sizing: border-box;

// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-height: 0; }
}
}
}

@if ($name == '') {
.flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
.flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
}

.layout-row {
> .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
Expand All @@ -217,24 +200,6 @@
// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-height: 0; }
}

@if ($name != '') {
.layout#{$name}-row {
> .flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
> .flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }

// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-width: 0; }
}

.layout#{$name}-column {
> .flex-33 { flex: 1 1 100%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
> .flex-66 { flex: 1 1 100%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }

// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-height: 0; }
}
}
}

@mixin layout-align-for-name($suffix: null) {
Expand Down

0 comments on commit 5e37b63

Please sign in to comment.