CSS framework , and grid division help

Discussion in 'CSS' started by DesignBytes, Jun 13, 2013.

  1. #1
    hi
    I have started using css frameworks and set an example layout, as follows


    (link if preview doesn't works http://imageshack.us/photo/my-images/191/captureolj.jpg/ )

    1. have divided the grids ( tried to ) can anyone guide me if those are correct ?
    2. those colored lines other than black/grey are containers for the black content divs
    3. only grids or media queries or both mark out a responsive layout ?

    I have planned to use Foundation CSS framework from Zurb

    Please comment
     
    DesignBytes, Jun 13, 2013 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    1. Forget fat bloated framework garbage. All it does is make MORE work and shoehorn you into using presentational markup, inaccessible design, and in general takes a leak on accessibility from so on high you'd think the Lord Almighty just got back from a kegger. Pretty much by definition they defeat the point of using HTML and CSS just as badly as WYSIWYGs, to the point you might as well go back in time to writing HTML 3.2 for all the good they provide. There is NOTHING of value offered by ANY of them.

    2. You seem to be playing with visual layout before you have semantic markup of content or a reasonable facsimile, a flawed approach that usually forces you to use px metric fonts and fixed widths due to crapping out elements on a page that are fixed width or fixed height, the pinnacle of /FAIL/ at web design no matter what the PSD jockeys tell you.

    3) Forget the grid asshattery; if you are building a website and care in the LEAST about accessibility, you should be using separation of presentation from content, semantic markup, progressive enhancement to provide graceful degradation, to work towards a layout that is semi-fluid (min/max-width), elastic (em fonts and column widths) AND responsive (media queries).

    So far you have a goofy picture that means NOTHING in terms of a useful layout -- make semantic markup of your content or a reasonable facsimile FIRST, then create the layout in CSS, then you can start up whatever goofy paint program you are using to make the graphics to be hung on the layout.
     
    deathshadow, Jun 14, 2013 IP
    DesignBytes likes this.
  3. DesignBytes

    DesignBytes Notable Member

    Messages:
    1,237
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    200
    #3
    hi there,
    thank you for a great insight to the things. taken all your points, and kind of I also agree to the note you made about frameworks it actually seemed to be a lot of unused code there...

    thanks again
    I have short time right now will post back later to you
     
    DesignBytes, Jul 13, 2013 IP
  4. admin xxx

    admin xxx Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    Hey

    The latest version of Foundation no longer supports most of the older browsers, try to use HTML5 boilerplate. HTML5 boilerplate is already built into Dreamweaver but you can also download it from there website that I posted below. Here is a short video tutorial on how to use boilerplate with Dreamweaver that I think will help you a lot in the future ( http://tv.adobe.com/watch/learn-dreamweaver-cs6/using-fluid-grid-layouts/ )

    Links:
    Boilerplate = html5boilerplate.com/

    Thanks
     
    admin xxx, Jul 17, 2013 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    ... and in the category of "people are dumber just from reading your answer" we have someone suggesting the overpriced steaming pile of manure known as Dreamweaver, mated to the half-assed idiotic framework garbage known as boilerplate with the halfwit barely even qualifies as a specification known as HTML 5.

    Herpaderp.
     
    deathshadow, Jul 17, 2013 IP
  6. admin xxx

    admin xxx Greenhorn

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #6
    Hey

    I was just trying to help that's all.

    Thanks
     
    admin xxx, Jul 17, 2013 IP
  7. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #7
    deathshadow is right .. I've never found any of these frameworks useful beyond throw away prototyping of applications. Use XHTML strict, a simple minimal reset and then proportional fonts and such. You can achieve the same results with a lot less headache when trying to get things working properly on mobile devices. If you insist on a grid you could always use something like SimpleGrid which is only 1-3kb.
     
    freelancewebaz, Jul 18, 2013 IP