Alternatives to Bootstrap, frameworks or UI Kits

Hi, is anyone using alternatives to Bootstrap with Sage, either other frameworks or even a UI Kit?

1 Like

I’m using Materialize on a project I’m currently building. It’s been pretty easy to swap out Bootstrap for Materialize.


Agreed that it’s extremely simple to not use Bootstrap if you don’t want to. It’s in there as a bower module, so you can use bower to remove bootstrap and install the framework of your choosing (or manually set up the SASS). They’ve already removed a lot of the BS-specific code, but you may need to tidy a few things up to have it work 100%.

1 Like

I’m going to take a look at adding Pure to get me started.
Haven’t used Bower before but should be ok as instructions on the Pure site

1 Like

sorry, am complete beginner with this stuff.

So I have included Pure and removed Bootstrap using Bower.
When I removed Bootstrap, it said it had removed JQuery. Do I need to reinstall that?

Do I now need to make the additions/removals in the assets.php too?
Does that do the WP enqueueing of scripts?
Are there any other places I need to make changes?

Just wanted to chime in here - I think @ben et al would probably appreciate if you shared forks of Sage with integrated support for the frameworks mentioned above. There are rumors of a yeoman-generator flying around, and I suspect forks with various frameworks already integrated will come in handy when it is time to launch that.

1 Like

For fast development I’ve used Foundation + Sage with good results. At the moment i think foundation is a better framework than bootstrap. It is more modular and powerful and has a key feature: it’s build on rems instead of px, fundamental to build scalable typography.

I forked sage thanks to @poggen’s request and inserted Materialize as a framework.

Pull the repo from and install it the same way you would install sage normally.


Hey, that’s great! I’ve just started working on my own Materialize port. I’ll definitely be checking this out as guidance when I get stuck.

One thing to note, that I can’t add to the repo because it’s a bower component, is the materialize/sass/components/_icons-material-design.scss file needs to be edited to remove the unicode mixin at the bottom, otherwise it renders CSS like this:


You’ll need to add quotes around the unicode, eg \e8dd => “\e8dd” and remove the unicode method around

content: $mdi-icon-value;

I created a gist to replace this file


That helped, thanks!

Awesome! You bet.

It’s not ideal to have to be editing anything in the bower_components directory so hopefully when the yeoman generator is released this issue will be solved.

@aaronjheinen great fork. Loving Materialize so far. Though I am having trouble with materialize.js and materialize.min.js not being included in the gulp build. I had to manually add them to dist.

It should be included automatically.

A fork with would be nice. Any volunteers? :wink: Basically Materialize, but more structured, and with BEM. More info on

I figured it out. It was added but had to include a init.js file to initiate javascript.

One question. Any good help out there to style a 70/30 sidebar? I’ve been trying with a custom template, but running into issues. Any help would be much appreciated.

I created a Material Design Lite branch on Github:

It’s just the basics. I updated the bower config to support bringing in css and js, and the core markup (just the wrapper, header, and footer).


Just wanted to share how I’ve been doing sidebars for the MDL Mega footer

    'name'          => __('Footer', 'sage'),
    'id'            => 'sidebar-footer',
    'before_title'  => '<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked><h1 class="mdl-mega-footer__heading">',
    'after_title'   => '</h1><div class="mdl-mega-footer__link-list">',
    'before_widget' => '<section class="mdl-mega-footer__drop-down-section">',
    'after_widget'  => '</div></section>',

That’s excellent. I had just put the mini footer in my branch. Do you mind if I include your code for the mega footer?

Sure thing @peiche. I was going to mention it on github but issues weren’t available on the repo.