Need private packages and team management tools?Check out npm Teams »

bulma-spacing

2.0.3 • Public • Published

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

Bulma: a Flexbox CSS framework Bulma Spacing

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

Install

npm i bulma-spacing

DownloadsWeekly Downloads

291

Version

2.0.3

License

MIT

Unpacked Size

207 kB

Total Files

7

Last publish

Collaborators

  • avatar