# @wocss/tools-layout

> wocss' layout mixins

Latest version **2.2.3** (published 2019-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wocss/tools-layout
pnpm add @wocss/tools-layout
yarn add @wocss/tools-layout
bun add @wocss/tools-layout
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.3 |
| Published | 2019-07-28 |
| First published | 2019-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 3.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Gean Carlos |
| Maintainers | wochap |
| Keywords | bemit, scss, itcss, wocss |

## Links

- npm: https://www.npmjs.com/package/@wocss/tools-layout
- Repository: https://github.com/wocss/wocss
- Homepage: https://github.com/wocss/wocss/tree/master/packages/tools.layout#readme
- Issues: https://github.com/wocss/wocss/issues
- npm.io page: https://npm.io/package/@wocss/tools-layout

## Dependencies (1)

- [@wocss/settings-global](https://npm.io/package/@wocss/settings-global.md) ^1.3.2

## Recent versions

- 2.2.3 (latest) — 2019-07-28
- 2.2.2 — 2019-07-28

## README

# LAYOUT

> Tool

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

Install using npm:

```sh
$ npm install @wocss/tools-layout --save
```

## Usage

With a tool like [webpack](https://webpack.github.io/) you can import this module writing:

```scss
@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.

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

Result:

```css
.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.

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

Result:

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

## Dependencies

* [@wocss/settings-global](https://github.com/wocss/wocss/tree/master/packages/settings.global#readme)

---
_Source: https://npm.io/package/@wocss/tools-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._