# Nitro UI: Utility Align

Utility Align component for Nitro UI.

## Getting Started

Get latest version by installing via [NPM @nitro-ui/utility-align](https://www.npmjs.com/package/@nitro-ui/utility-align):

```sh
npm install @nitro-ui/utility-align
```

Include this stylesheet code into your site:

```html
<div class="u-align-left">u-align-left</div>
<div class="u-align-center">u-align-center</div>
<div class="u-align-right">u-align-right</div>



<div class="u-valign-top">u-valign-top</div>
<div class="u-valign-middle">u-valign-middle</div>
<div class="u-valign-bottom">u-valign-bottom</div>

<div class="u-align-left@portable">u-align-left@portable</div>
<div class="u-align-center@portable">u-align-center@portable</div>
<div class="u-align-right@portable">u-align-right@portable</div>

<div class="u-valign-top@portable">u-valign-top@portable</div>
<div class="u-valign-middle@portable">u-valign-middle@portable</div>
<div class="u-valign-bottom@portable">u-valign-bottom@portable</div>

<div class="u-align-left@mobile">u-align-left@mobile</div>
<div class="u-align-center@mobile">u-align-center@mobile</div>
<div class="u-align-right@mobile">u-align-right@mobile</div>

<div class="u-valign-top@mobile">u-valign-top@mobile</div>
<div class="u-valign-middle@mobile">u-valign-middle@mobile</div>
<div class="u-valign-bottom@mobile">u-valign-bottom@mobile</div>

<div class="u-center">u-center</div>
```

## Usage:

Example with `<div>` tag:

```html
<div class="u-align-left  u-align-center@portable">u-align-left</div>


<div class="o-tile">
    <div class="o-tile__item  u-valign-bottom  u-valign-middle@mobile">
        u-valign-bottom
    </div>
</div>


<div class="u-center">u-center</div>

```

## Development

To extends, develop or contribute to this component, you're required to fork our main [repository](https://github.com/icarasia/nitro-ui) and made a pull request.

### Development Requirements

Development tools required for this component are:

- [NodeJS](https://nodejs.org/en/)
- [Grunt CLI](https://gruntjs.com)
- [Ruby](https://www.ruby-lang.org/en/) (optional)
- [SASS](https://sass-lang.com) (optional)

Ruby and SASS are optional if you're fully using [node-sass](https://github.com/sass/node-sass) from npm for development.

### Development Setup

Run:

```sh
npm install
```

### Compile

Run:

```sh
grunt
```
---

# TODO

Nothing todo for now.

---

# CHANGELOG

All notable changes to this project will be documented in this file. **For now, let's keep TODO and CHANGELOG in README file. Keeping things simple.**

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [0.0.0-beta] - 2019-07-18
### Added
- Initial setup