Home

Awesome

Bulma Spacing

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

NPM

License: MIT npm package downloads size

<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. (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

# Yarn
yarn add bulma-spacing

# NPM
npm i bulma-spacing

Then just import in your .js file

import 'bulma-spacing'

Without JavaScript

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

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

How to use

Keywords

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

.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

.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) - kaangokdemir.com

Changelog

See the CHANGELOG.md file

License

MIT