# tree-layout

> A simple layout abstraction.

Latest version **0.5.0** (published 2015-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install tree-layout
pnpm add tree-layout
yarn add tree-layout
bun add tree-layout
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2015-04-24 |
| First published | 2015-02-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ilia Kolev |
| Maintainers | iliakolev |
| Keywords | css, oocss |

## Links

- npm: https://www.npmjs.com/package/tree-layout
- Repository: https://github.com/treeframework/object.layout
- Issues: https://github.com/treeframework/object.layout/issues
- npm.io page: https://npm.io/package/tree-layout

## Dependencies (2)

- [tree-defaults](https://npm.io/package/tree-defaults.md) ~0.2.5
- [tree-functions](https://npm.io/package/tree-functions.md) ~0.2.5

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2015-04-24
- 0.4.0 — 2015-04-23
- 0.3.13 — 2015-02-11

## README

# Layout

The `layout` system is a powerful, flexible, highly advanced evolution of the
traditional grid system. It is based on
[csswizardry-grids](http://csswizardry.com/csswizardry-grids/).

## Dependencies

The `layout` object depends on two other modules:

* [settings.defaults](https://github.com/treeframework/settings.defaults)
* [tools.functions](https://github.com/treeframework/tools.functions)


If you install the `layout` object using Bower, you will get these dependencies 
at the same time. If not using Bower, please be sure to install and `@import` 
these dependencies in the relevant way.

## Installation

You can install `layout` module via Bower,  npm, or copy and paste.

### Install using Bower:

```sh
$ bower install tree-layout --save
```

Once installed, `@import` into your project in its Object layer:

```scss
@import "bower_components/tree-layout/object.layout";
```

### Install using npm

```sh
$ npm install tree-layout --save
```
### Install via file download

The least recommended option for installation is to simply download
`_object.layout.scss` into your project and `@import` it into your project in 
its Objects layer.

## Usage

Basic usage of the `layout` object uses the required classes:

```html
<div class="o-layout">
    <div class="o-layout__item  u-1/2">...</div><!--
 --><div class="o-layout__item  u-1/2">...</div>
</div>
```

**Note the empty HTML comments.** These are to remove whitespace caused by using
`inline-block`.

## Options

Other, optional classes can supplement the required base classes:

* `.o-layout--[tiny|small|large|huge]`: alter the gutter between layout items.
* `.o-layout--flush`: layouts with no gutters.
* `.o-layout--rev`: reverse rendered order of layout items.
* `.o-layout--[middle|bottom]`: align layout items to the middles or bottoms of each other.
* `.o-layout--right`: make the layout items fill up from the right hand side.
* `.o-layout--center`: make the layout item fill up from the center outward.
* `.o-layout--auto`: cause layout items to take up a non-explicit amount of width.

For example:

```html
<div class="o-layout  o-layout--middle">
    <div class="o-layout__item  u-1/2">I’m in the middle!</div><!--
 --><div class="o-layout__item  u-1/2">I’m in the middle!</div>
</div>
```

## Credits

* **[inuitcss](https://github.com/inuitcss)** Powerful, Sass-based, OOCSS
framework designed with scalability and performance in mind.

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