Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
layout: attribute to class selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulflo150 @ThomasBurleson
paulflo150 authored and ThomasBurleson committed Aug 22, 2015
1 parent 5207164 commit 372d911
Show file tree
Hide file tree
Showing 4 changed files with 280 additions and 104 deletions.
4 changes: 2 additions & 2 deletions gulp/config.js
View file
Expand Up @@ -29,10 +29,10 @@ module.exports = {
'src/core/style/mixins.scss',
'src/core/style/structure.scss',
'src/core/style/typography.scss',
'src/core/style/layout.scss'
'src/core/services/layout/layout.scss'
],
scssStandaloneFiles: [
'src/core/style/layout.scss'
'src/core/services/layout/layout.scss'
],
paths: 'src/{components,services}/**',
outputDir: 'dist/',
Expand Down
185 changes: 83 additions & 102 deletions src/core/style/layout.scss → src/core/services/layout/layout.scss
View file
@@ -1,15 +1,4 @@
// Responsive attributes
// ------------------------------

// hide means hide everywhere
/* Sizes:
0 <= size < 600 Phone
600 <= size < 960 Tablet
960 <= size < 1200 Tablet-Landscape
1200 <= size PC
*/

[layout] {
.layout {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -19,93 +8,85 @@
display: flex;
}

[layout=column] {
.layout-column {
flex-direction: column;
-webkit-flex-direction: column;
}

[layout=row] {
.layout-row {
flex-direction: row;
-webkit-flex-direction: row;
}

[layout-padding] > [flex-sm],
[layout-padding] > [flex-lt-md]
.layout-padding > .flex-sm,
.layout-padding > .flex-lt-md
{
padding: $layout-gutter-width / 4;
}
[layout-padding],
[layout-padding] > [flex],
[layout-padding] > [flex-gt-sm],
[layout-padding] > [flex-md],
[layout-padding] > [flex-lt-lg]
.layout-padding,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md,
.layout-padding > .flex-lt-lg
{
padding: $layout-gutter-width / 2;
}
[layout-padding] > [flex-gt-md],
[layout-padding] > [flex-lg]
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg
{
padding: $layout-gutter-width / 1;
}


[layout-margin] > [flex-sm],
[layout-margin] > [flex-lt-md]
.layout-margin > .flex-sm,
.layout-margin > .flex-lt-md
{
margin: $layout-gutter-width / 4;
}
[layout-margin],
[layout-margin] > [flex],
[layout-margin] > [flex-gt-sm],
[layout-margin] > [flex-md],
[layout-margin] > [flex-lt-lg] {
.layout-margin,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md,
.layout-margin > .flex-lt-lg {
margin: $layout-gutter-width / 2;
}
[layout-margin] > [flex-gt-md],
[layout-margin] > [flex-lg]
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg
{
margin: $layout-gutter-width / 1;
}



[layout-wrap] {
.layout-wrap {
flex-wrap: wrap;
}

[layout-fill] {
.layout-fill {
margin: 0;
min-height: 100%;
width: 100%;
}
@-moz-document url-prefix() {
[layout-fill] {
margin: 0;
width: 100%;
min-height: auto;
height: inherit;
}
}

@mixin flex-order-for-name($suffix: null) {
$selector: 'flex-order';
@if $suffix != null {
$selector: 'flex-order-#{$suffix}';
}
[#{$selector}="0"] { order: 0; }
[#{$selector}="1"] { order: 1; }
[#{$selector}="2"] { order: 2; }
[#{$selector}="3"] { order: 3; }
[#{$selector}="4"] { order: 4; }
[#{$selector}="5"] { order: 5; }
[#{$selector}="6"] { order: 6; }
[#{$selector}="7"] { order: 7; }
[#{$selector}="8"] { order: 8; }
[#{$selector}="9"] { order: 9; }
.#{$selector}-0 { order: 0; }
.#{$selector}-1 { order: 1; }
.#{$selector}-2 { order: 2; }
.#{$selector}-3 { order: 3; }
.#{$selector}-4 { order: 4; }
.#{$selector}-5 { order: 5; }
.#{$selector}-6 { order: 6; }
.#{$selector}-7 { order: 7; }
.#{$selector}-8 { order: 8; }
.#{$selector}-9 { order: 9; }
}

@mixin layout-for-name($name) {
[layout-#{$name}] {
.layout-#{$name} {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
Expand All @@ -114,10 +95,10 @@
display: -ms-flexbox;
display: flex;
}
[layout-#{$name}=column] {
.layout-#{$name}-column {
flex-direction: column;
}
[layout-#{$name}=row] {
.layout-#{$name}-row {
flex-direction: row;
}
}
Expand All @@ -128,14 +109,14 @@
$offsetName: 'offset-#{$name}';
}
@for $i from 1 through 19 {
[#{$offsetName}="#{$i * 5}"] {
.#{$offsetName}-#{$i * 5} {
margin-left: #{$i * 5 + '%'};
}
}
[#{$offsetName}="33"], [#{$offsetName}="34"] {
.#{$offsetName}-33, .#{$offsetName}-34 {
margin-left: 33.33%;
}
[#{$offsetName}="66"], [#{$offsetName}="67"] {
.#{$offsetName}-66, .#{$offsetName}-67 {
margin-left: 66.66%;
}
}
Expand All @@ -146,45 +127,45 @@
$flexName: 'flex-#{$name}';
}

[#{$flexName}] {
.#{$flexName} {
box-sizing: border-box;
flex: 1;
}


// (0-20) * 5 = 0-100%
@for $i from 0 through 20 {
[#{$flexName}="#{$i * 5}"] {
.#{$flexName}-#{$i * 5} {
flex: 0 0 #{$i * 5 + '%'};
}
[layout="row"] > [#{$flexName}="#{$i * 5}"] {
.layout-row > .#{$flexName}-#{$i * 5} {
max-width: #{$i * 5 + '%'};
}
[layout="column"] > [#{$flexName}="#{$i * 5}"] {
.layout-column > .#{$flexName}-#{$i * 5} {
max-height: #{$i * 5 + '%'};
}
}

[#{$flexName}="33"], [#{$flexName}="34"] {
.#{$flexName}-33, .#{$flexName}-34 {
flex: 0 0 33.33%;
}
[#{$flexName}="66"], [#{$flexName}="67"] {
.#{$flexName}-66, .#{$flexName}-67 {
flex: 0 0 66.66%;
}

[layout="row"] {
> [#{$flexName}="33"], > [#{$flexName}="34"] {
.layout-row {
> .#{$flexName}-33, > .#{$flexName}-34 {
max-width: 33.33%;
}
> [#{$flexName}="66"], > [#{$flexName}="67"] {
> .#{$flexName}-66, > .#{$flexName}-67 {
max-width: 66.66%;
}
}
[layout="column"] {
> [#{$flexName}="33"], > [#{$flexName}="34"] {
.layout-column {
> .#{$flexName}-33, > .#{$flexName}-34 {
max-height: 33.33%;
}
> [#{$flexName}="66"], > [#{$flexName}="67"] {
> .#{$flexName}-66, > .#{$flexName}-67 {
max-height: 66.66%;
}
}
Expand All @@ -203,34 +184,34 @@
}

// Main Axis Center
[#{$name}="center"], //stretch
[#{$name}="center center"],
[#{$name}="center start"],
[#{$name}="center end"] {
.#{$name}-center, //stretch
.#{$name}-center-center,
.#{$name}-center-start,
.#{$name}-center-end {
justify-content: center;
}

// Main Axis End
[#{$name}="end"], //stretch
[#{$name}="end center"],
[#{$name}="end start"],
[#{$name}="end end"] {
.#{$name}-end, //stretch
.#{$name}-end-center,
.#{$name}-end-start,
.#{$name}-end-end {
justify-content: flex-end;
}

// Main Axis Space Around
[#{$name}="space-around"], //stretch
[#{$name}="space-around center"],
[#{$name}="space-around start"],
[#{$name}="space-around end"] {
.#{$name}-space-around, //stretch
.#{$name}-space-around-center,
.#{$name}-space-around-start,
.#{$name}-space-around-end {
justify-content: space-around;
}

// Main Axis Space Between
[#{$name}="space-between"], //stretch
[#{$name}="space-between center"],
[#{$name}="space-between start"],
[#{$name}="space-between end"] {
.#{$name}-space-between, //stretch
.#{$name}-space-between-center,
.#{$name}-space-between-start,
.#{$name}-space-between-end {
justify-content: space-between;
}

Expand All @@ -241,29 +222,29 @@
// ------------------------------

// Cross Axis Center
[#{$name}="center center"],
[#{$name}="start center"],
[#{$name}="end center"],
[#{$name}="space-between center"],
[#{$name}="space-around center"] {
.#{$name}-center-center,
.#{$name}-start-center,
.#{$name}-end-center,
.#{$name}-space-between-center,
.#{$name}-space-around-center {
align-items: center;
}

// Cross Axis Start
[#{$name}="center start"],
[#{$name}="start start"],
[#{$name}="end start"],
[#{$name}="space-between start"],
[#{$name}="space-around start"] {
.#{$name}-center-start,
.#{$name}-start-start,
.#{$name}-end-start,
.#{$name}-space-between-start,
.#{$name}-space-around-start {
align-items: flex-start;
}

// Cross Axis End
[#{$name}="center end"],
[#{$name}="start end"],
[#{$name}="end end"],
[#{$name}="space-between end"],
[#{$name}="space-around end"] {
.#{$name}-center-end,
.#{$name}-start-end,
.#{$name}-end-end,
.#{$name}-space-between-end,
.#{$name}-space-around-end {
align-items: flex-end;
}

Expand Down Expand Up @@ -365,4 +346,4 @@
@include layout-for-name(gt-lg);
@include offset-for-name(gt-lg);
@include flex-properties-for-name(gt-lg);
}
}

3 comments on commit 372d911

@DmitryEfimenko
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ThomasBurleson I'm also interested to know why change from attributes to classes. Don't really mind the change, just curious.

@ThomasBurleson
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plz read my response on Google Groups.

@yigaldviri
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link to @ThomasBurleson response.

Please sign in to comment.