Bulma Stylus Plus 0.8.3-beta is out now!

Overview

Bulma Stylus Plus is the fork of original Bulma translation by Oskari Groenroos, contains some fixes, enhancements and additions. Following the full compliance with the original Bulma, Saas-based CSS framework is not the goal of this fork, any additions and improvements (including Stylus-only) can be made. Main goal, otherwise, is to take users more control over the output. As many other CSS frameworks, Bulma's CSS is full of hundreds useless rules, for example: default and custom colors are generated for each colorful element like buttons or navbar. Not to mention the fact that standard colors are not subject to user redefining through settings. But it's should be OK if user wants or don't want at all to add all of them or partially. I provide you over 300 new variables and hash arrays to control output as much accurate as you want.

Installation

If you simply want to include the built CSS file (/css/bulma.css), you can.

Install from npm

npm install --only=dev bulma-stylus-plus --latest

Install with Yarn

yarn add bulma-stylus-plus --dev

v0.8.3-beta - 2020-03-30

Added

fontFace() mixin to generate @font-face rule for font by their name, path, weight and style, format, version.
$prefix string variable. Used always for *CSS variables*, optional for selectors with boolean variable $prefixed-selectors.
banner component with predefined banner sizes.
11 new image ratios could be activated with $silent:= { plus: { ratios: false }}. Slows down the generation process.
Units conversion with function convertUnit(). Supports next units:
- Scale: em, rem, px, in, cm, mm, pt, pc, q
- Angle: deg, grad, rad, turn
- Time: s, ms
- Audio: hz, khz
- Resolution: dpi, dpcm, dppx
  $body-size and $body-font-size are key variables for conversion between relative units, such as em/rem. The function detects the ability to convert one unit to another, and break execution with an error if there will be nonconvertible units.
bulmaRgba() function.
#2740 Fixes #2739 -> Add variables size for layout hero
Fix #2741 -> Create bulmaRgba() function to support inherit value.
#2709 Add light colors to the notification element
CSS variables.
updateGlobalOptions() function checks for changes of $silent and $prefix variables then rewrite cache and use it for all further calls. Use it each time when you make changes in global options in the middle of your code. All built-in mixins and functions use it whenever called and it makes sense in their processing.

Changed

Components, helpers, and elements now abstracted and could be called mixins with(out) block. You could even disable auto-generated rules for them with $silent hash array, but keep them available for reuse. You don't need to comment separate styl files manually anymore, to add/remove features, but you still can.
Components/elements/form/layout/helpers now has nested structure with Root Reference. (Some exceptions are there for selectors which used in multiple components). Therefore, the main selector name affects children, and you always know the structure of further HTML code. If you want to break the parenting, use any of available Stylus references.
Each default selector name for the component, element or helper can be redefined manually with variable, see initial-variables.styl:89 for examples.
BEWARE! Some *components* and *elements* contain not CSS pseudo-class. Therefore, it will give an inadequate result, if you will use a dot-free class name for *modifiers*. I will try to find how to resolve it in a more-less elegant way. Just keep it in mind about all $XXX-modifier variables.
$silent-mode boolean variable. If true, any rules will not be generated in the resulted CSS file by default, regardless of their values in $slient array.
Bulma Stylus Plus is an NPM module for now and could be called within Gulp, Grunt, or via CLI. See README for more info about usage.
Auto-generated rules for all default and custom colors now can be turned off/on for partial components/elements with $silent.colorful.[NAME-OF-COMPONENT-ELEMENT].
Portrait image ratios are now optional and auto-generated. You could disable it with $silent:= { plus: { ratios-portrait: true }}.
Generated size rules for all component and elements (exclude banner, because this component is senseless without sizes) are now optional like colors with $silent.sizes.[NAME-OF-COMPONENT].
Generated color rules now can be redefined with variables for all components and elements, not only for message and panel.
All selector names now supports custom prefix with variable $prefix-bsp to prevent conflicts with anything else. $prefix by default if $prefixed-selectros else ''.
$columns-max variable transferred to initial-variables.styl.
$message-colors and $panel-colors transfered to derived-variables.styl.
$body-size and $body-font-size variables has moved from generic to initial-variables. Because now they are essential variables for some functions.
For uniformity and improved readability, colons between a property and a value are now required. The Stylus allows you to not use them, however, in the case, when the property name is generated from one or more variables, colons are necessary. Such a mismatch can be confusing for users.
Tiles now respects $column-max variable.
column-ratios variable name starts with $ character. Please, rename, if you're using it separately. My mistake, perhaps, but initially I planned it like a utilitarian feature only, not reusable.
@charset parameter is now optional and regards $charset variable. Silent if "".
mixins.styl generates nothing by itself when imported.
autoprefixer dependency replaced with autoprefixer-stylus
$unselectable, $arrow, $block, $delete, $loader, $overlay moved to new placeholders.styl.

Deprecated

$colorContrastFormula is now alias. Use $color-luminance-formula instead.
bulma-stylus-darken is now an alias of bulmaDarken.

Fixed

stylelint is optional dependency for now. Because it fixes source mapping and has no critical value. Oskari Groenroos uses it to add empty lines between rules like in original Bulma.io. But source-map is more significant.