Bulma Stylus Plus

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

Install with Bower

bower install bulma-stylus-plus --save-dev

Usage

CLI

For CLI, use stylus and set bulma-stylus-plus as option for use attribute. import attrubutes are optional, you can add them inside styl file manually.

stylus my-styles/styles.styl --out my-output/styles.css --sourcemap --use bulma-stylus-plus --import my-styles/_settings.styl --import bulma-stylus-plus

Gulp

For gulp, use gulp-stylus and include bulma-stylus-plus in your use option for the task.

const gulp = require( "gulp" ),
	stylus = require( "gulp-stylus" ),
	bsp    = require( "bulma-stylus-plus" );

function styles() {
	return gulp.src("styles/styles.styl")
		.pipe( stylus( {
			"use": bsp(),
        	"import": ["_settings", "bulma-stylus-plus"] // Optional, you can add them inside `styl` file manually.
		} ) )
		.pipe(gulp.dest("css"));
}

exports.styles = styles

Included in compilation with Grunt

For grunt, you can use grunt-contrib-stylus, and include bulma-stylus-plus in your use option for the task.

module.exports = function( grunt ) {
	grunt.loadNpmTask( "grunt-contrib-stylus" );
	grunt.initConfig( {
		"stylus": {
			"options": {
				"compress": false,
				"use": [
					require( "bulma-stylus-plus" )
				],
                "import": ["_settings", "bulma-stylus-plus"] // Optional, you can add them inside `styl` file manually.
			},
			"styles": {
				"files": {
					"css/bulma.css": "bulma-stylus-plus.styl"
				}
			}
		}
	};
};

To generate all Bulma styles within your Stylus files, simply add:

@import "_settings" // Place where you can redefine default variables of Bulma Stylus Plus.
@import "bulma-stylus-plus" // All CSS code with the changes defined above will be generated here, if `$silent-mode == false`.

/* Your main styles */

Stats

Documentation

Since Bulma Stylus Plus is mostly functionally identical to the original Bulma, you can refer to the original Bulma documentation for instructions, examples, syntax and browser support. Any additions will be outlined in wiki.

Comparison

| Feature | Bulma(‑stylus) | Bulma‑stylus‑plus | | --------------------------- | -------------------------------------------- | ------------------------------------------------------------ | | Abstracted components | No | Yes | | Silent features | No | Yes. Allows to hide rendered/generated components/elements or part of rules in resulted CSS, but keeps it available for reuse. | | Column ratios | 1 hardcoded name for each ratio. | Multiple user defined names.(Numerical names are included as addition) | | Prefixed selectors | No | Optional. (Default: No) | | Solid default buttons | No | Optional (Default: No) | | Grid columns | 12 | Optional (Default: 12) | | Repeatable rules | Separated | Generated within loop mixins. | | Image ratios | 15 predefined landscape and portrait ratios. | 15 + 22 optional additional ratios. Portrait rules are generated automatically and optional too. All ratios has altered names also. | | Contrast formula | HSL | Optional: HSL or YIQ. | | Ralative names for children | No | Yes** Not if the same selector is used inside different components, in this case the inheritance works only through variables initial-variables.styl. | | Selector names | Hardcoded | Stored in variables | | Banner element | No | Yes |

Bugs & support

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

Please note: Bulma Stylus Plus is a translation of Bulma from Sass to Stylus. 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.

License

Released under the MIT license.