• 0

Advice on CSS Framework


Question

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?

Link to comment
https://www.neowin.net/forum/topic/1260818-advice-on-css-framework/
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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.

  • 0

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. 

  • 0

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.

  • 0

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? 

  • 0
  On 21/06/2015 at 15:10, Dashel said:

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.

  • 0
  On 21/06/2015 at 15:10, Dashel said:

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.

  • 0
  On 23/06/2015 at 12:53, Riva said:

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.

  • 0

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.

  • 0
  On 12/07/2015 at 21:23, Dashel said:

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

attachicon.gifCapture.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">
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Lmao. Cries about not playing those games not installed and yet don't ever want to touch them.
    • If I want to merge folder trees that have a similar structure, Beyond Compare is always my first choice. It's not free but it's awesome. If I want to just scan a whole drive/folder and find duplicates that are taking up space, I like Czkawka.
    • Claude Code gets throttled as Anthropic rolls out fresh usage caps by David Uzondu Claude Code, the AI-in-terminal utility developed by Anthropic and launched back in February, is getting updated usage limits following weeks of user complaints about being abruptly cut off. Many developers on the "$200/month Max plan" found their access blocked after just a few requests, with no explanation from the company. In a recent thread posted to X, the AI lab explained that it has seen "unprecedented demand since launch," pointing to some of its heaviest users who were running the tool continuously in the background 24/7, with one person reportedly consuming tens of thousands of dollars in model usage on a single $200 subscription. Anthropic also claimed that some users were violating its usage policy by sharing and reselling accounts, which impacts system capacity for everyone. These factors all led the company to announce new weekly limits that will be added on top of the existing five-hour caps, effective August 28. Max plan subscribers will have the option to buy additional usage at standard API rates if they hit their cap. Here's what the new weekly limits look like: Pro Plan ($20/month): An estimated 40 to 80 hours of usage with the Sonnet 4 model. Max Plan ($100/month): An estimated 140 to 280 hours with Sonnet 4 and 15 to 35 hours with the top-tier Opus 4 model. Max Plan ($200/month): An estimated 240 to 480 hours with Sonnet 4 and 24 to 40 hours with Opus 4. Per TechCrunch, the company provided these hour-based estimates, noting that the actual numbers may vary based on the size of a project's codebase. What's interesting is how this new structure compares to the old marketing. Anthropic previously advertised its $200 Max plan as offering 20 times more usage than the Pro plan. Based on these new hourly estimates, that multiple is now closer to six. It is possible the 20x figure still applies when measured in tokens or raw compute, but, according to TechCrunch, the company has not clarified that point.
    • I don't give a rat's f### what Trumpette, the Putin puppet likes!
  • Recent Achievements

    • First Post
      Gladiattore earned a badge
      First Post
    • Reacting Well
      Gladiattore earned a badge
      Reacting Well
    • Week One Done
      NeoWeen earned a badge
      Week One Done
    • One Month Later
      BA the Curmudgeon earned a badge
      One Month Later
    • First Post
      Doreen768 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      642
    2. 2
      ATLien_0
      260
    3. 3
      Xenon
      165
    4. 4
      neufuse
      142
    5. 5
      +FloatingFatMan
      107
  • Tell a friend

    Love Neowin? Tell a friend!