SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Right Frame of Mind: Applying the Lessons of CSS Frameworks

    Notice: This is a discussion thread for comments about the SitePoint article, The Right Frame of Mind: Applying the Lessons of CSS
    Frameworks
    .

    __________

  2. #2
    Visible Ninja bronze trophy
    JeffWalden's Avatar
    Join Date
    Sep 2002
    Location
    Los Angeles
    Posts
    1,709
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Great article Alex. I've never really used CSS frameworks in the past with the exception of the Eric Meyer reset code. Frameworks, for me, are always one of those things that I need to force myself to get into. The learning curve is higher than just writing my own code but once I'm into it I can easily reuse the code. Do you recommend any CSS framework over another?

  3. #3
    SitePoint Member potsed's Avatar
    Join Date
    Jan 2005
    Location
    ZA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a css framework in my own library and this is giving me some new ideas thanks for that. There is one thing I would love to see as part of css and that is variables. I think it would be great if at the top of your css file you could set certain values that could be used throughout the file for example you could do something like

    $titlecolor: #F00;

    h1,h2 { color: $titlecolor; }

    this would make it even simpler to make design changes than it is currently. I would love to get some peoples thoughts on this issue.

  4. #4
    Team ********* Louis Simoneau's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    228
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @potsed, there are server-side frameworks that let you do that: you write a "pre-css" sheet in a markup language (which can use variables and other enhancements), and the server processes it to spit out CSS generated from that.

    For example, SASS for Ruby: http://sass-lang.com/

  5. #5
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the informative article. I've never given CSS frameworks much thought, simply because I was happy with how I currently wrote CSS, but as you highlight, the two main benefits of CSS frameworks (Resets and Baseline Styles) are simply helpers you can plugin into any project which create a clean and predictable canvas to construct your design on top of. I'll definitely be using Resets and Baseline style in my future projects. Thanks again.

  6. #6
    SitePoint Guru
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    852
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just wrote a lengthy comment but lost it on submit because apparently an invalid thread was specified?

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even the Eric Meyer reset does not cope with the font nonsense that Opera produces. Is there any reset that makes my design look, in Opera, as it does in all the other major browsers?

  8. #8
    SitePoint Addict NetNerd85's Avatar
    Join Date
    Aug 2005
    Location
    Australia
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You hit the nail on the head. CSS frameworks are absolutely useless all you need is the frame of mind they TRY to teach. A year of working with CSS (full time) will teach you all you need to know as well. CSS frameworks are not needed. They don't mean anything, you only need to structure your own code. I've been working with CSS for 10 years, the thought of a CSS framework is beyond ridiculous, way beyond. The language is too small to bother and could never be general enough for most cases or flexible enough. Frameworks are for programming languages. Next there you fools will be trying to sell a HTML framework.

  9. #9
    SitePoint Guru mattymcg's Avatar
    Join Date
    Oct 2005
    Location
    Melbourne, Australia
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great stuff Alex, there are definitely plenty of options and factors to consider!

  10. #10
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JeffWalden View Post
    Great article Alex. I've never really used CSS frameworks in the past with the exception of the Eric Meyer reset code. Frameworks, for me, are always one of those things that I need to force myself to get into. The learning curve is higher than just writing my own code but once I'm into it I can easily reuse the code. Do you recommend any CSS framework over another?
    Thanks Jeff, I think the key point to take from my article is that if you know how to produce your own CSS, the need for frameworks as structural aids is rather moot. I don't use CSS frameworks nor do I recommend them for general purpose use, what I do recommend is more people take away some lessons from them because as unrequired as they are, they do in-fact serve a real world purpose and have a lot more care lavished on them than most of us care to-do. Using the right selector for the right job and tightening the bolts will increase your productivity, and that by far is a great lesson frameworks teach us.

    Quote Originally Posted by Wardrop View Post
    Thanks for the informative article. I've never given CSS frameworks much thought, simply because I was happy with how I currently wrote CSS, but as you highlight, the two main benefits of CSS frameworks (Resets and Baseline Styles) are simply helpers you can plugin into any project which create a clean and predictable canvas to construct your design on top of. I'll definitely be using Resets and Baseline style in my future projects. Thanks again.
    I also recommend selectors being used wisely, we tend to underestimate the value of the DOM, specificity and inheritance within the box model, being able to balance the need for new properties and values against the chance to cut out a few by inheriting existing style can really improve the quality of your work and help reduce the overall size of those stylesheets. Plus if you end up recycling components (such as dropdown menus), the pre-scripted style can increase your productivity.

    Quote Originally Posted by NetNerd85 View Post
    You hit the nail on the head. CSS frameworks are absolutely useless all you need is the frame of mind they TRY to teach. A year of working with CSS (full time) will teach you all you need to know as well. CSS frameworks are not needed. They don't mean anything, you only need to structure your own code. I've been working with CSS for 10 years, the thought of a CSS framework is beyond ridiculous, way beyond. The language is too small to bother and could never be general enough for most cases or flexible enough. Frameworks are for programming languages. Next there you fools will be trying to sell a HTML framework.
    I think calling them useless is a bit harsh, if they teach more people to pay attention to their code and to spend extra time learning to structure what they write, they may serve the lesson well and perhaps the future will lead to less reliance on today's cut and paste philosophy... a very worthy cause.

    Quote Originally Posted by mattymcg View Post
    Great stuff Alex, there are definitely plenty of options and factors to consider!
    Thanks matty! I'm pretty excited that my first ever published article has been here (as I spend so much time posting in these forums), hopefully it'll get people opening their minds to the possibilities of CSS and we'll see more exciting innovations in the future... I know from experience that CSS experimentation is fun!

  11. #11
    SitePoint Addict NetNerd85's Avatar
    Join Date
    Aug 2005
    Location
    Australia
    Posts
    298
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think calling them useless is a bit harsh, if they teach more people to pay attention to their code and to spend extra time learning to structure what they write, they may serve the lesson well and perhaps the future will lead to less reliance on today's cut and paste philosophy... a very worthy cause.
    Good structure: a good book or a good teacher should be doing that though (or a co-worker), not a framework. You still have to copy and paste reset code. I don't think CSS is like JavaScript where you can copy and paste any old brown code and tada you have a clock counting down. CSS is very touchy when it comes to playing with other styles. You have to treat CSS with respect (unlike JavaScript) and I don't think frameworks are the answer. I've seen some nasty CSS code from noob coworkers, I mean, nasty, the kind that makes you sad deep down. But I take their hand and show them the light... in a sense.

    Once you've done like 15 - 20 websites, you've done them all. Occasionally you come across something but it is so unique no framework can help you.
    a new day, a new beginning
    never follow the crowd, the crowd is poor!

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    While I agree with you, the unfortunate situation is that not everyone has a good book or teacher... or anything else, the point of this article isn't to highlight frameworks as some kind of "Unicorn" (or silver bullet), it's to point out that if you look under the hood, their just a bunch of selectors applied loosely, and if you spend time with your code, you can do the job just as well without having some 3rd party crutch holding your site together. I would much rather people examine the CSS code of others (even if it includes frameworks) to get an understanding of how things work, than run blissfully ignorant of what's going on and just use them to save time (as is what's happening widely). Like you said, education is the key, and I'm just showing CSS frameworks for what they are.

  13. #13
    SitePoint Member biswa's Avatar
    Join Date
    Nov 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS frame work have lot's of code which we don't need in our page, so it's make heavy.I think we need to select light weight CSS frame work like "MALO". I am using this.It's very light want no more unwanted code.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Location
    West Virginia, USA
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the tone and the structure of this article, Alex, as well as the content. Nicely done!

    I had a quick look at the two frameworks you mention in the first paragraph, and there's a lot of good stuff there. I think we all develop our own sort of framework as we go along, borrowing from others and from our own successful implementations. I also spend significant time simply stripping away anything and everything in my CSS that is redundant or unneeded, which is the opposite of the "frameworks" concept although each has its place.

    I just wanted to put in a word for liquid layouts and those of us who use them and love them. In a quick search, I found two frameworks that emphasize liquid layouts. Here are links for more information:
    Emastic css framework
    Elastic CSS framework

    Thanks again, Alex!

  15. #15
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alex, Awesome post! Of the frameworks that you mentioned above, is there one you would recommend the most?

    Thanks,

    Jim

  16. #16
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not too shabby, Alex. Good job and very helpful. :.)

  17. #17
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by the.peregrine View Post
    I had a quick look at the two frameworks you mention in the first paragraph, and there's a lot of good stuff there. I think we all develop our own sort of framework as we go along, borrowing from others and from our own successful implementations. I also spend significant time simply stripping away anything and everything in my CSS that is redundant or unneeded, which is the opposite of the "frameworks" concept although each has its place.
    Thanks again, Alex!
    Thanks for the feedback the.peregrine, I've encountered ElastiCSS and Emastic (I include this one in the article), though a few of them got dropped during the writing process as many of them pretty much replicate those principles I put forward in the post. You pretty much hit the nail on the head that we do tend to produce our own frameworks! The ability to refine our code and perhaps take that step to make things more fluid and portable is precisely what the article is aimed at. After all, when we control our own CSS we hold the power to take away the downsides those libraries of code hold over us.

    Quote Originally Posted by Wolf_22 View Post
    Not too shabby, Alex. Good job and very helpful. :.)
    Thanks

  18. #18
    SitePoint Addict silver trophy
    Join Date
    Oct 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great article. Thanks! I wasn't aware of the power of these frameworks.... Can you give us your opinion of which framework is the best. Cheers.

  19. #19
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    hairybob, I think you missed the point of the article, it's not about what framework you should be using, it's the opposite. No framework can ever compete with a solid foundation knowledge of CSS and some sensible coding practices, looking at how their constructed can help you improve the flexibility of your own code.

  20. #20
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Great article Alex,
    I found myself revisiting @stubbornella 's Object Oriented CSS again recently.
    At first I was not convinced at all - They were structuring the css in quite a different way to what I was used to and putting less semantics into the classes to acheive greater code re-use.
    I actually quite like the concepts now, it really can keep the size down by grouping specific types of styles together and using multiple classes.
    The concepts in CSS Frameworks do solve specific particular problems.

    Off Topic:


    I really like your website too, very unique.

  21. #21
    SitePoint Enthusiast
    Join Date
    Jan 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by huexotzinca View Post
    Notice: This is a discussion thread for comments about the SitePoint article, The Right Frame of Mind: Applying the Lessons of CSS
    Frameworks
    .

    __________
    Really good stuff. Much to learn from here. I think that I've used some of these practices without thinking about it. Great food for thought.

  22. #22
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Late to the party, Alex, but congratulations on a fine article.

    Quote Originally Posted by AlexDawson View Post
    I also recommend selectors being used wisely, we tend to underestimate the value of the DOM, specificity and inheritance within the box model, being able to balance the need for new properties and values against the chance to cut out a few by inheriting existing style can really improve the quality of your work and help reduce the overall size of those stylesheets. Plus if you end up recycling components (such as dropdown menus), the pre-scripted style can increase your productivity.
    I'm going to write this on the wall over my monitor. Words to inscribe on your forebrain!

  23. #23
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    CSS frameworks? Really?? Really???



    Next you're going to tell me how to apply paint without walls.


  24. #24
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Location
    Melbourne, Australia
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alex - have you used csscaffold at all? It provides a grid framework, I'd love to know what you think of it.

  25. #25
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Great article Alex,
    I found myself revisiting @stubbornella 's Object Oriented CSS again recently.
    At first I was not convinced at all - They were structuring the css in quite a different way to what I was used to and putting less semantics into the classes to acheive greater code re-use.
    I actually quite like the concepts now, it really can keep the size down by grouping specific types of styles together and using multiple classes.
    The concepts in CSS Frameworks do solve specific particular problems.
    Thanks! I've always been a fan of minimalism (both in code and designs), knowing how to make your CSS work hard for you is great, especially if you work on websites that have increasing bandwidth costs. Cleaning up your CSS and tweaking it to the max can literally save you gigabytes of bandwidth!

    Quote Originally Posted by Black Max View Post
    Late to the party, Alex, but congratulations on a fine article.

    I'm going to write this on the wall over my monitor. Words to inscribe on your forebrain!
    Thanks Max, though I doubt there's enough space in my forebrain, It would be a case of old stuff out, new stuff in

    Quote Originally Posted by Michael Morris View Post
    CSS frameworks? Really?? Really???
    Next you're going to tell me how to apply paint without walls.
    Assuming you read the article, it's lucky I didn't promote their use then. Using the same comparative you did, my article is like understanding the composition and chemistry of the paint before finding some self-built walls to apply it too (so you know how to get the best and cleanest coverage).

    Quote Originally Posted by arcwhite View Post
    Alex - have you used csscaffold at all? It provides a grid framework, I'd love to know what you think of it.
    I've played with it... but I'm not a big fan of relying on 3rd party libraries and components unless I have any other choice. I'm a bit of a purist


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •