Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS framework~ what's your view?

Discussion in 'Website Design Forum:' started by modachick, Dec 9, 2008.

  1. modachick

    modachick Junior Member

    Hello everyone,

    I have been looking into CSS framework recently, such as Blue Print, Tripoli, 960 gs, Bluetrip, Yahoo UI..., etc. I do like the advantage of bulletproof cross-browser compatability. However, I suggest any beginner to have a fully appreciation of CSS b4 using any framwork.

    I'd like to ask any developer out there who uses any kind of the framworks, and why choose one than the others. Or the reason why choosing not to use any.

  2. blueocto

    blueocto Senior Member

    I've looked into to it, but so far I haven't really felt the need to use one - I think it restricts the designing of the site. Especially when you may want to introduce Flash into your site, I can't see where the framework would help.

    Although I'm sure its useful for the less designer types out there and for things like Wordpress :-S
  3. easylancer

    easylancer Junior Member

    I decided to try out BlueTrip CSS Framework after seeing it on a review site, I thought I would use it for my project I was about to start and I am happy that I used it as it made development time less and the site was almost 100% compatible with IE6 without me having to write any code for it to happen. The bits that don't work in IE6 is based on the code I written. Don't knock CSS Frameworks before you try them. The site I used it on is the one in my signature.
  4. Greg

    Greg Active Member

    I'd not really heard of frameworks before, but having just looked at some of the ones mentioned in this thread they sound like they could have some real benefits. From just briefly reading the information on a few of the sites I don't believe they would restrict the design process in anyway, from the way I understand it you would design your site as normal and use the frameworks as a starting point for your coding to give you a level playing field to start with, with various CSS browser fixes integrated.

    Am I right with what I'm thinking above? As I mentioned never used these myself just basing this on the information from the sites of the frameworks that have been mentioned in this thread.

    Would be interested to hear more about this too...

  5. easylancer

    easylancer Junior Member

    You are correct Greg, a CSS Framework has similiar principles as a PHP Framework, that it provides a base for you to build upon. There is no restriction a Framework will bring, since you the user can still override the base classes if you want to.
  6. blueocto

    blueocto Senior Member

    Oh I have no doubts that it is completely beneficial from the coding aspect, hell I'd definately use it for that reason as I'm still catching up on the latest web standards.
    My view was purely front-end based heh
  7. modachick

    modachick Junior Member

    Hey! Easylancer, thanks for sharing your insight. I've checked out The Hub. It's great! I have a better understanding of how to use the grid system after reading your code.:up:

    I also recommend BlueTrip. It has the best bits of all the other frameworks. The designer, Mike, is also very cool. He is really helpful in his forum if you've got any questions.

    And thanks everyone for your feedback!!
  8. mrleesimpson

    mrleesimpson Guest

    I really like frameworks. They take a little getting use to and they're not the best solution for every project but overall they seem to work well.

    I've found they work best for more complex layouts rather than your 2-column/3-column job.
  9. modachick

    modachick Junior Member

    Thanks, Mrleesimpson! In your opinion, which grid system work best for you, and why? 960gs or Blueprint's 24-column gs?
  10. Jazajay

    Jazajay Active Member

    Jazajay's Cross Browser CSS
    O.K Cross browser CSS is not hard, even with hacks.
    Here's how to do it ~
    Write the code for Opera, due to that technically being the most standards advanced browser of the lot and secondly the lack of good long term hacks to deal with any problems in that browser.

    Then use vender CSS specific hacks to hit the most modern version of each.

    Now for IE, well IE8 on a small site tends to render much like Opera, however if it doesn't stick it in a conditional comment hitting 8 or stick in Microsoft's meta and get it to render like IE7. IE7 can also be hit with a exact conditional comment.

    Then stick any fixes for IE6 which still has a huge amount of usage in a ie6 specific conditional comment and job done cross browser CSS.

    O.K so here goes cross browser 101.

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Your Page title</title>

    <link type="text/css" rel="stylesheet" media="screen" href="style/main.css" />
    <!--[if IE]>

    <link type="text/css" rel="stylesheet" media="screen" href="style/ieFix.css" />

    <!--[if IE 6]>

    <link type="text/css" rel="stylesheet" media="screen" href="style/ie6Fix.css" />


    Now for the most recent versions of each browser ~
    In the main css file referenced above you will have something like this ~

    #header li{margin-top:20px}

    Looks fine in Opera but messes up in Safari and Firefox.

    So write this
    #header li{margin-top:20px}
    #header li,x:-moz-any-link{margin-top:10px}
    #header li,x:-webkit-any-link{margin-top:5px}

    Now Opera moves the list element 20 pixels from the top.
    Firefox moves the same element 10 pixels from the top.
    Safari and any other Webkit browser moves it down 5 pixels

    Jobs a good un.

    Now if you want to hit older versions you just have to use CSS selectors that those older versions don't recognize. That browser does then not understand it, so the rule is then ignored. So we want to hit Firefox2 for example then write this:

    #header li{margin-top:20px} //Opera, IE, other browsers
    #header li,x:-moz-any-link{margin-top:10px} //Firefox2
    #header li,x:-moz-any-link:before{margin-top:5px} //Firefox3, Firefox2 does not understand before but because FF3 does precedance takes over.
    #header li,x:-webkit-any-link{margin-top:5px} //Safari/Webkit enabled browsers

    Yes they are hacks before any ones goes on the almighty, and TBH when the browser developers want to get around to fixing their broken products, so they all display the same, then I will stop using hacks, but until then I wont.

    The other upside is these hacks will never go obsolete, the next version of the browser released just gets the hack, but I've explained how to get older versions so you should never have any more of those problems which last more than an hour just to get a div to align properly in 1 browser.

    Please don't start using frameworks it stifles creative IMO. Learn the code your self, then you can be one of those guys, or gals, who everyone else, who uses CSS frameworks, goes WOW how is that done.


    Key ~
    Green ~ CSS
    Purple ~ HTML
    Orange ~ Editor comments
  11. Greg

    Greg Active Member

    Interesting Jaz... do you have your own 'reset' stylesheet that you use?
    Never used a reset CSS but heard they can be quite useful... guess that's along the same lines, just a series of hacks to level the playing field?

    EDIT: Moving this thread to the Web Coding/Dev area as seems more appropriate there :)
  12. Aarlev

    Aarlev Member

    CSS guru Eric Meyer has a good starting point for Reset CSS here:

    Eric's Archived Thoughts: Reset Reloaded

    I've used this Javascript CSS browser selector a few times and find it really good.

    But I guess it would be better to do it your way Jaz in case people have JS disabled.
  13. Jazajay

    Jazajay Active Member

    Do you mean something like this ~

    TBH I find that that actually causes more problems or longer CSS.

    So for example it would mean that in some circumstances you would then need to counter most of the padding and margin's that you have just set to a constant, amongst all browsers, this then leads to longer files which in turn leads to a hit in performance due to the longer downloads and a hit on your bandwidth, because of the larger files so you are worse off IMO.

    I tend to find, on a complicated design, you will only actually need 4 specific hacks.

    But also remember that may be over kill Safari and Firefox both offer in-line specific vender CSS rules and IE8 was rumoured to introduce it's own variation using the -ms- syntax.

    There are a few Opera ones using -o- but I haven't found a good one just to hit problems in Opera. Technically they are problems with how Safari and Firefox render the code, and hacking Opera is easier, if technically the wrong way around.

    For example if it is a problem with margin left then you could go with:
    #header li{margin-left:10px;-moz-margin-start:-10px;-webkit-margin-start:-5px}

    You should be able to work out which is which.

    Firefox's extensive specific CSS rules ~

    Safari's specific CSS rules, and all their current CSS rules ~
    Safari CSS Reference: Supported CSS Properties

    IE8 specific CSS rules ~

    Purple ~ CSS
  14. Jazajay

    Jazajay Active Member

    MPO is that code should be where it belongs, so I would agree that this is better Aarlev :D

    For example both CSS and JS should be in external files, a HTML file, in most cases, this is where I will contradict myself, should be just HTML.

    The only exception IMO is if the CSS or JS is small and the page is hardly accessed. Then it should go directly in the HTML file.

    This is due to the fact that if it is small, and the page is not accessed that often, the page will render quicker with it cached actually in the HTML file, rather than having a longer download time loading an external sheet/file.


Share This Page