Alternatives to Bootstrap, frameworks or UI Kits

safetycat · June 9, 2015, 12:20pm

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

emzo · June 9, 2015, 12:53pm

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

romero2k · June 9, 2015, 3:03pm

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%.

safetycat · June 10, 2015, 11:30am

thanks.
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

safetycat · June 10, 2015, 12:52pm

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?
thanks

poggen · June 11, 2015, 2:54pm

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.

starise · June 12, 2015, 11:05am

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.

aaronjheinen · June 12, 2015, 5:58pm

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

Pull the repo from https://github.com/aaronjheinen/sage and install it the same way you would install sage normally.

smutek · June 15, 2015, 11:14pm

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.

aaronjheinen · June 16, 2015, 4:05pm

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:

{content:}

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
https://gist.github.com/aaronjheinen/9d046041b5d87bb1fa62

soulpixel · June 20, 2015, 10:43pm

That helped, thanks!

aaronjheinen · June 22, 2015, 7:45pm

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.

shinyidol · June 30, 2015, 9:25am

@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.

austin · July 1, 2015, 5:27am

It should be included automatically.

poggen · July 8, 2015, 2:05pm

A fork with https://github.com/google/material-design-lite would be nice. Any volunteers? Basically Materialize, but more structured, and with BEM. More info on http://www.getmdl.io/.

shinyidol · July 14, 2015, 8:47am

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.

peiche · September 4, 2015, 6:59pm

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).

m_e_h · September 6, 2015, 5:58pm

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>',
  ]);

peiche · September 8, 2015, 2:28pm

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?

m_e_h · September 9, 2015, 2:52am

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