Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Frameworks (Harry!!)

Discussion in 'Website Design Forum:' started by Kevin, Mar 4, 2009.

  1. Kevin

    Kevin Senior Member

    Okay.... so there's been a big fuss about grids and frameworks lately. I understand what grids are and I understand how and why they are useful. So now someone explain me what (CSS) frameworks are and how/why they are useful. And since Harry made one himself, I'm sure he can explain it. But if anyone else feel he can sufficiently explain this to me, be my guest. :up:
     
  2. Harry

    Harry Senior Member

    A CSS framework is essentially a pre defined series of rules and styles that have been made to accomplish a specific goal: speed up the development process, bring standards into line (where a company might use their own framework to make sure all sites remain essentially the same), to provide a certain look or style (my Typogridphy framework covers typography, grids and em based layout).

    Imagine how many websites use predefined columns and content widths? Making a framework that already has predefined rules in means you can ignore the boring repetetive parts and get stuck into the decent more specific and fun bits.

    There are arguments for/against CSS frameworks. The arguments for are mostly above and the arguments against are very good ones:
    1) Enforce non-semantic class names
    This is to be expected because someone is building a generic template which will later be given specific uses. For example, my framework falls into this because the columns are named after their sizes, because I don't know what people will be using it for later on.
    2) Enforce styles
    If someone develops a framework they are most likely going to work some design elements in, these may not be to everyoe's liking and can often conflict with the design of the actual build.
    3) Enforce techniques
    CSS Frameworks are just as prone to errors as anything else built by a person. Therefore if people are (re)using poor code, the problems spread.


    Another great idea for any developers similar to frameworks (but made by yourselves, rather than using one that someone else made) is modular CSS. Rather than tell you all about that though I can just point you toward: 24 ways: Making Modular Layout Systems


    Hope that helps, anything else just gimme a shout.
     
  3. AaronPollock

    AaronPollock Junior Member

    I just discovered frameworks yesterday in A List Apart. A great idea in my opinion (you can always override the rules in your own sheet).

    (As far as 'em' based grids are concerned, ALA's article was well worth a read!)
     
  4. Harry

    Harry Senior Member

    ALA linked to me and my framework in that article. Mine was one of the first em grid frameworks made, I just never publicised it properly :(</stupid>
     
  5. AaronPollock

    AaronPollock Junior Member

    Nice to get the link from there though!
     
  6. Kevin

    Kevin Senior Member

    Thanks for explaining. I downloaded your Typogridphy, but it seems to me that I would need to use it a couple times before I actually get the hang of it. But I like the idea of predefining repetitive classes and ids. Maybe I can just make a small framework for personal use, because I hardly use half of the things you defined in your framework. :eek:
     
  7. Harry

    Harry Senior Member

    Yeah definitely do that. Making your own is probably better than using someone elses really.
     
  8. philjohns

    philjohns Senior Member

    So what makes it be classed as a framwork? I design all my sites without images and colours first - all in greyscale and block colours for columns slightly varying in shades from one another - so I have quite a few of these....Could these be classed as framworks? Or am i completely missing something?
     
  9. Harry

    Harry Senior Member

    A framework remains identical and doesn't start a build - it has the ability complete a full build. If you start a project from the same CSS codebase each time (ie copying/pasting a full preset CSS file) then that's a framework. If you code similar stuff from the ground up each time you start a build then it's not a framework - it's just a habitual build process. A CSS framework is a CSS file/set of styles that already exists.
     
  10. Greg

    Greg Active Member

    Would a reset CSS file be considered a (small) framework in that case?
    Does anyone use any of the available reset stylesheets that are available from the likes of Yahoo Developer, or indeed your own reset stylesheet?
     
  11. Harry

    Harry Senior Member

    Nah a reset is a reset. Infinitely more valuable than a framework. I use the Yahoo! one but am thinking of switching to the Meyer one at some point. Also worth looking at is diagnostic CSS.
     
  12. Kevin

    Kevin Senior Member

    My reset is pretty limited but it does what it needs to do. I picked it up somewhere along the way (I can't remember where) but I've been using it for smaller projects (And I've only been having small things for the past few weeks... :p ). For bigger projects I use Meyerweb's Reset.

    Code:
    html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
     
  13. Harry

    Harry Senior Member

    You can actually expand the usefulness of that infinitely whilst trimming it down loads:

    Code:
    * {margin:0;padding:0;}
     
  14. Kevin

    Kevin Senior Member

    I've been told that using the * selector wasn't good.... Gimme a sec to look up where I read that.

    EDIT: 5 Ways to Instantly Write Better CSS - NETTUTS
    Found it... and I find it pretty strange that it's the same reset that I've been using for like 2 months now. The article is only a couple weeks old :confused:
     
  15. Greg

    Greg Active Member

    Cool, thanks for the info Harry & Onartis, do you guys both use some form of reset CSS on every project you work on now?

    Thanks,
    Greg
     
  16. Harry

    Harry Senior Member

    Yeah, the Yahoo! one on every build. I have a 'top section' of a css file that I paste into every project. Looks like:

    Code:
    /*YAHOO! RESET*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {      margin:0;     padding:0; } table {     border-collapse:collapse;     border-spacing:0; } fieldset,img {      border:0; } address,caption,cite,code,em,strong,dfn,th,var {     font-style:normal;     font-weight:normal; } ol,ul {     list-style:none; } caption,th {     text-align:left; } h1,h2,h3,h4,h5,h6 {     font-size:100%;     font-weight:normal; } q:before,q:after {     content:''; } abbr,acronym {    border:0; }/*---------- END RESET ----------*//*MAIN---------------------------------------------------------------------------------------------------------------- */html{    font-size:100%; /* Make sure font-size = 16px */}body{    font-size:62.5%; /* Makes 1em = 10px */    font-family:[font];    color:[color];    background:[color]; /* Always define a background */}#wrapper{    width:94em;    padding:0 1em;    margin:0 auto;    overflow:hidden; /* Clears floats */}
     
  17. Kevin

    Kevin Senior Member

    Do you always make them flexible?
     
  18. Harry

    Harry Senior Member

    As habit, yeah. Dead easy. The 62.5% on the body makes it a simple x/10 for ems so there's no reason not to once you get into the habit.
     
  19. iEthan

    iEthan Member

    I use Eric Meyer's reset.css. I find that the 960 Grid System works well.

    Then, for PHP, CodeIgniter or CakePHP.

    I love to use them, it makes my life so much easier.
     
  20. Kevin

    Kevin Senior Member

    Yes I've seen the 62.5% a few times before. And I actually never knew (didn't really wonder about it either though) what it did. Until I saw your note behind it. I've learned a lot of new stuff from you today :)
     

Share This Page