Skip to content

CSS classes for using reasonable-colors with Bulma

License

Notifications You must be signed in to change notification settings

cityssm/bulma-reasonable-colors

Repository files navigation

bulma-reasonable-colors

CSS classes for using Reasonable Colors with Bulma.

Sample Buttons

View the test page for more examples.

Features

  • Includes Bulma-like class names for all six shades of all 25 colors in the reasonable-colors palette.
  • Accessible defaults.

Usage

Download the SCSS, download the minified CSS, link to a CDN, or install from NPM.

npm install @cityssm/bulma-reasonable-colors
<link rel="stylesheet" href="path/to/bulma.min.css">
<link rel="stylesheet" href="path/to/bulma-reasonable-colors.min.css">

To avoid collisions with future Bulma updates, all class names include rc- before the color name and shade.

The color palate is available on the Reasonable Colors website.

For example, to set the text color to the fourth shade of teal, use the class .has-text-rc-teal-4.

Classes so Far

  • .has-text-rc-[colorName]-[shadeNumber]
  • .has-background-rc-[colorName]-[shadeNumber]
  • .button.is-rc-[colorName]

In the Works

  • Alert colors, navbar colors, panel colors, and other Bulma elements and components.