SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Golden Grid System

    Can anyone reccomend a good tutorial showing how to use http://goldengridsystem.com/

    Or any tips and tricks...


    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    Unfortunately I think you'd be better off looking at the owners site or the official documentation as I doubt many (anyone) here as used it.

    Grids seemed to be used by those who can't really work out how to do it themselves because in all reality CSS is its own framework and from experience on the forums grids seem to hinder rather than help most users. Grids obviously have some good points as the authors put a lot of effort into them but to use them efficiently you have to be good at using CSS and most grid users are not experienced enough and end up using masses of code for little effect.

    Of course my views may be biased because I only see the broken ones in the forums and there may well be satisfied customers around.

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don’t confuse GGS with "The Golden Grid".
    The Golden Grid, made by @vladocar, is also a grid system. It has nothing to do with GGS. Accidental naming conflict. My fault.
    Say's so in the GGS footer.

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    as I doubt many (anyone) here as used it.
    Which is Paul being polite about it... to be frank it's just another CSS framework that ties you into using presentational class names -- at which point you may as well go back to using HTML 3.2 without CSS for all the good it does your code.

    27k of javascript, 6k of CSS with HTML 5 bloat on top? Do yourself a favor and forget you even heard of that broken half-assed nonsense that basically defeats the entire point of using CSS in the first place.

  5. #5
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know, I'm no expert, and among you I have no clout, but let me be honest about your comments for a moment. I am one of those who need the extra help when it comes to layout and structure... but this GGS, which I have only recently started playing with, isn't bloat by any means. Actually, the stylesheet is quite stripped down, and the only extent of a predefined grid system is comments which tell people like me (you know, those who still need the extra help), what width the column would be at which media query resolution. I also haven't had much experience with other grid systems, and have really only built a site or two using the 1140 css grid system, but since I started using a grid it hs greatly improved my efficiency.

    From my perspective, the GGS doesn't constrict me to a specific class names, and really only has by default two class names related to the grid anyhow, nor is it weighed down with a complete threecol or grid_xx preset which I am forced to follow. OF course what do I know!

    The one thing I do have about the GGS at this point in time with my experimenting with it is things like this:

    margin: 0.9230769230769231em 0 1.3846153846153846em;

    I'd rack my head against a wall if I even tried to understand it.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jboyd View Post

    margin: 0.9230769230769231em 0 1.3846153846153846em;

    I'd rack my head against a wall if I even tried to understand it.
    I think you just proved our point

    Just learn the right way to do things first using CSS. It takes time and you will make mistakes but you won't end up needing a crutch to walk with as you will eventually be able to walk unaided.

    If you learn a grid system then you you've doubled your work to start with as you have not only to learn CSS but also learn someone else's approach also. Develop your own approach and build your own repertoire of code and snippets that you can re-use knowing how to adjust them and how to make them work.

    Just because we don't use grids doesn't mean we start from scratch all the time. Most coders have their own "basic structures" to work from and get something up and running very quickly.

  7. #7
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is GGS, really?

    I've been trying to get my head wrapped around GGS because it seems like it would help with responsive design (layouts with media queries and fluid grids). Responsive design requires some forethought so that you can wrap content in a consistent way. I'm also starting a new site and would love a way to standardize column width, gutter/padding, etc. It can be hard to manage that on large sites with numerous developers!

    I might be reading into it too much, but I've found GGS to be more than a bit confusing. First off, it's really more of a recommendation than a grid system. He gives you some sample CSS and some percentages to use for columns, but that's about it. (Maybe that's a good thing?)

    Here's a summary of issues I've noticed:
    "The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design."
    In their recommendation for widths, the outer "columns" are 5.55555% and all others are 12.5%. ...not sure why and can it really still be considered a column in the grid?

    Also, does the concept of folding really make sense? It's common for elements to span columns, so what's the different between having 4,8 or 16? Isn't an element that lives in one column in a 4-column grid the same as an element that spans 4 columns in a 16-column grid? I've been told that it lends to wrapping the content at in a consistent way, but I haven't seen good examples of that. In his examples, he just wraps one column under another, which brings me to another gripe:

    Can you use this for the most common web layout: main content column with right rail? Looks like it's only makes sense with symmetrical cols.

    Also, their code, which you don't have to use, relies on box-sizing which isn't supported by old IE. So, right off the bat if you want you're pages to work in IE 7 and 8, you have to find a new way to lay things out. His recommendation is to only use box sizing in media queries so that old IE won't see them anyway, but then you have to find a solution for your small screens (no queries) that doesn't use box-sizing. I suppose it's usually only one column, but I wouldn't want to limit the design in that way.

    The Golden Gridlet is nice, though it wouldn't be the end of the world to create your own.


    The problem here might be that I'm looking at this from a coder perspective and it's more of a designer thing. That is, it's just a basic 'recommendation' for how you might design a site, not strict rules to guide you in how to code it.

    It'd be nice if there was more documentation on it. Tons of sites link to it, but I'm starting to feel that no one actually uses it!

    I'd be interested in any info you can send my way to clarify this stuff, especially if you've been putting it to use!

    Thanks!

  8. #8
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tkane2000 View Post
    Here's a summary of issues I've noticed:
    "The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design."
    In their recommendation for widths, the outer "columns" are 5.55555% and all others are 12.5%. ...not sure why and can it really still be considered a column in the grid?
    Ok, so I looked at this one a bit more closely and noticed the following:

    5.55555% = 100 / 18 cols, 12.5% = 100 / 8 cols, 6.25% = 100 / 16 cols, etc. so, the 2 outer columns are always 100/18.

    5.55555% is still a decent amount of space on a mobile device, although i checked http://goldengridsystem.com/ and it's design looks ok on my iPhone. ...might not work for all layouts though and unfortunately the golden gridlet isn't very configurable.

  9. #9
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, like some people in here I was quick to dismiss this as unnecessary and I am quite advanced in CSS and I didn't feel like I needed this. But I recently gave it another chance and it's definitely not for novices. It's basically just a set of CSS comments that you can use as a guide. And the JS overlay helps you stay on track with a completely variable browser canvas.

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you just proved our point

    Just learn the right way to do things first using CSS. It takes time and you will make mistakes but you won't end up needing a crutch to walk with as you will eventually be able to walk unaided.

    If you learn a grid system then you you've doubled your work to start with as you have not only to learn CSS but also learn someone else's approach also. Develop your own approach and build your own repertoire of code and snippets that you can re-use knowing how to adjust them and how to make them work.

    Just because we don't use grids doesn't mean we start from scratch all the time. Most coders have their own "basic structures" to work from and get something up and running very quickly.
    Right. If you don't get it, either work hard to figure out exactly what it's doing (that's what I do w/ JavaScript - screw that stupid programming language ) or just drop it and learn from scratch. It's never good to use a crutch for the rest of your life. I'm not saying that you will, but it's always better to learn to do it the right way than to write "blind" code.

    Like Paul said, "boilerplates" for HTML and CSS are always useful and very common. Personally, I have a startup for all of my CSS and HTML. I use part of Eric Meyer's Reset (as recommended by RyanReese) and a cut-down and modified version of the Sitepoint HTML5 startup (no JS and an added wrapper div that I use). Both boilerplates are plug-ins for my Notepad++. Makes it easy to start up a project real fast or just to not have to deal w/ all of the initial meta data, etc. when doing a simple experiment.

    ~TehYoyo

    Edit: The only grid that I use is 960 GS, but even then I've moved away after ditching the fixed-width layout.

  11. #11
    SitePoint Member
    Join Date
    Apr 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    3
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Hello all!

    Ok first things first. This is for the naysayers: you got the GSS confused with 960gs and others.

    I agree with the whole semantic problems of grid systems, but that is EXACTLY what the Golden Grid System aims to fix!

    And honestly: your end users will hardly see the source code; clients just care about results; and grid systems make life a whole lot easier. Why get so boggled down about tinny tiny details?

    I use grids consistently, but I build my own based on what I need on a per-project basis. But the Golden Grid System is a fantastic starting point. I used it a few times, and it has definitely inspired my approach to building grids.

    OK! onwards to the Golden Grid System!

    What is a bit misleading at first about it, is that is doesn't give you a grid at all. No classes, no helpers. And a pretty lousy example to get it started.

    It does give you guidelines which are commented with the column sizes: e.g.:

    Code:
    /*
    *  Eight-column grid active
    *  ----------------------------------------------------------------------
    *  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
    *  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
    */
    following these guidelines you can edit your elements to fit within the "grid". You can also use their script to help align things.


    1. I ususally start by setting a container that will house my elements. This container gets the margins of 5.55555%, for some breathing space.

    Code:
    .container {
      margin-left: 5.55555%;
      margin-right: 5.55555%;
    }
    you could apply this (with paddings instead of margins) to your body tag. It works. But I have a suspicion this isn't a good idea. Let me know if I am right or wrong in that one.

    2. Now you start building your "columns" with your elements. In the example he uses a wrapper, which is creatively named .wrapper. This has a 0.75em padding applied right and left, but no width. You have to use this format in your elements.

    Say you have a navigation bar on the left which will span 2 of the aforementioned 8 columns. Your CSS could look something like this:

    Code:
    nav, .mainheading, article,
    .littlecolumnontheside, .yourElementsInColumns {
      padding: 0 0.75em;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    nav {
      width: 25%; /* This is the width of 2 columns following the guidelines */
      margin-right: 75%; 
    }
    So, you define all of the "column" elements to have the properties of that .wrapper class. This keeps it tidy and avoids adding extra classes, plus you reuse the code and make the CSS significantly shorter and more manageable than if you were to write that in every element. But I'm just stating the obvious.

    Then you add the width following the guidelines onto your element. In this case, the equivalent to 2 columns is 25% of the overall width.

    Finally! thanks to the lovely box-sizing property, the paddings render inside the element AS THEY SHOULD! (This is one of the few things IE got right).

    And your HTML is really straightforward:

    Code:
    <nav>
      <ul>
        <li>Whatever</li>
      </ul>
    </nav>
    3. Repeat.

    That is basically it. The difference between this and a grid system with class helpers is that it keeps your code tiny, even if its a bit more work.

    Since the elements cascade with the media queries as the screen size increases, you can really tailor it to every conceivable resolution.

    That is it!

    BUT WAIT! There is a little caveat.

    This is a mobile-first approach. Internet Explorer < 9 doesn't understand media queries, which is bloody annoying. The "default grid" is 4 columns wide, which is ok in small screens, but looks crap in larger ones. And as much as we want to forget IE, its still a pretty important share of the market.

    I adapted my own build of GSS to default the grid to 8 columns. Just did it by moving the media query definitions around.

    BUT! this leaves another problem: Remember that .container element? It has an unrestricted size.
    "Just add a max-width" I hear you say. No. For starters older versions of IE don't support max-width.

    The solution is very easy! You could add an IE only stylesheet with conditional comments .... or ...

    Serve a fixed width layout and fix it inside a media query:

    Code:
    .container {
       width: 780px;
       margin-right: auto;
       margin-left: auto;
    }
    @media all {
      .container {
        width: auto;
        margin-left: 5.5555%;
        margin-right: 5.5555%;
      }
    }
    Voilà! A simple-yet-sophisticated solution that doesn't bloat your markup with conditional comments.



    I hope this helps.

  12. #12
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    @pcoitinho

    First off, I'd like to salute a well done post. It was a pleasure reading it. Technical or otherwise.

    <hr>

    I have two things to note about GGS.

    <hr>

    I use normalize in my work: http://necolas.github.com/normalize.css/. It appeals more to me, as opposed to a reset. It doesn't strip the default style, it helps it, which is more logical.

    GGS is trying to normalize the reset it uses in the beginning. Making it more like a normalize for grids, in the process. Which seems a bit of a paradox for me, that knows of and chose normalize.

    <hr>

    Values like
    Code:
    line-height: 1.3846153846153846em;
    margin: 0.9230769230769231em 0 1.3846153846153846em;
    are not convincing me. If a grid requires this type of calculation, something went wrong, somewhere in the building process.

    There is however, real example that could prove me wrong. Conversion from imperial to metric can lead to odd numbers too, and they're used every day.

    For example: 1.255 kg = 2.76680 lb. This could be the argument for odd values for em converted to and from px. Still...

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by itmitică View Post
    Values like
    Code:
    line-height: 1.3846153846153846em;
    margin: 0.9230769230769231em 0 1.3846153846153846em;
    are not convincing me. If a grid requires this type of calculation, something went wrong, somewhere in the building process.
    I have to agree with itmitică and things like "margin-left: 5.5555%;" are not really viable measurements for cross browser compatibility. Indeed Opera does not honour anything after the point as far as percentages are concerned anyway so by the end of the grid could be as much as 50px or so out depending on the number of columns. Other browsers will vary in how they round up and down so going for that kind of accuracy isn't really a viable solution.

    A fluid width site should never really be made up of a sequence of percentage elements that add up to the total width as that is expecting too much and I always build into the layout at least one substantial element that has no defined width and soaks up the empty space and rounding errors without mishap. Even if you use exact percentages (e.g. 50% + 50%) ie6 and 7 will still get it wrong when the viewport width is an odd pixel size and drop a column as it rounds up the total to more than 100%.

    By all means use a grid if it helps you but always remember to allow breathing space. I just prefer to code the page from scratch as setting up columns is a two minute job anyway so I don't really see the benefit. I've said it a number of times now but some of the hardest pages to debug that we see on the forums are the ones that have used grids - which is probably why I don't view them that favourably .

  14. #14
    SitePoint Member
    Join Date
    Apr 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    3
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by itmitică View Post
    I use normalize in my work: http://necolas.github.com/normalize.css/. It appeals more to me, as opposed to a reset. It doesn't strip the default style, it helps it, which is more logical.
    Howdy!

    I agree with you about the reset in GSS. I use normalize as well. But I find its better to flatten typography complete and start from scratch.

    There are way too many resets flying about. I don't use the one they provide. I just stripped off the bits that interested me really.

    As for the code snipped you posted... I am not entirely sure where that comes from. But yes, if you are using that many decimals you are probably better off as a private banker (but maybe not any richer given how things are nowadays).

    ...

    Values like
    Code:
    line-height: 1.3846153846153846em;
    margin: 0.9230769230769231em 0 1.3846153846153846em;
    are not convincing me. If a grid requires this type of calculation, something went wrong, somewhere in the building process.
    Now im really curious as to what those margins are

    ** types away different calculations in spotlight with no success and quickly gives up **

    That translates to a 16/22px basline grid ... ish ... with a 22px margin on top and a 15px margin on the bottom.

    The only difference is the relative nature of EMs. How he got to such a ridiclously broken up number is a different question.

    A pedantic, but very insighful read is Marcotte's Responive Web Design from A Book Apart (http://abookapart.com/products/responsive-web-design).

    He explains in very simple terms how to arrive to relative measures (in this case EMs, but could be ENs, %, points and picas)

    Anyway, the idea is the following:

    Code:
    relativeSize = target / context
    So if your body type is set to 16px, you multiply it by 1.375 to get the 22px line height.

    Code:
    1.375 = 22 /* the target */ / 16 /* the context */
    That goes for the grid as well, hence the broken up numbers.

    (Sidenote: do buy the book, its only $9 and you can read on the train home)

    Finally it all comes down to this: Does it work? Well, yes it does. I have no issues. Yes, it might not be the ultimate pixel perfect photoshop mockup that we present to the client, but its fluid. You have to give it some credit.

    At the office we make sure our clients understand that their website will NOT look the same. We let them know that we don't support IE6 (directly, by that I mean: avoid making a mess of it, but just make sure its usable e.g. mobile first approaches), and have limited support for IE7.

    Of course, it all varies a lot. If you are working for a corporation that uses an outdated windows infrastructure you might want to reconsider those terms of agreement, otherwise you'll run out of business very quickly. Lucky for us, our clients know about Chrome.

    In the end, it doesn't matter how hard you try, different browsers/OSs will mess up your website. Its part of the beauty of web design really: this lack of control that is becoming oh so trendy nowadays, with generative art logos and fixed exposure camera * he says looking at his Diana+ and regretting ever wasting money on it. *

    And to be honest, fighting IE is one of the reasons I design stuff for web, instead of just focusing on art direction as I am "supposed to". Its an odd masochistic thing I guess: you shout and swear but in all honesty its quite fun. Its a puzzle. Albeit a very frustrating one... Maybe its just me

  15. #15
    SitePoint Member
    Join Date
    Apr 2012
    Location
    London, United Kingdom, United Kingdom
    Posts
    3
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Ok, just though of this:

    Take this measurement, and image this is the width of one of those so called 'columns':

    Code:
    5.23451132532152%

    Lets round it to 3 figures, as in IE: 5.234%

    So, your page is now shortened by:

    Code:
    0.00051132532152%
    Chances are, this is less than a pixel, and will get rounded off anyway.


    Opera ignores the decimals, so it becomes 5%.

    Your website is now shortened by:

    Code:
    0.23451132532152%
    0.2% is really not going to make a lot of difference. And it rounds down, so its not going to break your layout, just squish it a tad.

    Unless you have a 27" screen (in which case you are probably not using IE7) this small different is surely not going to cause a lot of trouble.

    Do what you feel most comfortable with, what gives you the best results.
    In the end, all that you are selling is the end product, no matter how you get to it (that is the sad realisation that no one understands how hard we work. You present something to a client which you spent hours doing and you say: Look, this button is vertically aligned and it works in IE5, and all they reply is: "ok, nice" )

    Do give the GSS a try. Don't just throw away fluid designs altogether, they are very important at this moment

    I might be biased towards mobile design though, I'll grant you that

  16. #16
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pcoitinho View Post
    As for the code snipped you posted... I am not entirely sure where that comes from. But yes, if you are using that many decimals you are probably better off as a private banker (but maybe not any richer given how things are nowadays).
    Good one.

    I got those values from the GGS it self: https://github.com/jonikorpi/Golden-...master/GGS.css
    lines 168, 215... and many more like those in it.

    <hr>

    Quote Originally Posted by pcoitinho View Post
    Do give the GSS a try. Don't just throw away fluid designs altogether, they are very important at this moment

    I might be biased towards mobile design though, I'll grant you that
    I like the mobile first approach too.

    My first instinct when I finally decided responsive design should concern me too, was to start from 960 layout, which was the norm then, and adjust up and down the width, 480 to 1600.

    Later, looking at other responsive design concepts:
    http://www.sitepoint.com/forums/show...=1#post5097468
    I decided to give mobile first a try, and extend my range, from 280 even, to 1900. I'm not entirely sure if mobile first approach is going to fit well with every one of my projects, but it feels so right to me, I just love it.

    <hr>

    GGS certainly can teach a little something to everyone interested in different approaches to responsive design. Yet, somewhere, something is not right, with values like those I mentioned. Relative values, em or %, are relative for a reason. 0.23451132532152% is way past that.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by pcoitinho View Post
    Opera ignores the decimals, so it becomes 5%.
    Well it does depend on the job in hand but if you look at this simple example you will see that Opera is actual over 50px out!" That's enough to break any design.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    div{
    float:left;
    width:12.5%;
    background:red;
    height:100px;
    }
    </style>
    </head>

    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    </body>
    </html>
    Chrome is about 5 - 10px out and Firefox and IE9 seem to be the only ones that get it right. IE8 is only a few pixels out but IE7 splits it onto two lines like IE6.

    However we can fix all of them by not floating the last one and not giving it a width.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0
    }
    div {
    	float:left;
    	width:12.5%;
    	background:red;
    	height:100px;
    }
    .last {
    	overflow:hidden;
    	float:none;
    	width:auto
    }
    </style>
    </head>
    
    <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div class="last">8</div>
    </body>
    </html>
    Now there are no gaps, wobbles or broken layouts

    Do give the GSS a try. Don't just throw away fluid designs altogether, they are very important at this moment
    I will agree that a lot of thought goes into some of the grid systems and reading the code and documentation does give a good insight into browsers problems. However, I feel that once you've delved that far into it you would be better off doing it yourself even if you borrow some techniques that you've learned. I just think that css is its own grid and I never see the need to layer something else on top. Maybe its just me

    The problem with grids is that it attracts those that think its a short cut and jump in without understanding. I have some clients who are constantly asking me to fix the grids when they go wrong. More often than not they try and put content into the grid that just doesn't fit and wonder why it breaks. That's not the problem of the grid as such as they will work if used properly but there's no accounting for what users do though

  18. #18
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    While somebody above specified how such numbers are calculated and how some browsers do fine with 1.3846153846153846em, I would suggest setting technology down and looking at a real-world view. Unless we are in some super-scientific setting, could you tell what's the difference between 1.3846153846153846 and 1.3846153846? Let's not mention 1.384615 <- this number specifies it down to the millionth. I didn't bother to see what the sixteenth decimal is called, nor how much those 16 digits are attempting to split that pixel into.

    When I do layouts, I try to stay as round numbers .25 -.5-.75. If I am needing to go below 0.125 to get a look I am attempting, I head back to the drawing board.
    Ryan B | My Blog | Twitter

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pcoitinho
    That translates to a 16/22px basline grid ... ish ... with a 22px margin on top and a 15px margin on the bottom.
    Translate something like em to px and you've automatically broken your layout on my machine. My baseline is NOT 16px and I'm not some weird minority (or is bad eyesite a really really really rare thing?).

    Forget the pixels you might end up with somewhere. Use your own eyes to see how it looks/feels to you and go from there. (well, unless you have a client paying you to write pixels, in which case... just write pixels then)

    Whenever I see a bunch of numbers after a decimal point in CSS I just assume someone put something really, really nice in their coffee that day. Wheeeee

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    However we can fix all of them by not floating the last one and not giving it a width.
    Which right there is why you shouldn't even need some stupid grid nonsense in the first place... if you leave one column fluid, you don't need all that perfect math asshattery. Perfect widths == /FAIL/ which is why GRIDS == /FAIL. Grids seem to exist to assist the people using the flawed methodology of throwing exact widths on everything... which means uselessly bloated and needlessly convoluted CSS by people who seem to have failed to grasp the POINT of CSS.

  21. #21
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well i can see that hardly non of the people here are designers. Thats why you don't like grids...
    I have been working with indesign (layout) for magazines, books etc and most of the time i use grids. Why?
    Because it's so much easier to layout the page and it looks much better.
    I not going to guess what kind of with that will look good for a design i know what looks good.

  22. #22
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well i can see that hardly non of the people here are designers. Thats why you don't like grids...
    Right, anyone who doesn't share your personal opinion clearly can't design, and probably also smell bad.

    I not going to guess what kind of with that will look good
    If you have to guess at code that's not our problem, it's yours. Learn to write it like a coder and this problem will go away.

  23. #23
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Right, anyone who doesn't share your personal opinion clearly can't design, and probably also smell bad.


    If you have to guess at code that's not our problem, it's yours. Learn to write it like a coder and this problem will go away.
    Well i dont code in photoshop, and i do my design in photoshop so i know how the site looks. I rather do the design...
    Someone wrote that it's better to have one column... How do they know how large the text area should be?
    They just come up with a number that looks good or?
    Well i know the exact number of letter per line thats good for a reader. I also know the size of the letters thats good...
    Thats why all visual communication designers use some sorts of guides to create a better design

  24. #24
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by niklasjm View Post
    Well i dont code in photoshop, and i do my design in photoshop so i know how the site looks. I rather do the design...
    Someone wrote that it's better to have one column... How do they know how large the text area should be?
    They just come up with a number that looks good or?
    Well i know the exact number of letter per line thats good for a reader. I also know the size of the letters thats good...
    Thats why all visual communication designers use some sorts of guides to create a better design
    In a fixed world, perhaps. But in the "web world" where everyone runs at a different resolution, with different screen sizes, those numbers are bupkiss. A good guideline in a perfect world, but the reality is much different.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    How do they know how large the text area should be?
    On the web, the TEXT decides that, actually. In print, you're right, you would set that number in your visual design, and you CAN in print because you-the-designer are setting the font family, font-size, line-height and even wrapping around something like an image.

    On the web, you can't say the text will always be Arial, 12 pixels tall, etc. Many of us can't read 12px Arial, and my operating system doesn't even come with Arial (it belongs to Microsoft). My system settings will make your "12px" render like 18px (ish).

    Similar with columns, some people might be viewing your web site on a wide-screen television hanging a few meters from them on the wall, using their Wii to view the page, and one column might not be better than maybe 2 or 3 there. Another person might be viewing that very same website on a Blackberry. One column is the smart choice there.
    A design in Photoshop or InDesign or whatever will not show those possibilities, they will not show what that text looks like on my system with much larger fonts, unless you want to make several designs per single page (a lot of work, honestly, even if you did properly separate everything into layers).

    More and more, web page design is better done with a barebones HTML/CSS combination, using a real browser as the canvas... and the image editors are best left for making the actual images that will be on the page, rather than the containers and other boxes.

    I have been working with indesign (layout) for magazines, books etc and most of the time i use grids.
    I was re-reading this today and now I wonder if you are talking about the grids used in InDesign rather than CSS grid frameworks? The thread was more about the CSS grids (well, and the main topic was something that's apparently not really a grid system), not whether or not it is a good idea to use grids or gridlines as guides in an image editing program.


Tags for this Thread

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
  •