Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
errors
src
test
.eslintrc.json
.gitignore
.npmignore
.travis.yml
CNAME
README.md
_config.yml
bower.json
gulpfile.js
index.js
index.md
package.json

README.md

OneBang

NPM version Build Status

OneBang turns html attributes starting with an exclamation mark into an easy way to execute functions and manipulate the DOM. OneBang comes with some simple functions already included.

Installation

OneBang is a script designed for used in the browser, and integration of OneBang into the front-end of projects is very simple.

OneBang is available on NPM and bower. Using one of these services is recommended. This project has been tested and works with webpack. All prepackaged code is located in the dist folder.

$ npm install --save onebang
$ bower install --save onebang

OneBang is also available from Github. Please use a release rather than the master branch in order to ensure a stable version of the code.

Download the Latest Released Version

CDNs are also available for quick use of the package.

<!-- Latest Version -->
<script src="https://unpkg.com/onebang/dist/onebang.min.js"></script>
<!-- Specific Version (e.g. 1.0.3) -->
<script src="https://unpkg.com/onebang@1.0.3/dist/onebang.min.js"></script>

Read the documentation here and check out the performance tests here.

Example

Before

<div !id:example>
    <div !id:test !c:testclass !s:color:red>
        <i !i:fa:code></i> Test
    </div>
    <a !#:test>Scroll</a>
</div>

After

<div id="example">
    <div id="test" class="testclass" style="color:red;">
        <i class="fa fa-code"></i> Test
    </div>
    <a href="#test">Scroll</a>
</div>

This is just a sample of the functions provided. Check out all of the OneBang functions here to see what else can be done.

Usage

<script src="onebang.js"></script> <!--Automatically adds window.onebang-->
var settings = {};
onebang(/* optional settings */ settings); //This starts processing.

Processing happens automatically when the document's body is updated for most browsers.

DOCUMENTATION

Read the documentation to set up and get to know OneBang.

License

MIT © Russell Steadman