Skip to content

A small utility to handle border styling using Bulma colors

License

Notifications You must be signed in to change notification settings

alexandre-eliot/bulma-border

Repository files navigation

Bulma Border

license npm package downloads size

Table of Contents

Quick Start

npm install

# NPM
$ npm i bulma-radio --save

yarn install

# Yarn
yarn add bulma-border

SCSS

Use with scss

/* Bulma Border */
@import "node_modules/bulma-border/bulma-border";

JavaScript

/* Bulma Border */
import 'bulma-border';

CSS

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

<!-- Bulma Border -->
<link rel="stylesheet" href="https://unpkg.com/bulma-border"/>

How to use

Classes construction

.has-border[-direction]?[-color]?[-style]?[-size]?

Note Neither of direction, color and size have to be supplied, i.e. .has-border-right and .has-border-black-6 are both valid

Directions

  • x that includes left and right
  • y that includes top, bottom

default: all directions

Colors

Bulma's original colors palette such as : white, black, light, dark, primary, link, info, success, warning and danger

default: primary

Styles

Common css styling values : solid, dotted, dashed, double, groove, ridge, inset and outset

default: solid

Sizes

Bulma's original sizes with three added sizes

$size-8: 0.5rem !default;
$size-9: 0.25rem !default;
$size-10: 0.125rem !default;

Defaults

/* border width */
$def-border-width: 125rem;
/* border color */
$def-border-color: $primary;
/* border style */
$def-border-style: solid;

Examples

.has-border-x-8

will translate into

border-left-width: 0.5rem;
border-left-color: hsl(171, 100%, 41%);
border-left-style: solid;
border-right-width: 0.5rem;
border-right-color: hsl(171, 100%, 41%);
border-right-style: solid;
.has-border-left-success

will translate into

border-left-width: 0.125rem;
border-left-color: hsl(141, 53%,  53%);
border-left-style: solid;

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am ':sparkles: feat: Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Note Use of Gitmoji and Semantic Commit Messages are highly encouraged

Contributors

Reporting Issues

  1. Make sure you are using the latest version of the package
  2. Provide steps to reproduce
  3. Provide an expected behavior
  4. Describe what is actually happening
  5. Platform, Browser & version as some issues may be browser specific

Licensing

Useful Links

Changelog

See the CHANGELOG.md file

About

A small utility to handle border styling using Bulma colors

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages