Using CSS Frameworks

The point that I took from Laura's article, that frameworks such as Bootstrap are great for prototyping and quick mock-ups (handy if you want to play around with layout or a certain effect, maybe) - but are bloated when it comes to production websites.

Many frameworks do clearly state that they are starting point and not necessarily great for final, live websites.

Also, the point that if this project got passed to another developer, after you'd left, 3 months, 6 months later... would they have the slightest idea what this means?

<div class="bs-docs-grid">
        <div class="row show-grid">
          <div class="span1"></div>

It is hard to be 'semantic' but it's better to be human-readable, than have 20 classes you might use, just because they came with a packaged framework.

Laura agrees that, if you hand-code a website and only use what you actually need on that specific project, then it will be more semantic and understandable.

Oh Snap! @Caroline, that analysis is a bloody brilliant way to show the downsides of using frameworks outside of mockups.

Is there a tool or resource that helps with converting a prototype built on a framework into a production-ready website with semantic markup? Or how do you go about doing that?

The links broken: http://12devsofxmas.co.uk/post/2013-01-01-day-7-grid-frameworks

But yeah, I just read that article and now I'm confused. Treehouse encourages the use of frameworks so that you don't have to reinvent the wheel or redo cross-browser research (such as normalize.css or jQuery). However, the result of their smellslikebakin tutorial looks like the nonsemantic HTML that Kalbag criticizes. What should have Nick done for smellslikebakin? Drop the 'grid_*' classes completely? Or mixed in those grid classes with more semantic markup?

Also, another problem with the smellslikebakin tutorial is the use of id's in styling, which modern CSS writing discourages because of the long term effect on your workflow.

Found these articles that helped clarify what Kalbag is talking about:

• http://css-tricks.com/semantic-class-names/
• http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html
• http://blog.pamelafox.org/2012/12/a-tale-of-two-bootstraps-lessons.html

From the article ...

[Their] designed to be hard to break, so as many use-cases as possible are accommodated. This means a lot of bloated markup.

That just about sums up my views on frameworks like Twitter's Bootstrap or Zurb's Foundation.

Well it seems like if you want your HTML to remain semantic, but still use frameworks, you'll have to use a CSS preprocessor to use mixins provided by Bootstrap or The Semantic Grid System.

That is a lot of code that is not getting used. I experimenting and built sites using skeleton frame work. It does make you think that coding it from scratch is the best way for the user. More so if they are mobile device.

Normal I right my own code because I feel like am stripping styles when using a framework.

You now something wrong when the above happens.

I have found the following really good resources for writing better code.

SMACSS

Harry Roberts post

A good alternative to a framework are interface design patterns such as pea.rs from Dan Cederholm of SimpleBits.

As mentioned in another comment I agree that frameworks are more of a tool for rapid proto-typing rather than full blown production systems. It makes it easy to markup a page and get a basic visual design down quickly. Some people prefer to do all the markup in wireframes or photoshop...which is perfectly acceptable as well.

Once you start prepping an app for a production environment you are much better off converting that markup to hand coded css vs a framework. As already pointed out there are numerous speed and size improvements. I think a big problem stems from many people using frameworks to build a minimally viable product, launch it, and never underdstand the ramifications of continuing to use the framework code.

I can understand that the bloat is not good and should be avoided. But the idea that rewriting the wheel each is a waste of time should be considered. If we are all making our own grids anyway, why not just use a grid already created?

@Brendan -

Personally I think that the Zurb foundation & Bootstrap add in too much to start with. You need to learn to walk before you run.

So learning the foundations of: fluid grids, fluid images, good typography, media queries. Then maybe add in a pre-processor like less.

Once you've got those down you will be better able to work on a large site that is already using a framework. However I'm a firm believer in not solving problems you don't have yet.

@James,

True, that makes sense. I feel like I'm in a rush to get going I guess. I want to keep learning, but I don't feel my abilities are high enough to feel comfortable approaching prospective clients.

Brendan -

I don't feel my abilities are high enough to feel comfortable approaching prospective clients.

I think this is case of needing to walking before you run. You need to be able to code features by hand before you use frameworks to take any shortcuts.

Check out this blog post on when can I call myself a web developer fellow Treehouse member Scott Magdalein.

You also might find my own Learn Tribe list on Intro to Web Design to be a worthwhile guide on your journey.

Thanks, I'll be sure to have a look over those.

I'd like to add that, while I'm not a general fan of css frameworks, I do think they can be helpful when building dashboards.