JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin
docs
src
test
.editorconfig
.eslintrc.json
.gitignore
.travis.yml
CONTRIBUTING.md
LICENSE.md
README.md
bananafile.json
package.json
refactoring.md

README.md

Banana CSS

🍌 The Brazilian CSS superset.

Build Status Coverage Status Dependency Status devDependency Status npm npm

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?

Write your style with banana syntax and compile for pure CSS.

Table of contents


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.

{
	"bnnSize" : true,
	"bnnPosition" : true,
	"bnnGradient" : true,
	"bnnVariable" : true,
	"bnnImport" : true,
	"bnnAlign" : true,
	"bnnWidth" : true,
	"bnnHeight" : true,
	"bnnCol" : true,
	"bnnRow" : true,
	"bnnBox" : true,
	"bnnFunction" : true,
	"compress" : false
}

All features have true as default value, except the compress.


Module Usage

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

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

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

// Output the css
const output = Banana.render(inputBananaCode);

console.log(output); // .a {width: 50px; height: 50px;}

Features

View all features docs here.


Example

Simple 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.

License

MIT License © Afonso Pacifer