# css-shortcut

> Package of shortened css properties for small projects

Latest version **1.2.0** (published 2023-04-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install css-shortcut
pnpm add css-shortcut
yarn add css-shortcut
bun add css-shortcut
```

## 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.2.0 |
| Published | 2023-04-18 |
| First published | 2023-03-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 43.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | bondarkoveg |
| Maintainers | bondarkoveg |
| Keywords | css-shortcut, css, scss, tailwind |

## Links

- npm: https://www.npmjs.com/package/css-shortcut
- Repository: https://github.com/bondarkoff/css-shortcut
- Homepage: https://github.com/bondarkoff/css-shortcut#readme
- Issues: https://github.com/bondarkoff/css-shortcut/issues
- npm.io page: https://npm.io/package/css-shortcut

## Dependencies (5)

- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [sass](https://npm.io/package/sass.md) ^1.62.0
- [gulp-sass](https://npm.io/package/gulp-sass.md) ^5.1.0
- [node-sass](https://npm.io/package/node-sass.md) ^8.0.0
- [gulp-rename](https://npm.io/package/gulp-rename.md) ^2.0.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2023-04-18
- 1.1.9 — 2023-04-18
- 1.1.8 — 2023-04-18
- 1.1.7 — 2023-04-18
- 1.1.6 — 2023-04-17
- 1.1.5 — 2023-04-17
- 1.1.4 — 2023-04-17
- 1.1.3 — 2023-04-13
- 1.1.2 — 2023-04-13
- 1.1.1 — 2023-04-12
- 1.1.0 — 2023-04-12
- 1.0.9 — 2023-04-12
- 1.0.7 — 2023-04-12
- 1.0.6 — 2023-04-12
- 1.0.5 — 2023-03-16
- … 5 more at https://npm.io/package/css-shortcut/versions

## README

[![BuyMeACoffee](https://user-images.githubusercontent.com/99820593/232435884-10ad52e3-a7e6-4b08-9053-9f261f6133fd.png)](https://www.buymeacoffee.com/bondarkoveg)

### if you would like to support the development of the project, you can [Donate](https://www.buymeacoffee.com/bondarkoveg)

## Install

NPM: `npm install css-shortcut`

YARN: `yarn add css-shortcut`

## Usage

Install package with NPM or Yarn.

### SASS/SCSS import

Open the main style file and import at the beginning `css-shortcut` from `node-modules` folder:
`@import 'node_modules/css-shortcut/index.min.css';`

### React import

Open the main react file and at the beginning type `import 'css-shortcut'`

### How To Use

Side => abbreviation:

-   `left` => `l`
-   `right` => `r`
-   `top` => `t`
-   `bottom` => `b`

### For Example:

| Class               | Value                                                         |
| ------------------- | ------------------------------------------------------------- |
| `mr-12 mb-41`       | `margin-right: 12px; margin-bottom: 41px;`                    |
| `m-25`              | `margin: 25px;`                                               |
| `p-50`              | `padding: 50px;`                                              |
| `pr-10 mt-15 mb-15` | `padding-right: 10px; margin-top: 15px; margin-bottom: 15px;` |

### Margin

Margin from 1 to 50 pixels.

| Class  | Value             |
| ------ | ----------------- |
| m\*-1  | margin-\*: 1px;   |
| m\*-2  | margin-\*: 2px;   |
| m\*-3  | margin-\*: 3px;   |
| m\*-4  | margin-\*: 4px;   |
| m\*-5  | margin-\*: 5px;   |
| m\*-6  | margin-\*: 6px;   |
| m\*-7  | margin-\*: 7px;   |
| m\*-8  | margin-\*: 8px;   |
| m\*-9  | margin-\*: 9px;   |
| m\*-10 | margin-\*: 10px;  |
| etc.   | etc. (up to 50px) |

### Padding

Padding from 1 to 50 pixels.

| Class  | Value             |
| ------ | ----------------- |
| p\*-1  | padding-\*: 1px;  |
| p\*-2  | padding-\*: 2px;  |
| p\*-3  | padding-\*: 3px;  |
| p\*-4  | padding-\*: 4px;  |
| p\*-5  | padding-\*: 5px;  |
| p\*-6  | padding-\*: 6px;  |
| p\*-7  | padding-\*: 7px;  |
| p\*-8  | padding-\*: 8px;  |
| p\*-9  | padding-\*: 9px;  |
| p\*-10 | padding-\*: 10px; |
| etc.   | etc. (up to 50px) |

### Top, right, bottom, left

Top, right, bottom, left from 0 to 50 in pixels.

| Class     | Value         |
| --------- | ------------- |
| top-0     | top: 0px;     |
| top-2     | top: 2px;     |
| top-50    | top: 50px;    |
| right-0   | right: 0px;   |
| right-2   | right: 2px;   |
| right-50  | right: 50px;  |
| left-0    | left: 0px;    |
| left-2    | left: 2px;    |
| left-50   | left: 50px;   |
| bottom-0  | bottom: 0px;  |
| bottom-2  | bottom: 2px;  |
| bottom-50 | bottom: 50px; |
| etc.      | etc.          |

Top, right, bottom, left in percentage 0 to 100 in 10 steps.

| Class       | Value         |
| ----------- | ------------- |
| top-p0      | top: 0%;      |
| top-p20     | top: 20%;     |
| top-p100    | top: 100%;    |
| right-p0    | right: 0%;    |
| right-p20   | right: 20%;   |
| right-p100  | right: 100%;  |
| bottom-p0   | bottom: 0%;   |
| bottom-p20  | bottom: 20%;  |
| bottom-p100 | bottom: 100%; |
| left-p0     | left: 0%;     |
| left-p20    | left: 20%;    |
| left-p100   | left: 100%;   |
| etc.        | etc.          |

### For Example:

| Class                      | Value                                                         |
| -------------------------- | ------------------------------------------------------------- |
| `top-p50 right-p100`       | `top: 50%; right: 100%;`                                      |
| `bottom-p0`                | `bottom: 0%;`                                                 |
| `left-50`                  | `left: 50px;`                                                 |
| `top-p70 left-15 bottom-1` | `padding-right: 10px; margin-top: 15px; margin-bottom: 15px;` |

### Flex, display

| Class      | Value                           |
| ---------- | ------------------------------- |
| d-inflex   | display: inline-flex;           |
| d-flex     | display: flex;                  |
| d-block    | display: block;                 |
| jcsb       | justify-content: space-between; |
| jcsa       | justify-content: space-around;  |
| jcc        | justify-content: center;        |
| jcse       | justify-content: space-evenly;  |
| aic        | align-items: center;            |
| aie        | align-items: flex-end;          |
| ais        | align-items: flex-start;        |
| flex-col   | flex-direction: column;         |
| flex-row   | flex-direction: row;            |
| flex-wrap  | flex-wrap: wrap;                |
| flex-auto  | flex: 1 1 auto;                 |
| flex       | flex: 1;                        |
| m-auto     | margin: auto;                   |
| tac        | text-align: center;             |
| pos-r      | position: relative;             |
| pos-a      | position: absolute;             |
| pos-static | position: static;               |
| pos-sticky | position: sticky;               |

### Text

| Class | Value                       |
| ----- | --------------------------- |
| tac   | text-align: center;         |
| ttc   | text-transform: capitalize; |
| ttu   | text-transform: uppercase;  |
| ttl   | text-transform: lowercase;  |
| tdn   | text-decoration: none;      |
| tdu   | text-decoration: underline; |
| white | color: #fff;                |
| black | color: #000;                |

### Font-Weight

| Class    | Value                |
| -------- | -------------------- |
| fw100    | font-weight: 100;    |
| fw200    | font-weight: 200;    |
| fw300    | font-weight: 300;    |
| fw400    | font-weight: 400;    |
| fw500    | font-weight: 500;    |
| fw600    | font-weight: 600;    |
| fw700    | font-weight: 700;    |
| fw800    | font-weight: 800;    |
| fw900    | font-weight: 900;    |
| fwbold   | font-weight: bold;   |
| fwnormal | font-weight: normal; |

### Opacity

| Class | Value         |
| ----- | ------------- |
| op-1  | opacity: 0.1; |
| op-2  | opacity: 0.2; |
| op-3  | opacity: 0.3; |
| op-4  | opacity: 0.4; |
| op-5  | opacity: 0.5; |
| op-6  | opacity: 0.6; |
| op-7  | opacity: 0.7; |
| op-8  | opacity: 0.8; |
| op-9  | opacity: 0.9; |
| op-10 | opacity: 1;   |

### Z-index

Z-index from 0 to 5.

| Class | Value       |
| ----- | ----------- |
| z-0   | z-index: 0; |
| z-1   | z-index: 1; |
| z-2   | z-index: 2; |
| z-3   | z-index: 3; |
| z-4   | z-index: 4; |
| z-5   | z-index: 5; |

### Other

| Class | Value           |
| ----- | --------------- |
| c-p   | cursor: pointer |

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