Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

wocss/tools.layout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

[DEPRECATED] wocss layout mixins

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages