bananacss / bananacss

:banana: The brazilian CSS preprocessor writen in NodeJS.

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
  • 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

---

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

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

License

MIT License © Afonso Pacifer

bananacss's Issues

Add flex and offset on Banana Grid

Improve error handling

Add Flag for minify

Refactor CLI fixtures for testing

Add a Code Style Guide

Add the rendering time in user feedback log

Add JSDdoc

http://usejsdoc.org/

Refactor module interface

Create a "function" feature <3

Site don't works for me

Also, i think it's abandoned

Add Flag for autoprefixer

Update docs with last refactors

Fix @import syntax

why the name "bananacss"

i was in your talk on riodevday and i met the project, i saw a project now and decided to use bananacss but before i asked myself the following question, why do you put the name "bananacss" ?

Refactor all for Template strings

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

Fix lint errors

1º Banana hangout

1º Banana hangout

Participantes:

• @afonsopacifer
• @nathpaiva
• @danilovaz
• @jjaderg (stealth mode)

O que rolou:

Apresentação dos objetivos do projeto e primeiras features.

• bnn-size property.
• bnn-position property.
• bnn-gradient property.
• bnn-align property.
• bnn-width property.
• bnn-height property.
• Module Bundler with native @import syntax.
• Global variables with native custom properties syntax.

Objetivo:

Colher feedbacks e gerar ideias.

Novas features sugeridas:

Grid:

Banana code:

.row {
    bnn-width: 900px;
    bnn-position: center;
    bnn-align: left top;
}

.column {
    bnn-col: 4 12 2px; /* cols | total of cols | margins */
}

CSS result

.row {
    width: 100%;
    max-width: 900px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.column {
    margin-right: 2px;
    margin-left: 2px;
    width: x%; /*  x = ((100% * 4) / 12) - (2px * 2) */
}

Box model:

Banana code:

.* {
    bnn-box: default;
    bnn-box: content;
}

CSS result

.* {
    box-sizing: border-box;
    box-sizing: content-box;    
}

Transform:

Banana code:

.element {
    bnn-x: 200px;
    bnn-y: 150px;
    bnn-scale: 50%;
    bnn-rotate: 45deg;
}

CSS result

.element {
    transform: translateX(200px) translateY(150px) scale(.5) rotate(45deg);
}

Create specific tests CLI (bin/)

Create variables feature

Syntax: https://www.w3.org/TR/css-variables/

ES6/ES7 (support)

What do you think about include babel to enable all features of ES6/ES7?

bananaconfig.json

Enable or disable the module features with a json file.

bananaconfig.json

{
    "bnnSize" : "true",
    "bnnPosition" : "true",
    "bnnGradient" : "true",
    "bnnVariable" : "true",
    "bnnImport" : "true",
    "bnnAlign" : "true",
    "bnnWidth" : "true",
    "bnnHeight" : "true"
}

Create bnn-width and bnn-height

bnn-width: 300px;

Compile to:

width: 100%;
max-width: 300px;

---

bnn-height: 300px;

Compile to:

width: 100%;
max-height: 300px;