Yeah, I went there. I had to. Searching online turns up next to nothing in the way of objective, up to date and thorough comparisons of the two systems.

I'm comfortable using Susy as my Sass based responsive grid system these days but my curiosity has been piqued by Singularity. This morning I decided to read the documentation and a few other posts to try and get a better feel for the main differences without fully diving in and attempting to use it on a project.

Furthermore, during the Omega 4 docs sprint the other day, I'm sure I got a whiff of a Singularity preference which was baffling as Omega 4 currently ships with example layouts that use Susy. Maybe these example layouts were created before the shift in preference? Maybe I totally got the wrong end of the stick and no such whiff ever existed (apologies for stirring up sh*t if that's the case).

From what I can tell as a Susy user and one-time Singularity docs reader, each seems capable of producing similar results and the few main differences I could spot were:

(numbered for ease of discussion / correction, not importance)

  1. Susy defaults to a float based layout, Singularity defaults to an isolation ("Zen") based layout (thankfully, each provides a means to selectively override this as both techniques have their uses).
  2. Singularity is apparently more "aware" of column context when dealing with nested grids, though this is just what I'm hearing; I can't be sure of which is "better" at this and why (hence the need for more posts like this).
  3. Singularity seems a bit more verbose, probably due to point (1).
  4. Susy seems to have been around for a while longer.

I'm aware of Susy Next and the plan to merge the benefits of much of this stuff. This is really exciting but progress seems a little slow so I think this discussion is still relevant for the time being.

So, some questions to the Omega 4 community. Answer whatever you can:

Q1) How's my whiff detection? Rubbish? Uncanny? Is there a quiet shift towards Singularity? (I guess this is directed more at the maintainers and anyone present at the last docs sprint)

Q2) Do any of you folks have reasonable experience in using both grid systems and would you be able to comment on the main practical differences? I'd love to hear your thoughts if so.

Q3) What grid system are you using with Omega 4 and why?

==

I'm just gonna leave this nastiness down here, purely for keyword purposes:

Susy vs Singularity

Susy v Singularity

Comments

msmithcti’s picture

msmithcti CreditAttribution: msmithcti commented

Great idea, it's a good time to have a discussion on this!

Q1) You are correct, I think it may have been me that mentioned Singularity in the docs sprint. I wouldn't say there is a shift towards Singularity and away from Susy I just feel it is right to show both systems. As of 9b643c7 we now actually have an example of Singularity in Omega. So to summarise: both are good, we should demonstrate both.

Q2) I'm quite new to using Singularity, the main differences IMO:

  • The isolation method (as in Zen Grids) is available (there is also an option to use the float method).
  • Singularity has support for asymmetric grids.
  • Integrates better with Breakpoint

Q3) Generally Susy, although I'm starting to use Singularity more recently.

msmithcti’s picture

msmithcti CreditAttribution: msmithcti commented
Issue summary: View changes

Added keyword nastiness for lost souls looking for answers.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

Interesting stuff and thanks for clarifying that an example using Singularity will now be shipping with Omega 4.

I have some further questions about the points you've raised. I'm not picking holes, I'm just really keen to build a clear picture of the real practical differences to help people decide. Please correct me where I've failed to grasp things correctly or missed an important point :D

The isolation method (as in Zen Grids) is available (there is also an option to use the float method).

How does this compare with isolate() & isolate-grid() in Susy? Sounds pretty similar to me. Is there much of a difference here?

Singularity has support for asymmetric grids.

Yes, this doesn't seem to be available in Susy as a function in itself, but the same results are achievable via container() & span-columns(), no? Is the benefit in using Singularity here just about how concise your code is and not having to remember how many columns a certain region needs to span?

Integrates better with Breakpoint

Now I've never used breakpoint before and have wondered what it can offer me over Susy's at-breakpoint() mixin. You seem to value it's involvement - can you elaborate on this at all?

Sorry to just fire a bunch of questions right back at you but I really feel that this info needs to be out there. Thanks for your input so far!

msmithcti’s picture

msmithcti CreditAttribution: msmithcti commented

I wasn't aware of isolate() in Susy and have never used it. From the docs it looks like it's use is more verbose (you have to use span-columns() with it). It also seems to be touted as a way of overcoming any sub-pixel rending issues, rather than something to be used by default.

You can indeed make the illusion of an asymmetric grid with Susy by placing items on the grid asymmetrically, with Singurlarity you can actually place items on an asymmetric grid.

My preference for breakpoint is due to the fact that it is set up to do one thing: breakpoints. Also, at-breakpoint() is tightly coupled to Susy "media layouts" which makes it less relevant in other parts of your stylesheets. You also have access to some additional features - like no media query fallbacks for example.

Hope that clears a few things up!

fubhy’s picture

fubhy CreditAttribution: fubhy commented

This is why I use breakpoint (both with Susy and Singularity) instead of at-breakpoint from Susy: https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

OK, so I'm totally sold on Breakpoint now :D

Sounds to me like Singularity just about trumps Susy for the reasons we've outlined here. I'm gonna have to give it a go now, thanks for all your input.

I'll post back here if I turn up any other noticeable differences along the way.

fubhy’s picture

fubhy CreditAttribution: fubhy commented
Status: Active » Fixed

I wouldn't say it 'trumps' it. You can very well use Susy together with Breakpoint too. Both are awesome. The main point here is: No-Query Fallbacks are brilliant and the #1 reason for why you should use @breakpoint instead of @at-breakpoint when using Susy. Anything beyond that is basically a matter of taste imho. :)

leonardo.drupal’s picture

leonardo.drupal CreditAttribution: leonardo.drupal commented

Hello,
I suppose this is a good place to ask my question since the discussion is revolving around the use of the Singularity and Susy grids.
Is it possible to introduce an option in the omega-wizard to create a sub-theme based on the Singularity grid as well, instead of defaulting to the Susy grid.

Thanks,
leo

fubhy’s picture

fubhy CreditAttribution: fubhy commented

The subthemes generated with Omega are not specifically targeted at Susy. You can easily just use Singularity, no problem. However, I see where you are coming from... The problem is that a starterkit is a full package, and it is not really assembled out of muiltiple different parts... It's simply a single thing. Hence, it's hard to provide options for everything as that would dramatically increase the number of starterkits. Maybe that's not a bad thing after all though. Will think about it. However, this is not the right issue to discuss this. The question you just asked is rather "Can we provide more granular options for the starterkits to assemble our sub-theme instead of just copy the starterkit 1:1?" It's an idea i've been keeping in my head for a while now but I am not sure how to solve this properly. Please open a separate issue if you want to discuss it.

leonardo.drupal’s picture

leonardo.drupal CreditAttribution: leonardo.drupal commented

Thanks for the immediate response fubhy. I don't need to start a separate issue. I had an idea and just wanted to put it forward. I've been creating sub-themes using the Singularity grid system manually. Just thought it would be convenient if it was possible to add an option in the wizard. Since you say it will be difficult to do it, I will be more than happy to continue creating the sub-themes manually.

Once again thanks for your amazing contribution to the Omega theme.

P.S. I will delete my posts if you think they are irrelevant to this discussion.

Thanks once again,
Leo

fubhy’s picture

fubhy CreditAttribution: fubhy commented

You can always create your own starterkits in your own custom base theme (based on Omega). @see how Omega declares it's starterkits and just copy one into your theme. Next time you run drush omega-wizard to create a sub-theme of YOUR custom base theme your starterkit will be available as an option. That way you don't have to do it manually each time. That also allows you to maintain your own, custom adaptions in your own base theme without having to re-do them for every project. Everyone has some special things they like to use across al their projects. That is where this becomes very handy.

I will think some more about how we can make the starterkits more dynamic and somehow provide multiple Lego bricks you can plug together. However, as said earlier: I am not yet sure how that would work.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

(not verified) CreditAttribution: commented
Issue summary: View changes

Typo correction

stormpat’s picture

stormpat CreditAttribution: stormpat commented

Just finished my first Omega 4 site, and Susy + breakpoints was a true joy. I have no exp with singularity, but im sure its as good. What i understand Susy is based on a very small "core" that is the foundation, and the rest of the framework is built around it.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented

Since this conversation, Susy 2 has been released (what was gonna be Susy Next?) with better Breakpoint integration and concepts "borrowed back" from the likes of Singularity and Zen grids. I guess that changes some (all?) of what was discussed here.

http://susy.oddbird.net

Nicolas Bouteille’s picture

Nicolas Bouteille CreditAttribution: Nicolas Bouteille commented
Title: Susy & Singularity grid systems: comparison and gauge of preference » Susy 2 vs Singularity grid systems: comparison and gauge of preference
Status: Closed (fixed) » Active

I too would be glad to hear why people would rather go with Singularity or Susy 2.

dddbbb’s picture

dddbbb CreditAttribution: dddbbb commented
Title: Susy 2 vs Singularity grid systems: comparison and gauge of preference » Susy vs Singularity grid systems: comparison and gauge of preference

Changing the title back: the issue was and still is, not specific to Susy version 2. Let's not confuse people.

stormpat’s picture

stormpat CreditAttribution: stormpat commented

Finishing up my second Omega 4 site, this time with singularity. Honestly cannot say which is better, they are both a good bet, and i don't think you can go wrong with neither one.

Nicolas Bouteille’s picture

Nicolas Bouteille CreditAttribution: Nicolas Bouteille commented

Did you use Susy 2 on your first Omega 4 website? If yes could you provide feedback about the version of the different gems you used here https://drupal.org/node/2230709
I think Susy 2 requires Sass 3.3 for example, which may not work with other gems?
Also see https://drupal.org/node/2240137

cosolom’s picture

cosolom CreditAttribution: cosolom commented
Status: Active » Closed (outdated)

I think we can close this question. https://snugug.com/musings/saying-goodbye-to-singularity/
Susy is win