StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>UPD: Frameless Grid has come up with actual code (SASS, LESS and JS), so the answer below is outdated.</strong></p> <p>Frameless is more of an approach than a grid framework.</p> <p>It doesn't do anything by itself, other than a single function for grid calculation (even without proper documentation on how to actually use this function).</p> <p>Let's have a look:</p> <hr> <blockquote> <p><em>1. Make a regular fixed-width grid.</em></p> <p><em>Pick a column width, a gutter width… you know, the usual stuff. Don’t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.</em></p> </blockquote> <p>We have to assemble a grid on our own. Use any stuff to acheive that, Frameless doesn't provide any. Column width should be fixed width.</p> <hr> <blockquote> <p><em>2. Make it repeat infinitely.</em></p> <p><em>Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.</em></p> </blockquote> <p>By "infinite number" they seem to mean "any number necessary". Frameless homepage works with fascinating 26 columns (you require display width of 1920px to view that), but frameless.scss only provides variables only for 16 columns.</p> <p>By "give your grid a number of columns" means "come up with a design that leverages certain amount of columns at maximum".</p> <hr> <blockquote> <p><em>3. Center it in the viewport.</em></p> <p><em>Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.</em></p> </blockquote> <p>That's very basic, but it requires us to do another line of CSS code manually.</p> <hr> <blockquote> <p><em>4. That’s it, really.</em></p> <p><em>Start using the grid. Use media queries to adapt your design as more columns become available. Since you’ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn’t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.</em></p> </blockquote> <p>No, that's not "it". That's where the work actually starts.</p> <p>You have to manually code your grid to adapt to various viewports, and Frameless does not provide any tools for that.</p> <hr> <p>So if you're looking for tools that you can use to assemble a grid, i recommend <a href="http://susy.oddbird.net/" rel="nofollow noreferrer">Susy</a>. It's a great and elegant piece of SASS.</p> <p>Susy is very versatile. It has different grid types (<a href="http://susy.oddbird.net/demos/grid-types/" rel="nofollow noreferrer">demo</a>). It also has different approaches: you can go <a href="http://adactio.com/journal/4523/" rel="nofollow noreferrer">content first</a> by declaring single column width and letting Susy adjust the number of columns to match window width. Or you can declare what numbers of columns correspond to what window widths and let Susy adjust column widths accordingly.</p> <p>Susy lets you achieve what Frameless suggests, but it also provides all the tools necessary. Being different technically, Susy shares the same idea: start with a small grid for mobile phones and make it larges as the screen gets larger. This <a href="http://susy.oddbird.net/demos/magic/" rel="nofollow noreferrer">demo</a> illustrates two such steps: it starts with 7 columns but turns to 12 columns if screen width suggests.</p> <p>Here i've created a website that uses Susy to stretch in five steps: <a href="http://am-teh.ru" rel="nofollow noreferrer">http://am-teh.ru</a> You can see the code behind this site's layout (and also its concept's evolution) in this <a href="https://stackoverflow.com/questions/13461313/susy-creating-a-grid-for-given-screen-widths-breakpoint-px-values-and-not-kno">StackOverflow post</a>. Susy's developer has commented on it positively.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload