https://github.com/kaangokdemir/bulma-spacing

Missing spacing classes for Bulma ecosystem
https://github.com/kaangokdemir/bulma-spacing

Last synced: 2 months ago
JSON representation

Missing spacing classes for Bulma ecosystem

• Host: GitHub
• URL: https://github.com/kaangokdemir/bulma-spacing
• Owner: kaangokdemir
• Created: 2020-02-22T22:31:36.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T14:11:18.000Z (about 1 year ago)
• Last Synced: 2024-10-30T04:49:22.514Z (3 months ago)
• Language: SCSS
• Size: 385 KB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• awesome-bulma - bulma-spacing - Missing spacing classes for Bulma ecosystem (Extensions / Courses)

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)





> 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

```

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