gistfile1.scss

/*
  Responsive Pseudo-grid

  We define here the cols width that will be asigned to the containers.
  Include this mixins in the corresponding semantic container this way.

  .container {
    @include col-50(%3, %3);
  }

  Replace them by the corresponding ones in the mediaquerie's style sheet.

  USAGE:
  @include col-XX;        // Padding 0 both left and right
  @include col-50(%3);    // Same padding both sides
  @include col-50(%3, %0);// Margin left 3%, margin right 0%

*/

/*
  =========================
  Functions
  =========================
*/

/* @function col-calculate-w($total ,$pad-left, $pad-right) {
  @return $total - $pad-left - $pad-right;
}; */

/*
  =========================
  Base
  =========================
*/

@mixin col-calculation ($w, $pl, $pr) {
  @if $pr == '-1' {
    $pr : $pl;
  }
  width: $w - $pl - $pr;
  padding-left: $pl;
  padding-right: $pr;
  float: left;
}

/* 100% - - - - - - */

@mixin col-100 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (100%, $pad-left, $pad-right);
}

@mixin col-1-de-1 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-100 ($pad-left, $pad-right);
}

@mixin col-full ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-100 ($pad-left, $pad-right);
}

/* 50% - - - - - - */

@mixin col-50 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (50%, $pad-left, $pad-right);
}

@mixin col-1-de-2 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-50 ($pad-left, $pad-right);
}

@mixin col-half ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-50 ($pad-left, $pad-right);
}

/* 33% 66% - - - - - - */

@mixin col-33     ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (33.33%, $pad-left, $pad-right);
}
@mixin col-66     ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (66.66%, $pad-left, $pad-right);
}
@mixin col-1-de-3 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-33 ($pad-left, $pad-right);
}
@mixin col-2-de-3($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-66 ($pad-left, $pad-right);
}
@mixin col-third ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-33 ($pad-left, $pad-right);
}

/* 25% 75% - - - - - - */

@mixin col-25 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (25%, $pad-left, $pad-right);
}
@mixin col-75 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (75%, $pad-left, $pad-right);
}
@mixin col-1-de-4 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-25 ($pad-left, $pad-right);
}
@mixin col-3-de-4 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-75 ($pad-left, $pad-right);
}

/* 20% 40% 60% 80% - - - - - */

@mixin col-20 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (20%, $pad-left, $pad-right);
}
@mixin col-1-de-5 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-20 ($pad-left, $pad-right);
}
@mixin col-40 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (40%, $pad-left, $pad-right);
}
@mixin col-2-de-5 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-40 ($pad-left, $pad-right);
}
@mixin col-60 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (60%, $pad-left, $pad-right);
}
@mixin col-3-de-5 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-60 ($pad-left, $pad-right);
}
@mixin col-80 ($pad-left: 0%, $pad-right: '-1') {
  @include col-calculation (80%, $pad-left, $pad-right);
}
@mixin col-4-de-5 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-80 ($pad-left, $pad-right);
}

/* Other usefull % - - - - - */

@mixin col-1-de-6 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-calculation (16.66%, $pad-left, $pad-right);
}
@mixin col-1-de-12 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-calculation (8.33%, $pad-left, $pad-right);
}
@mixin col-5-de-12 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-calculation (41.66%, $pad-left, $pad-right);
}
@mixin col-7-de-12 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-calculation (58.33%, $pad-left, $pad-right);
}
@mixin col-11-de-12 ($pad-left: 0%, $pad-right: '-1') { //ALIAS
  @include col-calculation (91.66%, $pad-left, $pad-right);
}

/*
  =========================
  Margins / Paddings
  =========================
*/

@mixin no-pl { // Usually "first" col
  padding-left: 0;
}

@mixin no-pr {
  padding-right: 0;
}

/* Sample margin includes */

@mixin ml {
  margin-left: 10px;
}

@mixin mr {
  margin-right: 10px;
}



/* - - - - - - - - -

.sample-col-A {
  background:#666;
  @include col-25(5%);
}

.sample-col-B {
  background:#999;
  @include col-25(5%, 5%);
}

.sample-col-C {
  background:red;
  @include col-25();
}

.sample-col-D {
  background:green;
  @include col-25(0%, 10%);
}

*/