FluiD
Grid

beta

Component's layout

Content driven

On the left side you can see content driven responsive behavior (recommended by fluid grid).

Card responds to space provided by its parent

This kind of behavior enables card to go from vertical to horizontal and back, based on its container size.

In the end, card layout can use optimal layout for given space, not based on window width.

Bootstrap like

On the right side you can see responsive behavior typical for bootstrap like grids.

Card itself has almost no responsive behavior. Only the master grid in which the cards are placed deals with the responsiveness

Small card has vertical layout, as container grows, it turns to horizontal layout. Once more cards fit in, two horizontal cards line up in a row and so on.

Content driven
Bootstrap like
I part you
God creates dinosaurs.
facebook
linkedin2
twitter
rip I than
I love to be directed.
facebook
linkedin2
twitter
Drag here
character be thoughts
'Cause maybe if we screw up this planet enough, they won't want it anymore!
facebook
linkedin2
twitter
average we screw
What do they got in there?
facebook
linkedin2
twitter

Layout

Layout can be done with fraction units. In following example there are .f-col-10 (keeps minimal width of 10 * minColWidth) and .f-col-5 (minimal width of 5 * minColWidth). Then .f-grid-14-collapse is used on Grid to avoid empty space, when cells are breaking into two rows.

For complex web page layouts it is reccomended to define your own grid with named areas and media querries.

Fluid grid focuses on content driven grids rather than page grids (too much code would be needed/generated by Fluid grid, to fulfill advanced page layout. Probably just very few of them would really be used.. ANd we don't want dead code, right?)

Header
Aside
Footer
Drag here

Tiles

Random tiles

If you either don't mind empty cells or you even prefer them, just add random cell sizes and let it go.

Tuned patterns

After some time you start finding cell patterns which looks random a bit, but as the container resizes, no empty cells appear in between.

In order make your life easie in finding those patterns, there is f-grid-dense, which allows elements to fill empty cell even if they are out of order.

Hints for seamless patterns:

  • Use cell sizes with many divisors (2,4,6,..). Prime numbers are on the other hand quite hard to fit in.
  • Dont use many cells with different sizes
  • Use more small cells at the end (f-grid-dense will bring them from end and use them for filling gaps)
  • Use repetitive sequences, where in one sequence, 1) next cell is always smaller then one before and 2) cell before in sequence can be exactly filled with cells following it in sequence. See example below.
Random with gaps
Tuned pattern
A
B
C
D
E
F
G
H
I
J
K
L
Drag here
A
B
C
D
E
F
G
H
I
J
K
L
M

Descending sequence

A
B
C
C
A
B
C
C
A
B
C
C
A
B
C
C
A
B
C
C
A
B
C
C
Drag here