"Native" support for themes

[bradberger]

Idea around this to add "native" support for various frameworks - Bootstrap, Purecss, Angular Material, etc. by customizing the templates to include proper classes for various elements in each framework. This should be a better solution than just emulating the default appearance of a framework, since more often than not sites use their own customization of CSS for each framework.

This is in progress right now, but needs to be completed, and help is welcome. Right now a few frameworks I've added are below, but more are welcomed:

• Bootstrap
• Angular Material
• Pure CSS
• Material Design Light

The idea is that current code like this:

<button class="ok" tabindex="1">{{ok}}</button>

becomes this, depending on the theme (bootstrap example below):

<button class='ok btn btn-success' tabindex='1'>{{ok}}</button>

Right now, in 1.0.4 which is going to be published shortly, there's a new public method theme() which makes this to happen:

alertify.theme("bootstrap");

It can be reset with:

alertify.theme("default");

For starters, this only adjusts the button classes, but it should be possible to implement the classes of modal dialogs, etc, too, depending on the framework.

Would love to hear suggestions for which frameworks should be supported, and would welcome any assistance in added more frameworks and completing the ones already started.

[bradberger]

Need to update Bootstrap to include the default classes for the input element, too. See issue #52

[voidstate]

Can I suggest you use different Bootstrap classes?

Currently you have:

this.dialogs.buttons.ok = "<button class='ok btn btn-success' tabindex='1'>{{ok}}</button>";
this.dialogs.buttons.cancel = "<button class='cancel btn btn-danger' tabindex='2'>{{cancel}}</button>";

So cancel is btn-danger and ok is btn-success. To fit with the examples on the Bootstrap site, you should have btn-default for cancel and btn-primary for success.

[bradberger]

Agreed, that makes sense. Just updated it with the latest commit, and when CloudFlare starts serving the changes it should work again on the website...

[igorsantos07]

+1 on this. I have a simple error dialog and wanted to have a btn-default on it (while the success dialog would have a btn-success). Got around the issue uglily accessing the "private" object and changing the template directly, but would be way cooler if we could define custom classes - this could get in the way of the lib's lightness, tho. Maybe we could set those classes by using a second parameter on the respective methods? Like alertify.okBtn('Yey!', 'btn btn-success')...

Sidenote: there are no docs on this. Are you going to include the .theme() method on the docs page, or could I PR it? :) I just found it by accident, while fiddling with the source, trying to find a way to use bootstrap buttons.

[bradberger]

@igorsantos07 Go ahead and PR it, you're right it should be on the docs page. Same goes for the second parameter. That sounds like a good idea!

[brianespinosa]

@bradberger Is there a branch that this is being worked on from. I can assist with some of this as well. I would also like to suggest that Semantic UI be added to the list.

[bradberger]

@brianespinosa Thanks! The master branch is right now the current production version, that would be the one to fork and PR