Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Created May 8, 2012 23:49
Show Gist options
  • Save mirisuzanne/2640483 to your computer and use it in GitHub Desktop.
Save mirisuzanne/2640483 to your computer and use it in GitHub Desktop.
New names for the Susy +columns() mixin
// This must be an old conflict, but I never noticed it until today:
//
// w3c : http://www.w3.org/TR/css3-multicol/#columns0
// Compass : http://compass-style.org/reference/compass/css3/columns/
// Susy : https://github.com/ericam/susy/blob/master/REFERENCE.mkdn#mixins
//
// In the w3c spec, 'columns: $number' can be used to split content into a $number of columns.
// Compass has a CSS3 'columns()' mixin, that works with the w3c spec.
// In Susy, we have a competing 'columns()' mixin that _spans_ columns rather than _splitting_ them.
//
// Time for an API name change!
//
// Between these three, I lean strongly towards the clarity of #3.
// But you might have even more ideas...?
/* 1. short */
@include cols(2);
/* 2. name-spaced */
@include susy-columns(2);
/* 3. clarified (by Chris Eppstein) */
@include span-columns(2);
@pdewouters
Copy link

how about: colspan();
just like HTML table syntax

@mirisuzanne
Copy link
Author

Oh, I like colspan. Just trying to think if that opens us up to any more conflicts like the one we're trying to resolve...

@micahgodbolt
Copy link

colspan() is cool too. grid() or span() just don't have enough context.

@silvenon
Copy link

silvenon commented May 9, 2012

The reason why I'm against colspan is because the naming convention of Compass mixins is that they (as far as I recall) always have full words in their name, even if they're long (e.g. apply-side-rhythm-borders). I suggest then sticking with #3 and optionally having #1 as a shortcut.

@mirisuzanne
Copy link
Author

I agree, and I've been moving the rest of Susy towards that convention.

Thanks for all the thoughts! Many good ideas, but at this point (weighing clarity over brevity) I'm moving forward with span-columns. That doesn't even compare to the length or number of -'s already in Compass and CSS. I use auto-complete in my text-editor to help with that sort of problem. Keep languages cleaner by keeping shortcuts in the text-editor.

@pdewouters
Copy link

so how about

 susy-grid-span-columns-count()
:)

@memetical
Copy link

just ran into this exact conflict when attempting to use compass columns mixin in conjunction with my susy grid layout.
What would be the best way to resolve this issue for my current project until this is fixed?
Anyone care to help a bloody compass beginner?

@mirisuzanne
Copy link
Author

@memetical You can either upgrade to 1.0.alpha.1 (check the changelog for upgrade instructions), or you can use the long-form properties as listed here: http://compass-style.org/reference/compass/css3/columns/ (column-count, column-gap, etc).

@pdewouters You're not thinking this through clearly. Nouns are more appropriate to variables. For most clarity we should use an active but incomplete sentence:

@include please-adjust-the-susy-grid-span-columns-count-of-this-element-to();
@include thank-you-kindly();

The latter doesn't do anything, but is necessary for proper manners.

@jamiehodge
Copy link

jamiehodge commented May 10, 2012 via email

@pdewouters
Copy link

@ericam thanks, didn't realize that!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment