Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/cityssm/bulma-reasonable-colors

CSS classes for using reasonable-colors with Bulma
https://github.com/cityssm/bulma-reasonable-colors

accessibility accessible-colours bulma css reasonable-colors

Last synced: 3 months ago
JSON representation

CSS classes for using reasonable-colors with Bulma

Host: GitHub
URL: https://github.com/cityssm/bulma-reasonable-colors
Owner: cityssm
License: mit
Created: 2022-05-05T18:40:53.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2022-05-06T18:59:45.000Z (over 2 years ago)
Last Synced: 2024-03-23T19:21:02.403Z (9 months ago)
Topics: accessibility, accessible-colours, bulma, css, reasonable-colors
Language: HTML
Homepage:
Size: 68.4 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # bulma-reasonable-colors

CSS classes for using

[Reasonable Colors](https://reasonable.work/colors/)

with

[Bulma](https://bulma.io/).

![Sample Buttons](sample.png)

[View the test page](https://cityssm.github.io/bulma-reasonable-colors/test/index.htm) 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.

```bash

npm install @cityssm/bulma-reasonable-colors

```

```html

```

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](https://reasonable.work/colors/#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.