flexify.scss

flexify.scss

/*
  .flexify should help me make flexbox grids without writing constantly
  the same stuff over and over again. This integrates flexbox properties directly
  in html, so you can write it like this:

  <div class="flexify" data-space-between data-align-center>
    <div>A</div>
    <div>B</div>
    <div C</div>
  </div>
 */

// ===== Define the 'parts' of the flexify construction
// ===== All parts are defined as independed extendables (%flexify-name { ... })
// ===== All parts inherit flexify extendables if it adapts the same characteristics
%flexify {
  display: flex;
  & > * {
    flex-basis: 100%;
  }
  &[data-distribute-between] { @extend %flexify-spread; } // <== will deprecate in favor of 'flexify-spread'
  &[data-flex-auto] { @extend %flexify-auto; }
  &[data-flex-column] { @extend %flexify-column; }
  &[data-flex-fill] { @extend %flexify-fill; }
  &[data-flex-center] { @extend %flexify-center; }
  &[data-flex-spread] { @extend %flexify-spread; }
}

// disables flex growing and shrinking
%flexify-fixed {
  flex-shrink: 0;
  flex-grow: 0;
}

// inherits flexify children as auto-width children
%flexify-auto {
  @extend %flexify;
  & > {
    flex-basis: auto;
  }
}

// defines a simple column-flex container
%flexify-column {
  @extend %flexify;
  flex-direction: column;
}

// make all children consume an evenly distributed space
%flexify-fill {
  @extend %flexify;
  justify-content: center;
  align-items: stretch;
}

// set flex children all in <center center> position
%flexify-center {
  @extend %flexify-auto;
  align-items: center;
  justify-content: space-around;
  // reset full width
  & > * {
    flex-basis: auto;
  }
}

%flexify-spread {
  @extend %flexify-center;
  justify-content: space-between;
}

// break down the flexify class from extendable!
.flexify {
  @extend %flexify;
}