UPD: The frameless mesh appeared with the actual code (SASS, LESS, and JS), so the answer below is deprecated.
Frameless is an approach rather than a grid.
It does nothing by itself, except for one function to calculate the grid (even without the appropriate documentation on how to actually use this function).
We will see:
1. Make a regular grid with a fixed width.
Choose the width of the column, the width of the gutter ... you know, ordinary material. Don't worry about the number of columns, but otherwise use whatever criteria you usually use to create a fixed-width mesh. I recommend using a relatively small column width for added flexibility.
We have to assemble the grid ourselves. Use all sorts of things to ensure that Frameless does not provide any. The column width should be fixed.
2. Do it endlessly.
Now give your grid an infinite number of columns, so no matter how wide you make your viewport, more and more columns appear. Imagine that you are looking at an infinitely wide cell filled with columns instead of hexagons.
By "infinite number," they apparently mean "any necessary number." The frameless homepage works with fascinating 26 columns (it requires a display width of 1920 pixels to view), but frameless.scss only provides variables for only 16 columns.
By "give your grid the number of columns" means "come up with a design that makes the most of the maximum number of columns."
3. Center it in the viewport.
Align the grid horizontally to the middle of your viewport. For a grid with an even number of columns (in the photo), align the center point of your viewport in the middle of the gutter between the two centers. For an odd-numbered grid, align it in the middle of your column.
It is very simple, but it requires us to do another line of CSS code manually.
4. It really is.
Start using the grid. Use media queries to tailor your design as the number of columns becomes more accessible. Since you will adapt column by column instead of pixel by pixel, you can choose exactly when your layout should and should not adapt. This site, for example, adapts only to 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.
No, this is not "this." This is where the work begins.
You need to manually copy the grid to adapt to the various viewports, and Frameless does not provide any tools for this.
So, if you are looking for tools that you can use to build the mesh, I recommend Susy . This is a great and elegant piece of SASS.
Susie is very versatile. It has different types of grids ( demo ). It also has different approaches: you can skip the content at the beginning by declaring the width of one column and allowing Susy to adjust the number of columns according to the width of the window. Or you can declare which column numbers correspond to the width of the window, and let Susy adjust the column width accordingly.
Susy allows you to achieve what Frameless offers, but also provides all the necessary tools. Technically different, Suzy shares the same idea: start with a small grid for mobile phones and make it larger as the screen grows larger. This demo illustrates two such steps: it starts with 7 columns, but when you select a screen width, it turns into 12 columns.
Here I created a website that uses Susy to stretch in five steps: http://am-teh.ru You can see the code for this site (as well as its evolution) in this fooobar.com/questions/931032 / ... . Developer Susy commented on this positively.