BootstrapMagic+
A GUI for editing Bootstrap varaibles
Welcome to Bootstrap Magic+, a Bootstrap Theme Editor ported from Bootstrap Magic. It has been adapted and updated from the original, and now it's even better! It includes some cool new features:
- Search Function
- Sliders for numerical values
- User-friendly Organization
- More Examples
- Internationalization
- Updated variables for Bootstrap v3.3.5
BootstrapMagic+ is a Meteor Package, and is relied on by tap:meteorstrap.
Usage
Make sure you have a Bootstrap package added to your project. You could use tap:meteorstrap
or twbs:bootstrap
, for example. The former will enable you to modify your theme in real-time.
Then simply add this package to your project by using meteor add tap:bootstrap-magic
.
Include the {{> BootstrapMagic}}
template anywhere in your project to access the GUI.
While editing the variables, BootstrapMagic+ maintains reactive dictionary of LESS variables, which contains key-value pairs for LESS variable defaults and overrides, which you can access at any time.
You can access the variables generated at any time using the following API:
1BootstrapMagic.on 'start', -> 2 # do something 3 4BootstrapMagic.on 'change', (change) -> 5 key = Object.keys(change)[0] 6 val = change[key] 7 # log the change 8 console.log 'you just changed', key, val 9 10Template.myTempalte.events 11 'click .something' : -> 12 # log all default variables 13 console.log BootstrapMagic.dictionary.defaults.keys 14 # log all override variables 15 console.log BootstrapMagic.dictionary.overrides.keys 16 17Tracker.autorun -> 18 # reactive source for any given variable 19 console.log BootstrapMagic.dictionary.overrides.get('@gray-darker')
i18n
Meteor internationalisation package tap-i18n has been used for i18n. We currently support:
- English
- Chinese
Credits & Contributions
Originally Ported by Chris Hitchcott
Additional developmeny by Talia Scotchbrook
Credit to pikock for creating the original BootstrapMagic.
MIT License 2015, TAPevents - we make apps for events.