Frameless Grid Positioning/Float Styles

Question

I'm having a tough time fully understanding how to use Frameless Grid. I mean, I completely understand the concept. It sounds great.

I guess my beef is just that it doesn't offer anything in the way of positioning your elements. It just sets their width, and that's that. So even if you apply the column widths to your elements, everything just stacks unless you start floating or positioning absolutely.

In this regard, I guess I'm looking for some advice on whether there's some universal positioning styles I can use to keep these elements from stacking.

Or is this just too broad? Should I just be positioning my elements on a case by case basis?

(Also just an FYI I am utilizing SASS, in case that helps at all)

Thanks!

Answer 1

UPD: Frameless Grid has come up with actual code (SASS, LESS and JS), so the answer below is outdated.

Frameless is more of an approach than a grid framework.

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).

Let's have a look:

---

1. Make a regular fixed-width grid.

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.

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.

---

2. Make it repeat infinitely.

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.

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.

By "give your grid a number of columns" means "come up with a design that leverages certain amount of columns at maximum".

---

3. Center it in the viewport.

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.

That's very basic, but it requires us to do another line of CSS code manually.

---

4. That’s it, really.

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.

No, that's not "it". That's where the work actually starts.

You have to manually code your grid to adapt to various viewports, and Frameless does not provide any tools for that.

---

So if you're looking for tools that you can use to assemble a grid, i recommend Susy. It's a great and elegant piece of SASS.

Susy is very versatile. It has different grid types (demo). It also has different approaches: you can go content first 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.

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 demo illustrates two such steps: it starts with 7 columns but turns to 12 columns if screen width suggests.

Here i've created a website that uses Susy to stretch in five steps: http://am-teh.ru You can see the code behind this site's layout (and also its concept's evolution) in this StackOverflow post. Susy's developer has commented on it positively.