Hi, is anyone using alternatives to Bootstrap with Sage, either other frameworks or even a UI Kit?
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%.
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.
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.
Pull the repo from https://github.com/aaronjheinen/sage 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
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.
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: https://github.com/peiche/sage-mdl
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
register_sidebar([ '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.