# bulma-stylus-plus
> Improved and expanded version of Bulma Stylus translation of Bulma, flexbox-based CSS framework.
Latest version **0.9.1-beta** (published 2020-11-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install bulma-stylus-plus
pnpm add bulma-stylus-plus
yarn add bulma-stylus-plus
bun add bulma-stylus-plus
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.9.1-beta |
| Published | 2020-11-24 |
| First published | 2020-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.17.0 |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Alexander "M.O.Z.G" Dikov |
| Maintainers | m-o-z-g |
| Keywords | css, stylus, flexbox, responsive, framework, bulma, components, css3, prototyping |
## Links
- npm: https://www.npmjs.com/package/bulma-stylus-plus
- Repository: https://github.com/M-O-Z-G/bulma-stylus-plus
- Issues: https://github.com/M-O-Z-G/bulma-stylus-plus/issues
- npm.io page: https://npm.io/package/bulma-stylus-plus
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 0.9.1-beta (latest) — 2020-11-24
- 0.8.4-beta — 2020-04-12
- 0.8.3-beta — 2020-03-30
## README
[Bulma Stylus Plus](https://github.com/M-O-Z-G/bulma-stylus-plus)
---
[](https://github.com/jgthms/bulma/tree/0.9.1) [](https://github.com/M-O-Z-G/bulma-stylus-plus) [](https://github.com/M-O-Z-G/bulma-stylus-plus) [](https://www.npmjs.com/package/bulma-stylus-plus) [](https://www.npmjs.com/package/bulma-stylus-plus) [](https://ci.appveyor.com/project/M-O-Z-G/bulma-stylus-plus) [](https://gitlab.com/M-O-Z-G/bulma-stylus-plus/pipelines) [](https://travis-ci.org/github/M-O-Z-G/bulma-stylus-plus) [](https://david-dm.org/m-o-z-g/bulma-stylus-plus?type=dev) [](https://david-dm.org/m-o-z-g/bulma-stylus-plus?type=optional) [](https://github.com/stylus/stylus) [](https://github.com/nodejs/node) [](https://github.com/M-O-Z-G/bulma-stylus-plus/blob/master/LICENSE) [](https://github.com/M-O-Z-G/bulma-stylus-plus/commits/master) [](https://github.com/M-O-Z-G/bulma-stylus-plus/commits/master) [](https://github.com/M-O-Z-G/bulma-stylus-plus/commits/master) [](https://www.blockonomics.co/pay-url/029f3f4400fc11eb) [](https://patreon.com/mozgstudio)
**[Bulma Stylus Plus](https://github.com/M-O-Z-G/bulma-stylus-plus)** is the fork of original [Bulma translation](https://github.com/groenroos/bulma-stylus) by [Oskari Groenroos](https://github.com/groenroos), contains some fixes, enhancements and additions. Following the full compliance with the original [Bulma, Saas-based CSS framework](https://github.com/jgthms/bulma) 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`](https://github.com/m-o-z-g/bulma-stylus-plus/blob/master/css/bulma.css)), you can.
#### Install from [npm](https://github.com/npm/npm)
```sh
npm install --only=dev bulma-stylus-plus --latest
```
#### Install with [Yarn](https://github.com/yarnpkg)
```sh
yarn add bulma-stylus-plus --dev
```
#### Install with [Bower](https://github.com/bower/bower)
```sh
bower install bulma-stylus-plus --save-dev
```
## Usage
### CLI
For CLI, use [stylus](https://www.npmjs.org/package/stylus) and set **bulma-stylus-plus** as option for `use` attribute. `import` attrubutes are optional, you can add them inside `styl` file manually.
```sh
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](https://github.com/gulpjs/gulp), use [gulp-stylus](https://www.npmjs.org/package/gulp-stylus) and include **bulma-stylus-plus** in your `use` option for the task.
E̲X̲A̲M̲P̲L̲E̲:
```javascript
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](https://github.com/gruntjs/grunt), you can use [grunt-contrib-stylus](https://www.npmjs.org/package/grunt-contrib-stylus), and include **bulma-stylus-plus** in your `use` option for the task.
E̲X̲A̲M̲P̲L̲E̲:
```javascript
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:
```stylus
@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
[](https://nodei.co/npm/bulma-stylus-plus/)
## Documentation
Since Bulma Stylus Plus is mostly functionally identical to the original Bulma, you can refer to the original [Bulma documentation](http://bulma.io/documentation/overview/start/) for instructions, examples, syntax and browser support. Any additions will be outlined in [wiki](https://github.com/M-O-Z-G/bulma-stylus-plus/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](https://github.com/M-O-Z-G/bulma-stylus-plus/issues).
**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](https://github.com/jgthms/bulma/issues) instead.
## License
Released under the MIT license.
---
_Source: https://npm.io/package/bulma-stylus-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._