Advice on CSS Framework

[Dashel]

What is the recommendation of a CSS framework for a couple VS developers looking to add some polish and consistency to a internal site update?  Is Bootstrap the defacto choice or would others like Base, Foundation, Pure, Min, etc be a better fit?

 

Simple, fast, and desktop first are their goals, responsive would only be of fringe benefit.  Something easily reusable in a universal Win10 app a plus.  It seems like everyone is in the CSS framework game now (even Intuit).  What are a couple of older developers to do?

[Brian M. Veteran]

From a dev point of view, Bootstrap seems to be the most convenient (of the main one) for our developers, whilst foundation seems to be the most convenient for our designers.

That said, ask yourself if you really need a CSS framework. The biggest feedback about them that we get from our dev team is that they seem to spend more time faffing with the framework, and trying to overcome some of the "features" of the css frameworks to get the result they actually want. Foundation and the like can also add a few hundred kb to page, and also a fair few extra http requests.

[firey]

I use bootstrap for all styling I need (they expand with custom styles where it falls short).   I have been using it at work for the past 4 or 5 months.   My boss was recently asking why I was doing it the way I was (classing out everything [which is how bootstrap works]) I explained that is how you do it now adays... he went and researched bootstrap and told me that it makes a lot of sense now, that it is pretty big in terms of what it offers.

He is pretty stuck on the old methodologies (inline css, element level styling, etc) but he is opening up to bootstrap and new methods because of it.

I find there are times I have to fight with it to do what I want (primarily fuxxing with the margins and padding) but there are times where when I want to accomplish something I have to break the bootstrap norms/way of doing it and class things out in strange ways.

I will also note, that VS 2013 (and beyond) all web application projects come with jQuery, jQueryUI, and Bootstrap installed by default.  Font-Awesome is also available via nu-get. 

[game_over]

I prefer Skeleton. it's very small and only offers basic styling for the tedious stuff like forms on top of the responsive grid.

 

With frameworks like Bootstrap i found myself removing code, overwriting selectors and just copying and pasting snippets off their website, it's a boring way to work.

 

If you really want to use a framework that big then you should go with LESS/SASS so that you can easily bolt on the components you want to use... on an internal site it might not be much of an issue but on a live large website sticking the full bootstrap source in there to use half of it's components and then overwriting the ones you do use is a bad idea.

[Dashel]

Thanks for the feedback everyone.  I think the need is summed up by fiery's comment, "(they are) pretty stuck on the old methodologies (inline css, element level styling, etc) but he is opening up to bootstrap and new methods because of it."  They are coders that admit to not being worried about 'pretty', so it also forces them to be consistent in their front-end approach.  I can see how a framework could be a con for specific needs or for those who have already had the time to 'create' their own baseline template.

 

What is the story on jQuery UI/Mobile?  (They are familiar with jQuery, but after looking I'm not sure the spit nature, or the odd grid system, is worth the hassle.)  I assume jQMobile will supersede it, as the other major ones are already 'mobile first'? 

 

Thanks for the tip on Skeleton, hadn't seen that one. 

 

So, when people speak of the 'bloat' or speed of larger ones like Bootstrap compared to say Skeleton, is that mainly the 'download' size of the sheet or overhead within the browser? 

[firey]

Thanks for the feedback everyone.  I think the need is summed up by fiery's comment, "(they are) pretty stuck on the old methodologies (inline css, element level styling, etc) but he is opening up to bootstrap and new methods because of it."  They are coders that admit to not being worried about 'pretty', so it also forces them to be consistent in their front-end approach.  I can see how a framework could be a con for specific needs or for those who have already had the time to 'create' their own baseline template.

 

What is the story on jQuery UI/Mobile?  (They are familiar with jQuery, but after looking I'm not sure the spit nature, or the odd grid system, is worth the hassle.)  I assume jQMobile will supersede it, as the other major ones are already 'mobile first'? 

 

Thanks for the tip on Skeleton, hadn't seen that one. 

 

So, when people speak of the 'bloat' or speed of larger ones like Bootstrap compared to say Skeleton, is that mainly the 'download' size of the sheet or overhead within the browser? 

Browsers/Internet now aren't affected too much by size.  But bootstrap has so much that it can do (it provides it's own layout system) that it can be kind of initimidating at first and takes some learning.  Thing with bootstrap... is you can get some really nice templates on bootsnip for different aspects, then it's just a matter of using your own ID's/logic.  I am 100% a developer, I suck with design and layouts.. but I understand new logic and new methods.. and since I can't design worth a ######.. bootstrap makes it really easy.. as it's ALL code.

jQuery UI/ jQuery Mobile... are different.  jQuery UI provides elements that are more interactive.  Such as accordian panes,  date pickers, etc.   jQuery mobile is just a slimmed down jQuery with some ui styling elements.   

Browsers on phones nowadays are more than powerful enough to run/render straight bootstrap + jQuery.     Since bootstrap has its' own grid system.. better off (in my opinion) to use it.

[game_over]

Thanks for the feedback everyone.  I think the need is summed up by fiery's comment, "(they are) pretty stuck on the old methodologies (inline css, element level styling, etc) but he is opening up to bootstrap and new methods because of it."  They are coders that admit to not being worried about 'pretty', so it also forces them to be consistent in their front-end approach.  I can see how a framework could be a con for specific needs or for those who have already had the time to 'create' their own baseline template.

 

What is the story on jQuery UI/Mobile?  (They are familiar with jQuery, but after looking I'm not sure the spit nature, or the odd grid system, is worth the hassle.)  I assume jQMobile will supersede it, as the other major ones are already 'mobile first'? 

 

Thanks for the tip on Skeleton, hadn't seen that one. 

 

So, when people speak of the 'bloat' or speed of larger ones like Bootstrap compared to say Skeleton, is that mainly the 'download' size of the sheet or overhead within the browser? 

 

The size is so small it's barely noticeable but Skeleton is over 100kb smaller.. so on a large primarily mobile site it can make a difference.. It all depends on use case, for an internal site Bootstrap will be fine.

[Steve H.]

Bootstrap framework is really great for mobile first design. It is true the CSS could be heavy for mobile devices. But while downloading it we can customise our download and select only those CSS which are needed in our design works.

[Mulrian]

If you are not building a complex UI then either will do the trick. From experience though as soon as you need to make heavy changes then bootstrap becomes unmaintenable.

 

Pretty much all of them become unmaintainable when you need to start making big changes to suit your needs. Usually it's a case that the product doesn't cater for you and you need to role your own out.

[greenwizard88]

To echo Riva, bootstrap is fantastic if you're sticking to the "bootstrap" feel. Once you start playing around with the "feel", it starts to become a mess.

[Dashel]

Good feedback, how do I give you all credit.

 

I guess personally I see a benefit for them that they would be constrained by look/feel or at least commit to not creating too much variation.  What would be an example of a big/heavy change of a more common customization item?  I guess I read that you must recompile any font changes (to questionable effect)

 

Can I ask a stupid how-to question?  I was playing around with it and can't for the life of me figure out how to assign a background color to a row column. (Was making a demo landing page and wanted a 2/1 full page split with a background color/image filling the left side.

[firey]

You can either class it like..

<div class="row red">

And in css have

.red { background-color:red;}

Or do

<div class="row" style="background-color:red;">

[Dashel]

You can either class it like..

<div class="row red">

Sorry, I misspoke.  I see how I can extend a row horizontally, but how do you do a vertical column block?

 

[firey]

Sorry, I misspoke.  I see how I can extend a row horizontally, but how do you do a vertical column block?

Capture.PNG

depends on your framework (this is where bootstrap is nice) but basically you would have two div's side by side.  The second one would have a color to it.  Also depending how you wanted it to work.. you could also just asign the div a right-border with color

(using divs)

.red {
 background-color:red;
}

<div class="col-sm-6"></div>
<div class="col-sm-6 red"></div> (or) <div class="col-sm-6" style="background-color:red"></div>

(using border)

 

.right-solid-blue {
 border-right: 5px solid blue;
}


<div class="right-solid-blue">