Favorite grid system

[tooth-paste]

I was wondering what grid systems you guys were using for clients?

Found a grid that is looking very promising. 

[Ivan Gretsky]

There is a lot of places this have been discussed in the forums. If you want to know what others are using you can check something like:

https://processwire.com/talk/topic/1576-css-template-framework/

https://processwire.com/talk/topic/5948-dead-simple-grid/

...or about anything here.

On that materialize thing... Can't tell for sure, but it looks quite similar to bootstrap and is probably some kind of derivative. If use Sass anyway, I prefer Susy 2 as it is almost completely customiable.

[pwired]

I noticed that uikit is becoming popular lately. Even Ryan is fond of it.

As far as I have played with it, I find it worth to invest time in.

http://getuikit.com/

For small projects I always use pocketgrid.

Here you find more in the forum:
https://processwire.com/talk/topic/3791-things-to-read-about-css-frameworks/page-2
https://processwire.com/talk/topic/1576-css-template-framework/
https://processwire.com/docs/tutorials/installing-a-css-framework/
https://processwire.com/talk/topic/4572-pure-a-set-of-small-responsive-css-modules-that-you-can-use-in-every-web-project/


 

[Beluga]

I have mentioned Lost Grid before. Recently Cory Simmons transferred the project to Peter Ramsing: https://github.com/peterramsing/lost
 
From the roadmap:
 

A focusing of Lost Grid. With the ever-changing web, Lost wants to be a tool that allows one to dive deep and enable powerful grids, not be the "one tool fits all". With improved documentation and a keen focus, Lost plans on being a great grid option to stand alongside the rest of them.

Looks like Cory can't stop creating new grids, though https://github.com/posthumans/postcss-ant-grid

[Nico Knoll]

Well I'm using Bootstrap Grid without all the other Bootstrap stuff. works quite nice and easy to adopt for people who have bootstrap experience

[OrganizedFellow]

Bourbon/Neat

[flydev]

I am just finishing a new website with PW and Bootstrap v4 alpha and it work very well.  Uikit could be the best alternative imo.

[tooth-paste]

Thank you for the replies so far. I'am now testing UIkit and like it a lot, especially the class

uk-width-* 

 It is simple to understand and clean code.

[tpr]

I'm just re-discovering UIkit in these days. I don't care too much about grids as most of them works just fine, but I do appreciate UIkit components. Parallax, sticky, scrollspy, slider et al can really spice up things without too much effort. It's true even if in some cases documentation is imperfect - mostly a google search gives the result.

To make things easier, I also included Base's helper classes which adds nice support for responsive issues, for example "float-right-tablet" or "inline-block-hd". Plus I have a less file drop-in with my custom helper classes, like ".mb2 { margin-bottom: @margin * 2; }" and such.

[Webrocker]

I used to use Zurb Foundation, however I got sick of having all the presentation classes ( row, three.columns) etc etc and not being able to fully customize it without having a lot of !important overrides. Now I use http://neat.bourbon.io/.

Zurb Foundation is great for quick prototyping, but I still found it a little lacking in terms of customization.

The newest Zurb Foundation seems to have learned quite a bit from other, more customizable, systems like Susy or Singularity and let you use their inner workings/mixins for your own css selectors, so no more row, col, hide, show classes littered through your markup.

But I haven't looked much into that, since I use Susy2 for most stuff. It took a little while to get the concept of context (say you have an eight col grid, and inside an 4 of 8 spanning element you nest another element with span(2 of 8) - what width would you expect?) but once it clicks, working with Susy is really fun.

but like processwire it leaves a lot of decisions to you as the developer, not offering pre-setup solutions, so compared with bootstrap or foundation it seems less comfortable at first glance. but if you really need to, you can easily integrate parts like the forms- or navigation patterns of foundation into Susy, and what I really like about Susy is, that I can keep my markup clean and can go from early prototypes to full production code with the same code basis, adding fidelity and complexity as the project progresses.

[tooth-paste]

Myself I tried UIkit but for me it is not a solution. Mostly to do with handeling gutters. I now got back to the newest Foundation. Works great and some nice improvements since the last time I used it.

[tpr]

Thanks for mentioning Neat, I will try it next time. It's different from the grids I used beforehands, I'll see how it fits.

[dragan]

Another vote for Susy here. It took me a little while before it clicked, but once you understand it, you'll never want to get back. Good intro tutorial:

https://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/

One thing I like about it: The markup is kept lean. You define the grid behavior on the element without giving the element 3-4 classes (for each breakpoint).

article {
    @include span(8);
}

aside {
    @include span(4 last);
}

i.e. you don't need any grid classes on the HTML elements anymore, like Bootstraps: .col-xs-12 .col-sm-6 .col-md-8 etc.

You can define your entire grid-system with something like this:

$susy: (
  columns: 12,
  container: 1200px,
  gutters: 1/4,
  global-box-sizing: border-box,
  debug: (image: show)
);

[tpr]

Using bourbon-neat in two current projects, and kinda like it. But I don't really get why it isn't mobile-first by default - I know it's easy to adjust to be mobile first, but the official docs is using desktop-first approach. Does someone know the reason?

[OrganizedFellow]

... Does someone know the reason?

I've been wondering that for a long while now too!

I also just write everything mobile first, then add the tablet-up styles.

It is a great framework and so quick and easy to use!

[gebeer]

Since browser support for flex is now pretty good, I am looking into using flexboxgrid.

It looks very promising and looking at their github repo with all those likes and forks it sure will last.

Has anybody here used it and what do you think?

[nikosch]

More important: How do you manage your grid blocks in the backend. Repeaters? PageTableExtended? Repeaters have the problem, that you can use only one content type. With PTE every container is a page 1) which lies between other child pages and 2) needs a "page creating activity during creation. Too sad the new Repeater Matrix is a pro fields module.

[louisstephens]

I have been using Materialize in some of my recent local testing environments and thus far I am loving it. It does seem very similar to bootstrap, but I am enjoying it more. I have not yet tried throwing it (or any grid system) into the admin area. Has anyone done this with success?

[tooth-paste]

I have been using Materialize in some of my recent local testing environments and thus far I am loving it. It does seem very similar to bootstrap, but I am enjoying it more. I have not yet tried throwing it (or any grid system) into the admin area. Has anyone done this with success?

Why do you like it? I'am interested as well.

[louisstephens]

To be honest, I am loving the D.O.F. that can be assigned to elements via classes.  However, I have found that materialize is much more "opinionated" about how buttons, forms, cards, etc etc display and function (more of a UX framework) where I feel bootstrap is a lot more forgiving on these. I am still picking through it all, but I have seen that there is some overlap between the two. 

I will definitely have an update later this week once I am able to dive further into it.

[DaveP]

Material Design Lite - http://getmdl.io/ - is quite interesting. One of the best-documented projects of the type that I have come across.

[tpr]

Just switched from Neat to Susy in the current project because I was fed up with not able to accomplish a few simple things in Neat (of course, it may be that I was doing things the wrong way).

The good thing was that it took about 10 minutes to swap the grid as there was no grid classes in the markup. This reassured me that grid classes in the markup is not necessarily a good decision.

So far I'm fine with Susy, seems more logical to me.

[horst]

The future: grid layout and flexbox (use it today with polyfill)

[DaveP]

http://getuikit.com/docs/flex.html

[LostKobrakai]

My current grid system is this, based on inuit.css's layout object:

Include the mixins and some media queries (99% only for updating the width) and most grids are done. 

/**
 * Mixin variant of inuit.css's layout object
 */

$gutter:           20px;
$gutter--tiny:     $gutter / 4;
$gutter--small:    $gutter / 2;
$gutter--large:    $gutter * 2;
$gutter--huge:     $gutter * 4;

$global-border-box:       true !default;

/**
 * Base layout
 */
@mixin layout {
  list-style: none;
  margin: 0;
  margin-left: -$gutter;
  padding: 0;
}

@mixin layout__item {
  display: inline-block;
  padding-left: $gutter;
  vertical-align: top;
  width: 100%;

  @if $global-border-box == false {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

}

/**
 * Modifier classes
 */
@mixin layout--vertical{ margin-top: -($gutter); }
@mixin layout__item--vertical{ padding-top: $gutter; }

@mixin layout--tiny{ margin-left: -($gutter--tiny); }
@mixin layout__item--tiny{ padding-left: $gutter--tiny; }

@mixin layout--small{ margin-left: -($gutter--small); }
@mixin layout__item--small{ padding-left: $gutter--small; }

@mixin layout--large{ margin-left: -($gutter--large); }
@mixin layout__item--large{ padding-left: $gutter--large; }

@mixin layout--huge{ margin-left: -($gutter--huge); }
@mixin layout__item--huge{ padding-left: $gutter--huge; }

@mixin layout--flush{ margin-left: 0; }
@mixin layout__item--flush{ padding-left: 0; }

@mixin layout--rev{ direction: rtl; text-align: left; }
@mixin layout__item--rev{ direction: ltr; text-align: left; }

@mixin layout--middle{}
@mixin layout__item--middle{ vertical-align: middle; }

@mixin layout--bottom{}
@mixin layout__item--bottom{ vertical-align: bottom; }

@mixin layout--right{ text-align: right; }
@mixin layout__item--right{ text-align: left; }

@mixin layout--center{ text-align: center; }
@mixin layout__item--center{ text-align: left; }

@mixin layout--auto{}
@mixin layout__item--auto{ width: auto; }