README.md

Banana CSS

🍌 The Brazilian CSS superset.

Table of contents

• How to install
• Command Line Usage
• Module Usage
• Features
• Example
• Development
  • Code Style
  • Code Docs
  • Tests
• 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

---

Module Usage

const inputBananaCode = '.a {bnn-size: 50px;}';

// Features injection
const config = {};
config.bnnSize = true; // Default: false
config.bnnPosition = true; // Default: false
config.bnnGradient = true; // Default: false
config.bnnVariable = true; // Default: false
config.bnnImport = true; // Default: false
config.bnnAlign = true; // Default: false
config.bnnWidth = true; // Default: false
config.bnnHeight = true; // Default: false
config.bnnCol = true; // Default: false
config.bnnRow = true; // Default: false
config.bnnBox= true; // Default: false
config.compress = true; // Default: false

const Banana = require('banana')(config);

// Output the css
const output = Banana.render("./fake_path.bnn", inputBananaCode);

console.log(output); // .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 and bnn-col.
• Module Bundler with native @import syntax.
• Global variables with native custom properties syntax.
• Minify/Compress the generated CSS.

View all features docs here.

---

Example

Banana code:

/* style.bnn */
.header {
	bnn-size: 100% 300px;
	bnn-position: center;
	bnn-gradient: #000 #fff;
	bnn-align: center bottom;
}

Result:

/* style.css */
.header {
  width: 100%;
  height: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to bottom, #000, #fff);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}

---

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.

License

MIT License © Afonso Pacifer