Bulma Stylus

Pure Stylus implementation of Bulma.css

Notice! This package is used to integrate Bulma with Stylus, it does NOT includes builded css files.

Install

This package version is synchronous with Bulma, every difference between the same version of Bulma will be logged in Changelog.

NPM

npm install @shirohana/bulma-stylus

or

Yarn

yarn add @shirohana/bulma-stylus

Links

• 📚 Offical documentation
• 📜 Changelog

Difference between Bulma

• Support 4k container (Disable: $4k-enabled = false)
• All possible floating numbers are round to 4 digits after the period

New Feature

• Dynamic rem for better user experience on high-resolution screens

  

  If enabled, the page will be scale in ratio when device width exceeds $body-auto-scale (default: $fullhd).

  You can try a higher value and find out the best in your situation like $body-auto-scale = $fullhd + 20*16px.

  Set $body-auto-scale to any falsy value to disable this feature.

Internal

• Use em/rem instead px in every elements, components and helpers
• Replace lighten() function with sass-lighten() which implements sass-like lighten
• Replace darken() function with sass-darken() which implements sass-like darken
• Remove powerNumber() function (Use Stylus exponent-operator instead)
• Remove colorLuminance() function (Use Stylus built-in function luminosity() instead)

Contributing

Bug fix or improvement only, or you can create an Issue for any problem :)

Install dependencies

yarn; cd docs && yarn

Test your code

Ensure there's no error reported

yarn dev

Start documentation server and ensure the page looks in expected

cd docs && docker-compose up

Before committing

yarn clean

Inherited copyright and license

© 2018 Jeremy Thomas. Code released under the MIT license.