4

For a mobile-first website, i need a grid with SASS preprocessor functions. Currently i am using the Bootstrap 3 Grid which works fine but seems to lack flexibility. Especially i do not want to clutter my html with additional css classes like row or column-4.

I found two promising alternatives:

  1. Jeet Grid
  2. Singularity

Both have powerful tools at hand to span columns, change breakpoints, modify gutters, etc. Can you give a short overview of pro's and con's for both?

Alp
  • 29,274
  • 27
  • 120
  • 198

1 Answers1

8

creator of Singularity here.

Both are fantastic and very similar. Singularity is more focused on just doing grids and little else while Jeet is more of a full-featured framework, not just the grid. Cory, who created Jeet, is great with support as well.

You may also want to look into Susy which has a strong community behind it as well.

Neat isn’t as full featured as any of these other grid systems listed but it is really elegant and simple to use so it might fit your needs.

scottkellum
  • 590
  • 2
  • 5
  • Could you tell me what the major differences between singularity and bourbon neat - what makes it more full featured?? – Simon Dragsbæk May 26 '14 at 11:44
  • 2
    @SimonPertersen Neat is primarily a uniform float based grid. It works a lot like the majority of other grid systems before it with the exception that it is mixin based instead of class based. This is great if you are putting things in order on a grid where all of the columns are a uniform width. I wrote a thing on Singularity: http://scottkellum.com/2013/04/05/singularity-a-modern-grid-framework.html — TL;DR: no container needed, internal gutter:column ratios, variable width columns, multiple output modes (not just float). – scottkellum May 27 '14 at 10:36
  • What about IE8 @Scottkellum – Simon Dragsbæk Jun 02 '14 at 16:59
  • @SimonPertersen IE8 works fine, the default method is called the isolation method which uses floats. Traditional floats is an option as well. Singularity and I think Susy offer output APIs so you can modify the markup that is being written so it meets your compatibility needs. – scottkellum Jun 02 '14 at 21:05
  • But the targeting methods that you use is not supported in IE8 nth-child selectors and tested your example project and it didn't work in IE8 – Simon Dragsbæk Jun 03 '14 at 07:24
  • @SimonPertersen The selectors used in the demo do not work, however these grid systems are completely selector agnostic so as long as you use selectors compatible with IE8 or whatever you should be fine. – scottkellum Jun 06 '14 at 19:03