Kaleidoscope

Bootstrap

Not just a bootstrap theme. Kaleidoscope adds some variations to the Bootstrap components, adds some new ones inspired on other great UI toolkits like Semantic-UI or PureCSS, and integrates some other libraries like Fontawesome.

Built with Stylus

Implemented using Stylus, an expressive, robust, feature-rich CSS preprocessor.

Built on top of Bootstrap Stylus.

Customizable

Everything is defined using variables, so the theme can be easily customised, from the color and dimensions, to the included elements.

Install

Manually

Download the latest release and copy the CSS and font files to your own project.

Bower

$ bower install kaleidoscope --save

Usage

The bower package includes source stylus files and the built CSS file. The built CSS file includes all the components.

To customize the theme, import the main stylus file, located at src/index.styl, overriding any component parameter before the import. See the config directory for a reference of what can be overrided. There's no need to alter any file inside the config directory, just define the variables before importing Kaleidoscope and the new values will be applied.

To create a custom buid ommiting some of the components, set to false any of the import directives defined in src/import-config.styl. Again, there's no need to alter the package files, just declare the variables before importing it.

// Bower packages directory
$vendorPath = 'assets/vendor/'

// Override anything you want or disable components
$fontsPath         = '../fonts/'
$import-glyphicons = false

@import $vendorPath + 'kaleidoscope/src/index.styl'

Open source

Kaleidoscope is Free & Open Source, released under the MIT license.

The project is hosted on Github and open to feedback and contributions.

Give us some feedback and contribute to the project forking the repository and sending us a pull request.