bulma-helper-spacing

0.0.3 • Public • Published
Bulma's logo

A simple spacing helper to use with Bulma! It provides spacing utilities using margin and padding like Bootstrap does.

In order to work, bulma-helper-spacing is using rem for sizing. margin-1 will be equivalent to margin: 1rem;

Prerequisites

You must use Bulma as a dependency.

$ npm install bulma

Attention : Be sure to include base/_all.sass or at least utilities/mixins.sass and *-variables.sass (because spacing is generated with the following breakpoints taken from Bulma) :

  • tablet
  • desktop
  • fullhd

Installation

Available on NPM

$ npm install bulma-helper-spacing

Usage

// Import only what you need from Bulma 
@import './node_modules/bulma/sass/utilities/initial-variables.sass'; // required 
@import './node_modules/bulma/sass/utilities/derived-variables.sass'; // required 
@import './node_modules/bulma/sass/utilities/mixins'; // required 
// @import "../../node_modules/bulma/sass/base/_all.sass"; // avoid including everything from Bulma, we should use its modularity ;-) 
 
// Bulma spacing helper 
@import "../../node_modules/bulma-helper-spacing/spacing";
 
// Do your magic here :) 

Documentation

Use these classes to generate spacing for margins and paddings. All generated CSS classes are using Bulma's writing style.

has-{property}-{sides}(-{size})(-{breakpoint})
  • Property : margin, padding
  • Sides (optional) : , x, y, top, bottom, left, right
  • Size : 0, 1, 2, 3, 4, 5, 6, 7, 8
  • Breakpoint (optional) : , tablet, desktop, fullhd

Examples

<!-- Padding -->
<div class="has-padding-left-0"></div>
<div class="has-padding-5"></div>
<div class="has-padding-x-0 has-padding-top-8-desktop"></div>
 
<!-- Margin -->
<div class="has-margin-y-3"></div>
<div class="has-margin-5 has-margin-0-desktop"></div>

Install

npm i bulma-helper-spacing

DownloadsWeekly Downloads

66

Version

0.0.3

License

ISC

Unpacked Size

5.49 kB

Total Files

5

Last publish

Collaborators

  • dinath