Ikebana

Ikebana (/ˌɪkɪˈbɑːnə/) is a UI component library.
ikebana-ui.github.io/ikebana

🚣 Getting started with development

Ikebana depends on the latest stable versions following...

• Node.js
• Ruby
• Bundler
• Bower

☝️ You can use nvm, rvm and Homebrew/Chocolatey to manage their installations.

Once they are all installed, run...

npm install -g gulp # A global installation of gulp is required.
git clone [email protected]:ikebana-ui/ikebana.git
cd ikebana
bundle install && npm install && bower install
gulp build
say awesome

Once done, the dist directory will have the built artefacts. To view other Gulp tasks, just run gulp.

🎓 Contributing to Ikebana

You are welcome to contribute components to Ikebana; just fork this repo and send us a pull request. Please read the Contributing wiki for more details.

🔆 Updating your codebase

• Use git pull --rebase to update your codebase.
• ⚠️ Run bundle install && npm install && bower install after a git pull --rebase to ensure that any newly added modules are installed.
• Optionally, run npm prune && bower prune to remove any unused node and bower modules.

🌟 Creating a new component

• Use gulp create --name {{component-name}} to create a new component.
• This will create a new directory under lib/components/{{component-name}}.

✏️ Developing a component

• Use gulp serve to fire up your default browser and a live-reload server via the browser-sync module.
• The serve task will watch the lib/components directory and reload your browser upon detecting changes.

🎯 Gulp tasks

In addition to the serve task, the following tasks are available to you...

bump

Increments the version numbers (major.minor.patch) in package.json and bower.json.

clean

Deletes everything in the dist directory.

bump:tag

Creates a git tag using the version number in package.json.

bump:commit

Creates a git commit by adding package.json and bower.json, using the version number in package.json as the commit message.

create --name {{component-name}}

Takes an argument (name), the component name, and creates a directory, lib/components/{{component-name}}, for that component with stub .scss, .js and .html files.

For example, to create a new component called, button, just run…

gulp create --name button

style:compile

Uses sass to compile all the lib/components/{{component-name}}/css/*.scss files.

script:lint

Runs jshint on all the lib/components/{{component-name}}/js/*.js files. Uses .jshintrc for configuration.

script:test

Runs all the Mocha unit tests inside the lib/components/{{component-name}}/test directory.

script:test:report:coveralls

Sends test coverage data to coveralls.io. Uses Istanbul.

script:minify

Uses Uglify to minify all the lib/components/{{component-name}}/js/*.js files.

style:doc

Uses Hologram to generate a styleguide.

dist:sources

Copies all the files under lib/components/**.* (excluding lib/components/{{component-name}}/test/**.*) to the dist directory.

dist:zip

Compresses (zip) all the component files in dist/components/{{component-name}} to dist/components/{{component-name}}/{{component-name}}-{{package-version}}.zip.

serve

Creates a live-reload server using browser-sync.

build

Cleans and builds the entire project to the dist directory.

default

Just lists all the available tasks.

🚀 Distributing a component

• Use gulp build to create a distributable version of all the components in the dist folder.

📜 License

Ikebana is licensed under the MIT license.

---