Skip to content

Instantly share code, notes, and snippets.

@tsi

tsi/layout-mixin.scss

Last active August 29, 2015 14:01
Show Gist options
  • Save tsi/8884d751c42a0fe00b4e to your computer and use it in GitHub Desktop.
Save tsi/8884d751c42a0fe00b4e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tsi revised this gist Jun 5, 2014. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion layout-mixin.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@

    /////////////////////////////////////////////////
    //// Salsa style layout mixin. Simplified. ////
    /////////////////////////////////////////////////
  2. tsi revised this gist May 18, 2014. 1 changed file with 0 additions and 4 deletions.
    4 changes: 0 additions & 4 deletions layout-mixin.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,3 @@
    // ----
    // Sass (v3.2.19)
    // Compass (v0.12.6)
    // ----

    /////////////////////////////////////////////////
    //// Salsa style layout mixin. Simplified. ////
  3. tsi revised this gist May 18, 2014. 1 changed file with 0 additions and 52 deletions.
    52 changes: 0 additions & 52 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,52 +0,0 @@
    .simple {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    float: left;
    }

    .percent-pushed {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    }

    .percent-pulled {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    }

    .last-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    float: right;
    }

    .first-in-a-new-row {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    float: left;
    clear: both;
    }

    .fraction {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    float: left;
    }
  4. tsi renamed this gist May 18, 2014. 1 changed file with 0 additions and 0 deletions.
    0 SassMeister-input.scss → layout-mixin.scss
    View file
    File renamed without changes.
  5. tsi created this gist May 18, 2014.
    82 changes: 82 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    // ----
    // Sass (v3.2.19)
    // Compass (v0.12.6)
    // ----

    /////////////////////////////////////////////////
    //// Salsa style layout mixin. Simplified. ////
    /////////////////////////////////////////////////

    // See usage examples below.

    $flow: left !default;
    $opos: if($flow == left, right, left);

    // Compass is needed only for the box-sizing() mixin.
    @import "compass";

    @mixin layout($width, $position: false) {

    @include box-sizing(border-box);

    // Width (fraction/units)
    @if not unitless($width){ // arbitrary width (e.g. px/%/em etc.).
    width: $width;
    }
    @else if round($width) != $width { // fraction (e.g. 1/5).
    width: 100% * $width;
    }
    @else { // just a fallback.
    width: $width;
    }

    // Position (omega/row/fraction/columns/units)
    @if $position != omega {
    float: $flow; // normal float
    }
    @if $position == omega { // omega
    float: $opos;
    }

    @else if $position == row { // row
    clear: both;
    }
    @else if $position {
    margin: {
    #{$opos}: -100%;
    @if not unitless($width) { // has unit, arbitrary width
    #{$flow}: $position;
    }
    @else if round($position) != $position { // fraction
    #{$flow}: $position * 100%;
    }
    @else { // fallback
    #{$flow}: $position;
    }
    }
    }
    }

    .simple {
    @include layout(200px);
    }

    .percent-pushed {
    @include layout(50%, 50%);
    }

    .percent-pulled {
    @include layout(50%, 0);
    }

    .last-item {
    @include layout(200px, omega);
    }

    .first-in-a-new-row {
    @include layout(30%, row);
    }

    .fraction {
    @include layout(1/5);
    }
    52 changes: 52 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    .simple {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    float: left;
    }

    .percent-pushed {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 50%;
    }

    .percent-pulled {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    }

    .last-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 200px;
    float: right;
    }

    .first-in-a-new-row {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    float: left;
    clear: both;
    }

    .fraction {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 20%;
    float: left;
    }