A Stylus translation of a modern CSS framework based on Flexbox

  • By Brandon
  • Last update: Apr 9, 2021
  • Comments: 4

Bulma.styl

npm npm

This is a 1:1 Stylus translation of the Bulma CSS framework.

Bulma.styl aims at 1:1 functional parity with the latest dev-master branch of the original Sass-based Bulma.

Installation

If you simply need a compiled version of Bulma, please refer to the official Bulma repository.

However, if you want the Stylus files in order to customize variables and include only certain components, please install Bulma.styl using npm or Yarn:

Install from npm

npm install bulma.styl

Install from Yarn

yarn add bulma.styl

Documentation

Since Bulma.styl is functionally identical to the original Bulma, you can refer to the original Bulma documentation for instructions, examples, syntax and browser support.

All variable and mixin names are the same.

Extensions

1:1 Stylus translations of the available Bulma extensions are also available:

Bugs & support

Any bugs or support requests can be posted into the GitHub issue tracker.

Please note: Bulma.styl is simply a translation of Bulma from Sass to Stylus, with no corrections or deviations made. Therefore, before submitting a bug, please make sure the issue is actually related specifically to the translation, and the Sass edition of Bulma does not exhibit the same bug. If it does, please submit your issue to Bulma's issue tracker instead.

Similarly, any pull requests should only relate directly to the translation (translate a newer version into Stylus, fix syntax errors). Any pull requests for new features or behavior fixes should go directly to Bulma.

License

Released under the MIT license.

Github

https://github.com/log1x/bulma.styl

Comments(4)

  • 1

    Styles missing

    When I install this package, it seems to be missing all of these;

    "stylus/utilities/_all" "stylus/base/_all" "stylus/elements/_all" "stylus/components/_all" "stylus/grid/_all" "stylus/layout/_all"

    the bulma.styl folder in node_modules only has a bulma.styl and a bulma.css

  • 2

    Will this be maintained?

    I'm always sorry to ask this of open source project maintainers, but I'm wondering if there is any plan to keep this updated with future revisions of Bulma, or if it was maybe a one-shot publish to Github? 😄 ❤️

  • 3

    Partial includes

    Is there any simple way to just include certain components/elements?

    Just trying to cut down on compilation time and file size.

    Potential feature? or something to add to the docs/readme?

  • 4

    for loops off by 1

    I was going to do a pull request to fix title and subtitle but I realized this may affect more than just those two.

    The direct port from Sass created a hiccup that I noticed in title and subtitle as it relates to sizes. Stylus' for starts at an index of 0 while Sass' @each starts at 1. So bulma.styl is generating a class .is-0 with the value for one.

    Should fix it by doing something like

    for $size, $i in $sizes
    &.is-{$i+1}

Popular Tag

Related