Skip to content

Instantly share code, notes, and snippets.

@renatodeleao

renatodeleao/o.data-layout.scss

Last active April 6, 2017 22:51
Show Gist options
  • Save renatodeleao/d844cd35cce9108f2ff7750bb6a1eec2 to your computer and use it in GitHub Desktop.
Save renatodeleao/d844cd35cce9108f2ff7750bb6a1eec2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. renatodeleao revised this gist Aug 5, 2016. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion o.data-layout.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    ```SCSS
    [data-layout]{
    position: relative;
    display: flex;
  2. renatodeleao renamed this gist Aug 5, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions flex controlled by data-attr → o.data-layout.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ```SCSS
    [data-layout]{
    position: relative;
    display: flex;
  3. renatodeleao created this gist Aug 5, 2016.
    35 changes: 35 additions & 0 deletions flex controlled by data-attr
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    [data-layout]{
    position: relative;
    display: flex;
    }

    //contains keyowords
    [data-layout*="vertical"] { flex-direction: column; }
    [data-layout*="wrap"] { flex-wrap: wrap; }

    [data-layout*="between"] { justify-content: space-between; }
    [data-layout*="center"] { justify-content: center; }
    [data-layout*="around"] { justify-content: space-around; }
    [data-layout*="end"] { justify-content: flex-end }

    [data-layout*="baseline"] { align-items: baseline;}
    [data-layout*="top"] { align-items: flex-start; }
    [data-layout*="bottom"] { align-items: flex-end; }
    [data-layout*="middle"] { align-items: center; }

    [class*="--expander"]{
    flex: 1;
    }

    [class*="--breaker"]{
    flex: 1 1 100%;
    }

    [class*="--shy-left"]{
    margin-left: auto;
    }


    [class*="--shy-right"]{
    margin-left: auto;
    }