Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

bulma-helper-spacing

0.0.2 • 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

15

Version

0.0.2

License

ISC

Unpacked Size

5.47 kB

Total Files

5

Last publish

Collaborators

  • avatar