bootstrap vs jqueryui

I just heard about bootstrap which is Twitter's css style.  I was considering using this vs jqueryui and themeroller.

Can someone please tell me the pros and cons of each and which they would recommend?  I am looking for some answers based on someone's actual experience vs just theory.

My project isn't complex and is more for learning new things.  I guess I am looking for what is most popular and will be around longer.

I am not worried about users having old browsers, etc.  This is just for me.
jackjohnson44Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I love using bootstrap (and foundation http://foundation.zurb.com/) but I tend to use bootstrap more.

When you are building responsive sites to go across multiple devices, they have it all figured out.   To start with, the grid is the base http://getbootstrap.com/css/#grid.  You still need to put some thought into the layout of your page for xtra small screen to large screen as far as to you want div's stacked or 2 cols or 4 cols accross etc.  The media queries are in place and you just need to use classes like col-md-1, col-xs-1 etc.

I make good use of built in function for modals, nav's, slider/carousel, tooltips  http://getbootstrap.com/javascript/

I have been using it since the last version and have become  used to it that it is second nature and everything I do I used bootstrap as a base and just add my own styling.  You can still make use of jquery and jquery ui if you like.  Jquery UI has some tools for things like modals, but the big key to bootstrap is the built in media queries and supporting css.

I highly recommend using it in your projects.  Start with version 3 though http://getbootstrap.com/ as version 2 uses different css classes.
0
smeghammerCommented:
I have used Bootstrap, and also Pure (http://purecss.io/). I prefer Pure as it seems cleaner and easier to use. This is more an opinion than any specific techie reason.
0
jackjohnson44Author Commented:
Thanks, can you please elaborate a bit?
0
smeghammerCommented:
Hi,

I certainly would not call myself a CSS framework expert, but I definitely found Pure easier to use and implement than Bootstrap. The basic div/class structure is very simple and you can wrap your own markup and CSS easily. See http://www.smeghammer.com/index.htm for something I am working on curently [ignore the terrible design...]. The page structure is all based on pure units:
<div class="pure-g">
  <div class="pure-u-1">
...

Open in new window

and the navigation also based on the default pure navigation component:

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul class="menu">
        <li class="pure-menu-selected"><a href="index.htm">Home</a></li>
        <li><a href="tenants.htm">Tenants</a></li>
        <li><a href="landlords.htm">Landlords</a></li>
        <li><a href="contact.htm">Contact</a></li>
        <li><a href="links.htm">Useful Links</a></li>
    </ul>
</div>

Open in new window

You can mix in your own classes as well fo specific design elements:
<div class="pure-g menu">

Open in new window

Here, 'menu' is my specific CSS for the menu colours etc.

The thing I found most useful - which is the same for all CSS frameworks I guess - is of course cross-browser compatibility. You don't even need to think about it (unless of course you implement your own CSS as well) - but for structure, it just works. An added benefit (that I have not used on the above site) is that it is also 'responsive' - i.e. will adapt to different page dimensions, which is great if you want the same html to display on PC, tablet, smartphone.

I think because of its simplicity, and the good examples on their website, it is a good option for someone unfamiliar with CSS frameworks - it certainly was for me.


Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
" found Pure easier to use "
I never used Pure.  However, the grid/css in bootstrap 3 is much different then 2.  To make a responsive  row where it is split 50/50 for desktop and stacked for mobile is simple too:

<div class="row">
    <div class="col-xs-12 col-med-6">Left half for desktop, one row on top for mobile</div>
    <div class="col-xs-12 col-med-6">Right half for desktop, one row below for mobile</div>
</div>

Open in new window


I would like to try Pure, but the fact bootstrap is widely used and many  templates are built around it makes it a choice for a closer look.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.