50 | These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically. 51 |
52 |56 | If you're viewing this page on an iOS device, it might zoom in wonkily when you rotate your device. This is because of a Mobile Safari bug. 57 |
58 |33 | A folding grid for responsive design. 34 |
35 |Columns, gutters, a baseline and a script.
64 |Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
78 | 79 |Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.
80 | 81 |The dimensions of the grid in each configuration are noted down within CSS comments, accompanied by suitable media queries, like thus:
82 | 83 |/*
84 | * Four-column grid active
85 | * ----------------------------------------
86 | * Margin | # 1 2 3 4 | Margin
87 | * 5.55555% | % 25 50 75 100 | 5.55555%
88 | */
89 | While the column widths in GGS are proportional to the screen's width, the widths of its gutters (the spaces between columns) are proportional to the page's font-size, specified in ems.
105 | 106 |Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes. With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content.
107 | 108 |Elastic gutters are created by positioning elements in the center of the gutter (using percentages) and giving them a padding equal to half of the gutter's width. For example:
109 | 110 |.wrapper {
111 | box-sizing: border-box; /* + vendor prefixes */
112 | width: 50%;
113 | margin-left: 25%;
114 | /* Assuming gutter width = 1.5em */
115 | padding: 0 0.75em;
116 | }
117 | Responsive layouts often require you to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you're using a baseline grid. GGS's zoomable baseline grid gets around this problem.
148 | 149 |If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size.
150 | 151 |GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5. Feel free to replace them with your own presets, though.
152 |Aligning elements in responsive layouts can be difficult with all the percentage values flying around. GGS comes with Golden Gridlet, a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.
167 | 168 |Golden Gridlet should work in most modern browsers, and since it doesn't rely on a keyboard, it can be used on touch screen devices as well. In modern browsers, the overlay appears with a pleasing CSS3 transition. Give it a try by clicking or tapping the icon in the upper right corner of this page. It's pretty fun.
169 | 170 |(Please note that due to rounding errors the baseline grid guides might not align up properly if the baseline grid is zoomed in or out.)
171 |All hosted on Github.
178 |Contains the required markup (namely the meta viewport tag) and a simple demo of the grid in use.
183 |Contains the meat of GGS, with some demo code filled in. Details about its contents are included in CSS comments throughout the file.
188 |Both contain the source of GGS.css. GGS.less is written using the LESS CSS language. GGS.scss is written using the SCSS language, and was contributed by mikker.
196 |Contains Golden Gridlet, a script that overlays the GGS grid and a baseline grid of 1.5em onto the page. Can be customized around the top of the file. Powered by the Ender library.
201 |And answers to some FAQs.
208 |Take it apart, steal the parts that you like, and adapt them to your own way of working.
214 | 215 |Really hard. Don't give up. Read Fluid Grids and Responsive Web Design by Ethan Marcotte. They help a lot.
218 | 219 |Or at least don't set one below 2560px. When your content starts getting too wide, use the zoomable baseline grid to make it fit a little better, or add some empty columns on the sides. The whole point of a fluid grid is to use the screen's proportions to align elements, so stick to it.
222 | 223 |Does your site zoom in too much when changing orientations on an iOS device? It's because of this Mobile Safari bug.
226 | 227 |It’s definitely not a framework. It’s more just a starting point and a couple of guidelines.
233 | 234 |Old IE won't see any styles that are inside a media query, so just serve it your mobile layout and enhance it a little with IE-specific classes. Not having to worry about old IE makes coding the wider layouts so much easier. More about this in my blog post: Leaving Old Internet Explorer Behind.
237 | 238 |It lets you give the same element both a width in percentages as well as a padding in ems, which is required for the elastic gutters to work. If you followed my advice about IE6–8 above, you can use this inside media queries without worrying about browser support.
241 | 242 |The Golden Grid, made by @vladocar, is also a grid system. It has nothing to do with GGS. Accidental naming conflict. My fault.
245 | 246 |