Pure Stylus implementation of Bulma.css with a little changes

Usage no npm install needed!

<script type="module">
  import shirohanaBulmaStylus from 'https://cdn.skypack.dev/@shirohana/bulma-stylus';


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.

Bulma-Stylus banner


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


npm install @shirohana/bulma-stylus



yarn add @shirohana/bulma-stylus


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

    high resolution comparation

    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.


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


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.