# @uxland/uxl-style-utilities

> uxl-style-utilities

Latest version **1.0.17** (published 2019-12-11) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @uxland/uxl-style-utilities
pnpm add @uxland/uxl-style-utilities
yarn add @uxland/uxl-style-utilities
bun add @uxland/uxl-style-utilities
```

## 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 | 1.0.17 |
| Published | 2019-12-11 |
| First published | 2019-01-30 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | UXLand |
| Maintainers | avizcaino, uxland-admin |
| Keywords | style, sass, scss, css, polymer |

## Links

- npm: https://www.npmjs.com/package/@uxland/uxl-style-utilities
- Repository: https://github.com/uxland/uxl-style-utilities
- Issues: https://github.com/uxland/uxl-style-utilities/issues
- npm.io page: https://npm.io/package/@uxland/uxl-style-utilities

## 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

- 1.0.17 (latest) — 2019-12-11
- 1.0.16 — 2019-12-11
- 1.0.15 — 2019-08-26
- 1.0.14 — 2019-08-26
- 1.0.13 — 2019-08-21
- 1.0.12 — 2019-08-21
- 1.0.11 — 2019-08-21
- 1.0.10 — 2019-01-30

## README

# UXL Style Utilities
Custom style utilities for Polymer 3

```html
@import "@uxland/uxl-style-utilities/...";
```

## Installation
Run the following command in your project console
```
$ npm i @uxland-admin/uxl-style-utilities
```

## Usage
Add import statement to SCSS style file

Example:
```
@import "@uxland/uxl-style-utilities/flex-layout-styles"
@import "@uxland/uxl-style-utilities/uxl-units-styles"
@import "@uxland/uxl-style-utilities/uxl-mediaqueries-styles"
```

## Available `uxl-style-utilities` files:

`flex-layout-styles`: Flex layout

`uxl-units-styles`: Custom UXL units

`uxl-mediaqueries-styles`: Custom UXL Media queries

####UXL Media Queries
#####SASS Variables
The following custom properties and mixins are available for styling:

| Variable                               | Description                                          | Default             |
| ---------------------------------------------- | ---------------------------------------------------- | ------------------- |
| `$uxl-mediaqueries-phone`                     | Max Width Breakpoint Mobile phone             | `599px`   |
| `$uxl-mediaqueries-tablet`                    | Min Width Breakpoint Tablet                   | `600px`   |
| `$uxl-mediaqueries-tablet-landscape`          | Min Width Breakpoint Tablet landscape view    | `900px`   |
| `$uxl-mediaqueries-desktop`                   | Min Width Breakpoint Desktop view             | `1200px`  |
| `$uxl-mediaqueries-desktop-hd`                | Min Width Breakpoint Desktop HD view          | `1800px`  |

#####SASS Mixins
The following custom properties and mixins are available for styling:

| Mixin Name                              | Description                                          | Use             |
| ---------------------------------------------- | ---------------------------------------------------- | ------------------- |
| `phone`                                       | Use for Phone styles              | `@include phone {...}`              |
| `tablet`                                      | Use from Tablet styles            | `@include tablet {...}`              |
| `tablet-landscape`                            | Use from Tablet Landscape styles  | `@include tablet-landscape {...} `         |
| `desktop`                                     | Use from Desktop styles           | `@include desktop {...} `         |
| `desktop-hd`                                  | Use from Desktop HD styles        | `@include desktop-hd {...}`         |


#####In a SCSS file
```
div {
    @include phone {
        background-color: red;
        ...
    }
    @include tablet {
        background-color: blue;
        ...
    }
    @include tablet-landscape {
        background-color: grey;
        ...
    }
    @include desktop {
        background-color: orange;
        ...
    }
    @include desktop-hd {
        background-color: green;
        ...
    }
}
```

---
_Source: https://npm.io/package/@uxland/uxl-style-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._