Jump to content

Favorite grid system


tooth-paste
 Share

Recommended Posts

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.

  • Like 3
Link to comment
Share on other sites

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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.

  • Like 3
Link to comment
Share on other sites

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)
);
  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

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?

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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; } 
  • Like 6
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...