README
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.
npm
Install fromnpm install --only=dev bulma-stylus-plus --latest
Yarn
Install withyarn add bulma-stylus-plus --dev
Bower
Install withbower 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.
E̲X̲A̲M̲P̲L̲E̲:
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.
E̲X̲A̲M̲P̲L̲E̲:
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.