You've likely come across this post wondering what the heck a sycamore tussock moth is. I'll tell you; it's a moth. Now if you're looking for the really juicy bits of what's in store for your future, look a little bit further (I mean, are we ever really satisified with our code?). Take a seat and get ready for some grid action! I'm gonna rock your coding brain so hard it'll make your briefs fall off.
Grids Fo Sho
I see grids all the time. I arrange my gum packets in grids, my glasses in grids, my games in grids, my manga in grids, my dogs in grids, and my bow ties in grids. Now, if you have the pleasure of writing your own html templates, you have the pleasure of using a grid system in the digital world (there's always mixin heaven if you can't). Some are complex (and make me wanna flip an elephant over), some are extremely simple (and make me wanna hug a wall), but maybe I found a good blend of both (that makes me wanna chew a sweet bone)!? Cuzz baby, deep down, grid systems are margins, widths, and some floats (flex me some love, kidding~ the future of sycamore tussock moth grid will have flexbox as an option).
The Sycamore Tussock Moth takes every breakpoint and assigns the nessary column widths based on a base column number. In order to get all the spice working, there are some SASS variables that help bring it all together:
$column-base: 12; I initially thought that a grid system was created by saying, "Hey, I want 12 columns right now". 100 / 12 on ma items and DONE. It's actually how many columns exist at all times at any breakpoint. Given a column-base of 12, a 6 column layout would be created by making each item 2 of 12. X-X Work with me here!
$column-between: 1%; This let's the little system know how much space you want on the left and right of each item. The total space between each item at this point would be 2%. Wooooo Haaaa! The left and right of the entire grid is then stretched out -1% on the left and right so all your columns are nice and flush~
$column-push-desired: true; Pushing columns. Oh boy. By enabling this, the grid system will go over alllllll the breakpoints again with -push added to the class name. This gives you a tool useful for making empty columns along your grid. I like this one!
$column-pull-desired: true; Pulling columns. OH BOYYY. Why? I dunno. Is this a thang? I'm writing this on my commodore 64. If you don't want it, set this bad boy to false.
$breakpoints: (); The very foundation of Sycamore Tussock Moth Grid. It's quite a beaut. Breakpoints are set at every 100 pixels. I like to make my content breathe. If something can't fit at one particular increment, just jump to the next. For every breakpoint you have it will generate classes for columns based on the $column-base variable.
1: By default, all columns are floating, even on mobile. Well, who knows when the column will float, so why not lean things down and do it by default. The clearfix on the grid handles any oddities that happen otherwise.
2: Let's loop through all the breakpoints. The first snippet in the loop is a media query respective to that breakpoint that'll wrap all of our hottness in a little steamed bun.
3: Let's loop again for each column until we reach our column base. This will take the generic col- name, add on the breakpoint, and then add on our index of the current column base loop. col-small-6.
4: If you enabled $column-push-desired, go through a different column base loop. This will add the same classes as our original loop but with a sneaky -push class added in! col-small-push-6.
5: If you enabled $column-push-desired, go through an even differenter (yea I said it) column base loop. This will add the same classes as our original loop but with a sneaky -pull class added in! col-small-pull-6.
1: Numbers for a standard column: width: 100% / $column-base * $x - $column-between * 2; 100% / $column-base makes sure we are dealing with 1 column in our grid. Then we times that hawtness by the current index to get how many columns the item should be. Then we subtract all dat by the margins around the item.
2: Crunching for a push column: margin-left: 100% / $column-base * $x + $column-between; Same as above but add margin from only one side instead of subtracting both sides. Make sure to add the standard column class on top of this one! Otherwise you'll get some crazy blown out mess.
3: Crunching for a pull column: Same as above but a negative value.
Examples of How Beautiful You Are
Thank you for reading this far!
col-small-6 At the 'small' breakpoint, make my item take up 6 spaces of a 12 column grid.
col-small-6 col-nation-4 col-galaxy-2 At the 'small' breakpoint, make my item take up 6 spaces of a 12 column grid. At the 'nation' breakpoint, make my item take up 4 spaces of a 12 column grid. At the 'galaxy' breakpoint, make my item take up 2 spaces of a 12 column grid.
col-small-6 col-nation-2 col-nation-push-2 At the 'small' breakpoint, make my item take up 6 spaces of a 12 column grid. At the 'nation' breakpoint, make my item push 2 other columns on the left by 2 spaces of a 12 column grid.
Thanks for reading! ~^w^~ Enjoy your evening! Okie dokie, if you wanna spend some more time with me, I have a framework to make you happy: http://mimoduo.github.io/mimogear I love you guys! <3 Have an amazing weekend! XDDD