Banana CSS
🍌 The Brazilian CSS superset.
What is?
- Syntax abstractions for complex native CSS features.
- If you can, compile native CSS features like a pre-processor (ex: Custom properties and @import).
- Provide a simple abstraction for a Semantic Grid System with calc().
- Extra features (ex: @function).
How it works?
Table of contents
- How to install
- Command Line Usage
- The bananafile.json
- Module Usage
- Features
- Example
- Development
- Versioning
- Contributing
- History
- License
How to install
Verify if you have node and npm installed.
Command Line
$ npm install -g bananacss
Module
$ npm install bananacss --save
Command Line Usage
Compile you .bnn file to .css
$ banana <input_path>
Watch for changes.
$ banana <input_path> -w
Output to dir when passing files.
$ banana <input_path> -o <out_path>
Show the project version.
$ banana --version
Show all available commands.
$ banana --help
The bananafile
Create a file called bananafile.json
in the directory where you will run the command $ banana
and configure as need.
All features have true
as default value, except the compress
.
Module Usage
const inputBananaCode = '.a {bnn-size: 50px;}'; // Features injectionconst config = {};configbnnSize = true;configbnnPosition = true;configbnnGradient = true;configbnnVariable = true;configbnnImport = true;configbnnAlign = true;configbnnWidth = true;configbnnHeight = true;configbnnCol = true;configbnnRow = true;configbnnBox = true;configbnnFunction = true;configcompress = true; const Banana = config; // Output the cssconst output = Banana; console; // .a {width: 50px; height: 50px;}
Features
- bnn-size property.
- bnn-position property.
- bnn-gradient property.
- bnn-align property.
- bnn-width property.
- bnn-height property.
- Intuitive box model with bnn-box property and inside/outside values.
- Customizable Grid System with
bnn-row
andbnn-col
. - Module Bundler with native
@import
syntax. - Global variables with native custom properties syntax.
- Create reusable functions with @function.
- Configure your build with bananafile.json.
- Minify/Compress the generated CSS.
View all features docs here.
Example
Development
Code Style
Follow the Banana NodeJS style guide.
Validate the code style with ESLint:
$ npm run eslint
Code Docs
Generate code docs with JSDocs
$ npm run jsdocs
View code docs in out/index.html
Tests
Run the unit tests with mocha:
$ npm test
Calculate the coverage with Istanbul:
$ npm run cover
Versioning
To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.
Contributing
Find on our issues the next steps of the project ;)
Want to contribute? Follow these recommendations.
History
See Releases for detailed changelog.