wocss-tools-layout

[DEPRECATED] wocss' layout mixins

Usage no npm install needed!

<script type="module">
  import wocssToolsLayout from 'https://cdn.skypack.dev/wocss-tools-layout';
</script>

README

This module is DEPRECATED

This module has been moved to the monorepo wocss (and renamed to @wocss/tools-layout)

LAYOUT

Tool

The wocss-tools-layout module contains a few mixins to help tame those layouts.

Install using npm:

$ npm install wocss-tools-layout --save

Usage

With a tool like webpack you can import this module writing:

@import '~wocss-tools-layout';

Mixins

Then you can use these mixins:

layout-center($max-width: $global-max-width, $padding-x: $global-spacing-unit)

Center the element.

.container {
  @include layout-center(1000px, false);
}

Result:

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  width: 100%;
}

layout-block($padding-x: $global-spacing-unit)

It makes an element a block.

.container {
  @include layout-block();
}

Result:

.container {
  display: block;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

Dependencies