1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

best grid framework to use?

Discussion in 'HTML & Website Design' started by chovy, Sep 9, 2012.

  1. #1
    what's the best grid framework to use these days?
     
    chovy, Sep 9, 2012 IP
  2. 3dy.ro

    3dy.ro Member

    Messages:
    100
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    45
    #2
    Nowadays, probably none. But if you really want to do it, you might go for 960gs - which everybody uses anyway (everybody that used grid systems, that is).
     
    3dy.ro, Sep 10, 2012 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    I'll second 'none' -- it's a sleazy shortcut at best, a fat bloated bunch of idiocy that defeats many of the reasons to even be using CSS in the first blasted place -- not the least of which being separation of presentation from content. By definition they involve saying with classes in the markup what things look like instead of what they ARE -- which makes targeting more than just the perfect magical combination of screen width and font-size the designer happened to be using near impossible.

    Semi-fluid layout so you can set your 'side' columns to any width you want and the content area adjusts -- plus media queries -- for the win. Grids just shoe-horn you into crappy fixed widths, inflexible design, and quite often layout elements/styles that have no malfing business on a website in the first blasted place!

    Grids, fixed widths, CSS "libraries", OOCSS -- it's a bunch of half assed idiocy I have difficulty understanding how anyone can be DUMB ENOUGH to see merit in them! But I say the same thing about HTML 5 and jQuery. The future? Looks more like the worst of 1997 to me...

    (Which me underestimating the stupidity of my fellow man is, well...)
     
    deathshadow, Sep 10, 2012 IP
  4. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thank you! I've always been very baffled by those things. What a mess of DIVs, I'd much rather code it all from scratch, on my own. I'm not especially critical of fixed widths - I think some element of that is a necessity. However, these grids sound like a graphics designer's approach to website design. Which I can't understand at all.

    On the topic of HTML5, what a mess the emerging standards are sometimes. We are sent all sorts of confusing messages. Hope they straighten it out.
     
    HBz, Sep 11, 2012 IP
  5. danramosd

    danramosd Active Member

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    83
    #5
    I'm not sure if i 100% agree with this. Yes i agree that they are saying what things look like instead of what they are but you have to remember that grids are just a starting point. Yes a span7 isn't a great classname but that is just used by the grid framework. You can, and should, go ahead and add additional classes or an ID to the elements that you wish to style. The whole reasons we have grids in the first place is for consistency and for readability. This simple design concept has been around for many of years, why do you think print media almost always uses them? These frameworks push us in the direction to make good design choices with minimal thought.

    I dont really see a problem in fixed widths, as long as you have media queries to adjust those widths when appropriate.

    I also dont believe you can really make an argument that css frameworks are fat and bloated. The minified version of 960gs is 6kb. Id challenge you to find many other JS libraries or images that you use on a regular basis smaller than that.

    If you chose to go with a grid system I would recommend a mobile responsive one, like http://www.getskeleton.com/ , http://stuffandnonsense.co.uk/projects/320andup/, or possibly even twitter bootstrap's http://twitter.github.com/bootstrap/scaffolding.html#gridSystem. If none of these suite your needs there's no harm in modifying them or creating your own from scratch.
     
    danramosd, Sep 12, 2012 IP
  6. ronoliverclarin

    ronoliverclarin Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #6
    I am using gantry on my website now. Looks very good
     
    ronoliverclarin, Sep 12, 2012 IP
  7. HBz

    HBz Peon

    Messages:
    51
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    span7 is a horrible name for a class. I just don't understand the utility of a grid framework. Maybe I've never worked on a project that big. But what possible reason might you have for tying your *content* - your HTML code - down to a grid's naming system (regardless of whether you end up adding your own classnames or not), instead of defining structure elements for what they are?

    The entire approach seems to be a way to translate PSD designs to a website. But websites are free-flowing content delivered on a variety of platforms, not cut-and-spliced graphical design elements.

    Correct me if I'm wrong. I've never actually implemented one of these grid systems, so perhaps I'm misunderstanding or misrepresenting them. They strike me as shortcuts that are, on the one hand, tested and probably work well, but on the other, grounded in the same poor-practice approach as table design once was.
     
    HBz, Sep 13, 2012 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    In which case it's presentation meaning it has NO business in the markup -- It's akin to those OOCSS idiots, who's use of classes is so noodle-doodle they REALLY need to just go back to sleazing out HTML 3.2 for all the difference it makes.

    Because what every page needs is MORE code -- lemme guess, don't see anything wrong with slapping extra elements around perfectly good block level containers?

    Given I have yet to see an accessible website using that ****? Uhm... you must happen to have that magical mix of resolution, screen size and system metric as the grid folks, and not mind saying {string of expletives omitted} anyone who doesn't... Since that's basically what grids do.

    <yoda>And that is why you fail</yoda> -- Remember the mantra -- The web is NOT print! The web is NOT print! The web is NOT print!

    It makes sense in print, since you are targeting a FIXED MEDIA SIZE. The only thing we know for sure about who will visit a website is we don't know who will visit a website -- much less the capabilities, resolution, system metric and other differences their hardware, software and user preferences are set up for... That's why fixed width layouts are accessibility trash, just like fixed metric fonts are... sure, responsive layout fixes it slightly, but just how many custom layouts are you going to sit there wasting time messing around with when one semi-fluid layout with two or three tiny float strippers is far, far easier to make adaptable?

    Funny, since I find them to push people in the direction of BAD design decisions with crappy fixed width columns that can't adjust to dynamic fonts, need to do more work just to implement the simplest of layouts, and the absolutely idiotic non-semantic markup that seems to be their hallmark.

    As someone who's been running large fonts/120dpi and 1600 wide or larger since the mid 90's, the trend towards inaccessible "crappy little stripes" has been increasingly annoying -- now that I'm on 2560x1440 at the workstation even more so. Elastic layout + semi-fluid layout + media queries is "WIN", anything else is such a miserable steaming pile of /FAIL/ that I'm shocked some alleged 'professionals' even consider it viable.

    The same goes for a LOT of the crap that is the norm in grid layouts or letting some dumbass photoshop jockey who knows Jack about accessibility or the development tools sleaze out a pretty picture of a website before you have content, semantic markup AND a layout. See the propensity for equal-width equal-height elements as columns across a page -- crap that by definition means no dynamic layout and as such has NO business on a website in the first blasted place! Net result is being stuck shoe-horning content into a layout instead of having the content dictate layout. Which is why rubbish like forcing content into a grid or drawing some goof-assed picture of a website before you have markup and layout is basically putting the cart before the horse.

    6k of code before you even have markup, that dictates the markup... and that's not bloat? Much less the endless idiotic string of classes (and more classes/ID's if we follow what you said above) and endless pointless DIV around perfectly good block-level containers isn't bloat? Mind you, I say the same thing about HTML 5's allegedly semantic structural elements...

    Wrong person to challenge to that since most of the websites I code aim for 72k in 16 or less files as the ideal target (that's HTML+CSS+IMAGES+SCRIPTS) with an upper acceptable limit of 144k in 24 files or less.

    Well, let's dissect some of these, shall we?

    http://www.getskeleton.com/

    Well, their website is inaccessible ****, love how the sidebar is chopped off and uncontrollable on netbooks / anything shorter than 800px tall...

    But let's look at their 'system' via the examples...

    The Eleventh Edition site has all the hallmarks I come to expect from a grid type layout under the hood; mated of course to the dumbass HTML 5 asshattery and the idiotic 'tricks' used to try (and fail) to make it work on older systems... what with Paul Irish's idiotic "let's bloat out the header with a bunch of IE conditionals to cover up our ineptitude", fat stuffed keywords meta that is of course ignored due to the developer failing to grasp that it's keyWORDS, not keyphrases or keysentences... nonsensical heading orders, incomplete LINK tags to it's CSS with no MEDIA types (so their screen layout is being sent to print/handheld/tt/etc), comment placements that can trip rendering bugs in both IE and FF (that they either hacked around or are still broken) -- and that's before we even GET to the grid...

    Which appears to throw endless pointless div around perfectly good semantic block level tags for no good reason, paragraphs around non-paragraph elements, multiple classes and ID's on elements that should only need one if any... Which of course is how it ends up being 12k of markup doing 8k or less' job... and likely 30 to 50% more CSS than's necessary too.

    Let's take another site... Hivemind, they allegedly live and breath good design -- wouldn't know it from the broken pile of manure they call a website. Everything I said about the previous site times a factor of ten, suffering horribly from "semantics, what's that?!?"...

    The other grid systems you listed being even worse -- they encourage rigid inflexible design, design elements that have little business on websites in the first place given the limitations of the medium and requirements for accessibility, and worst of all presentational markup like it's still 1997... Naturally that makes them a perfect match for the HTML 5 idiocy given that 5 seems carefully crafted to pat the dipshits who until a few years ago were sleazing out HTML 3.2 and slapping 4 tranny on it -- Now they just sleaze out 3.2 and slap the 5 lip service on it, still throwing the past decade plus of actual progress STRICT gave us out the window! Net improvement zero! Sure as shine-ola wasn't crafted for anyone who took the time to understand semantics, practice separation of presentation from content, leverage caching models, attempt to maintain minimalism, or paid the least bit attention to the ACTUAL improvements in coding style that have been available for some 14 years.

    Grids are a ignorant idiotic BS at best, a sleazy shortcut and nube predation at worst.

    But then, we're talking "web designers", who much like the whackjobs who've turned SEO into a cottage industry seem to have preying on the ignorance of others as their standard modus operandi.
     
    deathshadow, Sep 13, 2012 IP
  9. danramosd

    danramosd Active Member

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    83
    #9
    @deathshadow, without spending the 45 mins (or so) it took you to craft your comment ill give you credit. Your points are well thought out and i actually have to agree with some of them There are a few more things I would like to touch on though. "Web is not Print!". Yes i completely agree there are many differences between the two of them. But print along with other types of designs do carry along certain principals that we should adhere to. i.e. red text on a blue backgrounds never looks good. Does this mean that absolutely everything has to be lined up in a grid and shall not exceed its boundaries? Nope, note at all. Once again these are general guidelines, as there is in all aspects of programming. There are times you can and should break the mold, but every use-case is different and it ultimately comes down to the programmer and their experience to determine when the right time is to step out of the boundaries.

    Obviously what a graphic designer comes up with in a design will not translate 100% to what is seen on the screen, especially when it comes to content length and screen size. Thats why CSS gives us properties like ellipsis, max-width, max-height, @media and so on to try and keep the overall layout reasonable based upon the design we've been handed.

    I'll actually take your side on the semantics. span7 or whatever it might be is a horrible name. And i will also agree that these frameworks add *some* bloat and extra markup (i dont agree with the amount of bloat you're making it out to be). These frameworks are really just starting points for developers to get their site up and running in a relatively efficient manner. If the graphic designer creates their design on a predetermined grid system, it makes the developers job much easier to generate the markup and styles needed to erect the design. Thus, creating a more efficient developer since he doesn't have to go through and create all of the rules.

    Going back to my previous point of knowing when to break the mold, I (along with many other developers who use grid systems) break the mold when using these frameworks. We have the knowledge that there is some very minimal bloat caused by these frameworks, but the increase in our development time is well worth the sacrifice. If you're really worried about every byte of data being processed and sent down the wire, you should really look at your server-side code since that's where a majority of the heavy lifting is done.

    By using this online calculator (along with others to verify), an extra 10kb of data being requested by the user on a 56k connection takes 1 second. Does anyone even use 56k anymore?! This doesn't even take into account gzip compression and caching files. I'll apologize now to the users who visit my site with a 56k connection and lose less than 1 second of their life only on the first page load (caching).

    I'm all for semantical markup and selector names. But at the end of the day CSS frameworks are tools that allow developers to work quicker and more efficiently. Personally I use them more or less for prototyping, and will refactor the html/css when the time allows later down the road. These tools do come at a cost, just like almost every other framework (front or back end). But IMHO and many others', the reward far surpasses the cost.
     
    danramosd, Sep 19, 2012 IP
  10. matthewpomar

    matthewpomar Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    What is a "grid framework"?
     
    matthewpomar, Sep 20, 2012 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    Uhm, more like two minutes, but that's because I can type, have a command of English, and don't go screaming "AAH, WALL OF TEXT" like most of the illiterate fribbles that seem to be populate what was once a tool only used by intelligent people.

    Excepting that the two use entirely different colorspaces and luminance conversions -- emissive and reflective; so what works on one doesn't work on the other. (see why photoshop's luminance numbers are useless for screen work - it was NEVER meant for it!). Same goes for relationship of font-sizes to media size, target size of the media, even font rendering capabilities taking most all of the rules for print, and making them inapplicable at best, foolhardy at worst!

    Which is why 99% of "graphic designers" have ZERO business designing a blasted thing for the Internet; they lack the empirical knowledge of the medium required to make accessible design.

    No, those exist so you can MAKE the design without being "handed" a blasted thing by some ignorant twit sitting around spanking it all over their pressure sensitive tablet.

    But they're not efficient -- at all. You start out with more, you have to use more, it's something extra to learn meaning you don't learn to build layouts PROPERLY... It's making MORE work for less quality work -- the OPPOSITE of efficiency!

    I don't see how that works how you're saying. I see the EXACT opposite, but again I consider bringing in the art chik-fil-a at the start of the process is working backwards. Most always idiocy like grids or even starting from some goof-assed PSD results in shoe-horning content into a inflexible layout with predetermined non-semantic markup -- instead of letting content dictate the markup and the layout. Content first, semantic markup of the content, bend it to your will with CSS to make the layout, THEN bring in the artsy fartsy PSD jockey to make the graphics you hang on the layout. Though now that we have CSS3, much of the dicking around in Photoshop serves no legitimate purpose!

    Hoping you meant decrease, though from what I've seen, increase sounds about right.

    ... and the more markup and presentational markup means the more backside code to be processed and more complex code... and also means more work making that back-end code. Not that the majority of people writing HTML on the back end have ANY business doing so either; view source on Joomla or Wordpress for proof enough of said ineptitude!

    Which means they're truncating instead of rounding, since max throughput theoretical at 56k is 6.3k/sec, real world more like 5k/sec, and that doesn't even count handshaking which can add an extra 150ms to a whopping two seconds per file... Which of course is why most of the idiotic BS bloated code-tard script-kiddies who slap together off the shelf frameworks (both CSS and Javascript) end up with page loads measuring 20 seconds or more JUST in handshaking regardless of file sizes.

    Which makes more processing time on the server with larger code, and makes it less likely to remain in the cache thanks to size.

    .. and I find they have the exact opposite effect, resulting in more labor, less efficient code, and a failure to understand the entire point of using HTML and CSS in the first place!

    Because writing it twice is more efficient? Though of course "when time allows" usually means it never materializes as reality.

    I see no benefits, no rewards, and no increase in speed or efficiency -- to be frank it just makes MORE work in the long run. I mean is it really so hard to just say min-width, max-width on a outer container and EM widths on all but one column leaving the remaining one fluid? You really need 6k to 20k of nonsense for THAT?

    Though again, grids seem more to be for the re-re artsy fartsy nonsense like equal-width equal-height elements spanning the page width, a layout technique that usually has no business on a website in the first place!
     
    deathshadow, Sep 20, 2012 IP