Coglayouts

Learn more

http://cognition.happycog.com/article/autolayout

How to install

With yarn do:

yarn add coglayouts

With npm do:

npm install -g coglayouts

Usage

HTML

<section class="layout-split-2--sidebar">
  <main class="column">
  ...
  </main>
  <aside class="column">
  ...
  </aside>
</section>

SASS

@import 'node_modules/dist/coglayouts';

Custom Gutter

@import 'node_modules/dist/coglayouts';
// This line below will overwrite the default gutter of 20px;
$autolayoutDefaultGutter: 100px;

SASS Module

.layout-split-2 {
  @include autolayout('|-[column]-[column]-|');
  &--sidebar {
    @include autolayout('|-[column(70%)]-[column(30%)]-|');
  }
}

Example

Codepen Example