# bulma-spacing

> Missing spacing classes for Bulma ecosystem

Latest version **2.1.5** (published 2020-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install bulma-spacing
pnpm add bulma-spacing
yarn add bulma-spacing
bun add bulma-spacing
```

## 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.1.5 |
| Published | 2020-11-24 |
| First published | 2020-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 202.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Kaan Gökdemir |
| Maintainers | kaangokdemir |
| Keywords | bulma, bulma-spacing, atomic css, atomic-css, atomic, css, sass, flexbox, responsive, framework, functional, spacing, margin, padding |

## Links

- npm: https://www.npmjs.com/package/bulma-spacing
- Repository: https://github.com/kaangokdemir/bulma-spacing
- Homepage: https://github.com/kaangokdemir/bulma-spacing#readme
- Issues: https://github.com/kaangokdemir/bulma-spacing/issues
- npm.io page: https://npm.io/package/bulma-spacing

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

- 2.1.5 (latest) — 2020-11-24
- 2.1.4 — 2020-09-07
- 2.1.3 — 2020-09-07
- 2.1.2 — 2020-08-16
- 2.1.1 — 2020-08-04
- 2.1.0 — 2020-06-20
- 2.0.4 — 2020-05-31
- 2.0.3 — 2020-05-26
- 2.0.2 — 2020-05-26
- 2.0.1 — 2020-05-26
- 2.0.0 — 2020-05-24
- 1.2.1 — 2020-05-22
- 1.2.0 — 2020-04-19
- 1.1.0 — 2020-04-19
- 1.0.2 — 2020-03-05
- … 3 more at https://npm.io/package/bulma-spacing/versions

## README

# Bulma Spacing


> Missing Bulma spacing library without JavaScript dependency for pixel perfect designs. You can use library with or without Bulma 

[![NPM](https://nodei.co/npm/bulma-spacing.png?stars&downloads)](https://nodei.co/npm/bulma-spacing/)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![npm package](https://img.shields.io/npm/v/bulma-spacing.svg)](https://www.npmjs.org/package/bulma-spacing) [![downloads](https://img.shields.io/npm/dt/bulma-spacing.svg)](https://www.npmjs.com/package/bulma-spacing) [![size](https://img.shields.io/bundlephobia/minzip/bulma-spacing)](https://www.npmjs.com/package/bulma-spacing)

<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600"></a>
<a href="https://github.com/kaangokdemir/bulma-spacing"><img src="https://bulma.io/images/extensions/bulma-spacing.png" alt="Bulma Spacing" style="max-width:100%;" width="600"></a>

> Note: Bulma released missing spacing helpers with version [0.9.0.](https://bulma.io/documentation/helpers/spacing-helpers/) (June 2020) If your project is using Bulma and if you think generic classes should be enough, it is suggested to use official spacing classes. However you may still consider to use this library with pixel perfect needed designs, with your pre 0.9.0 Bulma projects or with non-Bulma projects as well. (since this is a zero dependency package). 

## Installation and Usage

### With JavaScript (Recommended)

#### Install Module First

```bash
# Yarn
yarn add bulma-spacing
```
```bash
# NPM
npm i bulma-spacing
```
#### Then just import in your .js file

```javascript
import 'bulma-spacing'
```


### Without JavaScript

#### Add that line at the end of your head element on your HTML file

```html
<link rel="stylesheet" href="https://unpkg.com/bulma-spacing">
```

## How to use

### Keywords
```css
properties: margin padding
directions: top, right, bottom, left
values(px): -100, -99, -98 ... -1 0 1 2 3 ... 98 99 100 (-100 to 100)
```

### For positive numbers

```css
.has-{property}-{direction}-{value}
```
```
.has-margin-top-24 // margin-top: 24px !important
.has-padding-right-6 // padding-right: 6px !important
.has-margin-left-0 // margin-left: 0px !important
```
### For negative numbers

```css
.has-{property}-{direction}-minus-{value}
```
**Note:** Negative padding is not supported by CSS
```
.has-margin-top-minus-100 // margin-top: -100px !important
.has-margin-bottom-minus-17 // margin-bottom: -17px !important
.has-margin-right-minus-33 // margin-right: -33px !important
```


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request

### Contributors

Kaan Gökdemir - Maintainer ([@kaangokdemir](https://twitter.com/kaangokdemir)) - [kaangokdemir.com](https://kaangokdemir.com) 

### Changelog

See the [CHANGELOG.md](https://github.com/kaangokdemir/bulma-spacing/blob/master/CHANGELOG.md) file

### License

MIT

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