https://github.com/bananacss/bananacss
:banana: The brazilian CSS preprocessor writen in NodeJS.
https://github.com/bananacss/bananacss
abstractions banana css hacktoberfest hacktoberfest2021 nodejs preprocessor superset
Last synced: 5 months ago
JSON representation
:banana: The brazilian CSS preprocessor writen in NodeJS.
- Host: GitHub
- URL: https://github.com/bananacss/bananacss
- Owner: bananacss
- License: mit
- Created: 2016-07-07T05:42:20.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-10-31T17:21:56.000Z (over 3 years ago)
- Last Synced: 2024-10-02T15:37:25.602Z (6 months ago)
- Topics: abstractions, banana, css, hacktoberfest, hacktoberfest2021, nodejs, preprocessor, superset
- Language: JavaScript
- Homepage: http://bananacss.github.io/
- Size: 655 KB
- Stars: 180
- Watchers: 17
- Forks: 16
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-made-by-brazilians - Banana CSS
README
# Banana CSS
> :banana: The Brazilian CSS superset.
[](https://travis-ci.org/bananacss/bananacss)
[](https://coveralls.io/github/bananacss/bananacss?branch=master)
[](https://david-dm.org/bananacss/bananacss)
[](https://david-dm.org/bananacss/bananacss#info=devDependencies)
[](https://www.npmjs.com/package/bananacss)
[](https://www.npmjs.com/package/bananacss)
## 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](#how-to-install)
- [Command Line Usage](#command-line-usage)
- [The bananafile.json](#the-bananafile)
- [Module Usage](#module-usage)
- [Features](#features)
- [Example](#example)
- [Development](#development)
- [Code Style](#code-style)
- [Code Docs](#code-docs)
- [Tests](#tests)
- [Versioning](#versioning)
- [Contributing](#contributing)
- [History](#history)
- [License](#license)
## How to install
Verify if you have [node](http://nodejs.org/) and [npm](https://www.npmjs.org/) installed.
### Command Line
```sh
$ npm install -g bananacss
```
### Module
```sh
$ npm install bananacss --save
```
## Command Line Usage
*Compile you .bnn file to .css*
```sh
$ banana
```
*Watch for changes.*
```sh
$ banana -w
```
*Output to dir when passing files.*
```sh
$ banana -o
```
*Show the project version.*
```sh
$ banana --version
```
*Show all available commands.*
```sh
$ banana --help
```
## The bananafile
Create a file called `bananafile.json` in the directory where you will run the command `$ banana` and configure as need.
```json
{
"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
```js
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](docs/bnn-size.md) property.
- [bnn-position](docs/bnn-position.md) property.
- [bnn-gradient](docs/bnn-gradient.md) property.
- [bnn-align](docs/bnn-align.md) property.
- [bnn-width](docs/bnn-width.md) property.
- [bnn-height](docs/bnn-height.md) property.
- Intuitive box model with [bnn-box](docs/bnn-box.md) property and inside/outside values.
- Customizable [Grid System](docs/grid-system.md) with `bnn-row` and `bnn-col`.
- [Module Bundler](docs/module-bundler.md) with native `@import` syntax.
- Global [variables](docs/variables.md) with native custom properties syntax.
- Create reusable functions with [@function](docs/functions.md).
- Configure your build with [bananafile.json](the-bananafile).
- Minify/Compress the generated CSS.
View all [features docs here](docs/index.md).
## Example
## Development
### Code Style
Follow the [Banana NodeJS style guide](https://github.com/bananacss/banana-style-guide).
*Validate the code style with [ESLint](http://eslint.org/):*
```sh
$ npm run eslint
```
### Code Docs
*Generate code docs with [JSDocs](http://usejsdoc.org/)*
```sh
$ npm run jsdocs
```
View code docs in `out/index.html`
### Tests
*Run the unit tests with [mocha](https://mochajs.org/):*
```sh
$ npm test
```
*Calculate the coverage with [Istanbul](https://gotwarlost.github.io/istanbul/):*
```sh
$ npm run cover
```
## Versioning
To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines.
## Contributing
Find on our [issues](https://github.com/bananacss/bananacss/issues/) the next steps of the project ;)
Want to contribute? [Follow these recommendations](https://github.com/bananacss/bananacss/blob/master/CONTRIBUTING.md).
## History
See [Releases](https://github.com/bananacss/bananacss/releases) for detailed changelog.
## License
[MIT License](https://github.com/bananacss/bananacss/blob/master/LICENSE.md) © [Afonso Pacifer](http://afonsopacifer.com/)