This is gary, a flexbox grid that uses some simple sass mixins for nuclear layouts.
Need to center an element relative to pretty much anything? Want to push four children to the corners of their parent? Flexbox lets you do that. gary makes that process a bit quicker.
I developed this project during my Fall quarter of school at the Seattle Central Creative Academy. SCCA is a design programmed centered around job acquisition and a student's development of rudimentary design skills. In that environment, there's often not enough time to dig deeper than just below the surface on a subject.
We study micro typography for 10 weeks, then move on to macro, then layout an 80-page magazine while learning to write basic html/css. Time, at SCCA, is always of the essence.
Enter Special Topics
Each quarter of our second year, we have a class dedicated to self-initiated learning. If a student want to focus more acutely on branding, packaging, or logo design, Special Topics is the class to explore that interest. For me, the idea of a 10 week self-initiated project with no real-world ramifications means falling into a p5.js wormhole. Luckily (or maybe unluckily, p5.js seems like the most fun in the whole world) that didn't happen.
Sass & Flexbox
In our first year, we learn the basics of HTML and CSS. Enough to layout a simple marketing page, or the bones of a retail commerce site. We learn the Bootstrap framework and some nifty CSS hacks. The rest is on us.
After a few months of writing CSS, I became incredibly frustrated with a few things. First, I wanted to be able to nest my CSS like I nest my HMTL. Secondly, I hate typing RGBA(147,201,57,1); and then copy/pasting it, then having to change one number, only to have to copy/paste it all over again. I was also growing tired of prefixing; a problem I learned will never go away, but also learned there are programmatic ways around. Then I found out about Sass. And it confused the hell out of me.
At the same time I was trying to wrap my head around Sass, I was also trying to wrap my head around the Flexbox layout module. Instead of tackle them separately, I decided to smash them together and learn them at the same time.
That's how I started gary. A quick sidenote about the name gary. I give all my projects a simple working-title name . It's always a person. A way for me to keep stock. Usually, that name drops and I don't use it publicly, but this project is very much an ongoing process, so the working-title name remains.
As it stands, gary is an incredibly simple tool that accomplishes two things. It teaches a beginner one of the core foundations in Sass, mixins, while also introducing Flexbox. Originally, the grid included a presentational version that pulled from the mixins using a list and some @for and @if action that would allow a person to write bootstrap-ish HTML and never have to touch the Sass or relly think about what Flexbox was doing. I think that's a bad way to go about learning something, so I removed it from the core grid.
As it stands now, gary is just three mixins and a wrapper. The wrapper isn't entirely necessary, but it's always nice to have one around. It's simplicity allows you to get right down to learning the basics of Sass and the functionality of Flexbox. Of course, some googling and research is still required at this point. Part of my leraning process involved jumping back and forth from MDN and css-tricks to my editor.
In the time since I developed this project, there have been a number of tools that have popped up that teach Flexbox in the browser, some do it with a drag and drop interface, one is a Frogger-clone. Mine is still very rudimentary.
So what's next?
Moving forward, I plan to write up a how-to guide and learning-page that includes more fundamentals of Sass—variables, extensions, lists, mapping. I want to have the core gary grid available, but then a more eduacational version, as well. Then I'm going to test it out at SCCA, to see how students take to it.
Prefixing. That's in the works, as well. Right now, gary is very dependant on auto-prefixing. Auto-prefixing is great, but not everyone uses an auto-prefixer (they should!). But because the grid is all mixins, I can easily prefix the mixins and the end-user can still write un-prefixed code. That's a win for everyone.
For better and for worse, gary is a modern browser tool. Even with the right prefixes, Flexbox is still a little buggy. For rapid protoyping, especially layout, Flexbox is awesome; for backwards compatibility, it's a shit show. Just like anything else, right tool for the right job applies with gary.
You can fork gary on github and play around with it, it's super simple. Or you can pop over to codepen where there's a simple test of gary doing its thing.
