I Overthought the Hell Out of Grids

[corysimmons]

I Overthought the Hell Out of Grids

Type of Presentation

• [ ] Standard Length Talk
• [x] Lightning Talk
• [x] Workshop
• [ ] Moderated Discussion

  Description

In my opinion, grids are the the most important part of your time spent in Preprocessor Land. I want to talk about my experience with building grid systems. The differences between them, and introduce my latest and greatest grid system: Lost and show how it can save you a buttload of time on every project.

The talk will quickly skip through some mundane facts about grids (how they work, where they came from, why care), then go into the differences between the grids out there right now (Susy, Neat, Jeet), and it will culminate in a demo of Lost.

Workshops: Coding Exercise

My little team of minions would each recreate different parts of EvilMartians grid-centric website using Lost.

Speaker Info

• Name : Cory Simmons
• Location : The Wonderous Ashland, KY
• Contact : cory@launchboxhq.com

  More Info (optional)

  Social Media:

• Twitter : @ccccory
• GitHub : corysimmons
• Url(s) : corysimmons.com | Lanyrd profile | TutsPlus profile

  Bio:

I am frontend guy 18 years deep who has been working on (some might say "insanely obsessing") grid systems for the past 2-3 years. I've worked on some pretty big Sass projects like TeeSpring and have almost all of my front teeth.

Photo:

http://corysimmons.com

[scottkellum]

Hey Cory, thanks for the proposal!

First off, Lost is absolutely beautifully written and flexible. Unpacking some of the thought behind it like the math and cramming all this grid functionality in would be interesting to hear. What problems did you face? Why are they important? How did you solve them?

That said, I don’t think a show and tell format where you are flexing your Sass muscles is the appropriate format. There will be people in the audience who have written grid systems and people in the audience who use and find a lot of value in other grid systems. Software doesn’t have to be everything to everyone, it has to solve its users problems well. A focus on problems you have run into and solutions you have found will make this more compelling and useful for more people.

---

I’ll add a personal note as we have had conversations about grid systems in the past and you’re probably curious as to what my personal opinions are. I haven’t used a preprocessor grid system in going on two years now in favor of writing properties to align items on the fly. I talked about this a bit at the last SassConf on a panel with Eric Suzanne (Susy) and Sam Richard (Current maintainer of Singularity). Singularity was a really fun experiment where I was trying to cram all grid and layout logic into a single package however I am somewhat disillusioned with this approach as people began to expect that Singularity was the best solution to all their problems instead of a solution to some hard problems. If you search for “The first thing to notice about this page is that it is fluid” in Frank Chimero piece, The Web’s Grain, he talks about a fundamental problem of fluid grids and that is that the content is constrained. While, design wise, I still enjoy some sort of grid to maintain order I find many grid systems overly confining in terms of execution of what I want to do and it’s easy enough now to write clean grid styles in vanilla Sass without grid helpers.

Note: the above paragraph is my own thoughts on grids and may not accurately represent the greater Sass community. LOTS of people use grid systems and find tremendous value in them, this is awesome, I do not.

Edit: Apologies, this personal note was not productive in this forum.

[corysimmons]

[scottkellum]

aw man, you didn’t have to close the issue :disappointed:

[elyseholladay]

@corysimmons seconding @scottkellum's comment.. no need to close the submission! I would love to see this answering some of Scott's Q's like how do you build a grid system, what problems did you run into? If someone wanted to build a grid system, what is that math like? How do you test it? What kind of differences can grid systems have in the way you set them up, do the math, make them customizable, etc? That would be an awesome workshop IMO!

[corysimmons]

@scottkellum Your response to my proposal was essentially "grid systems have gone the way of the dodo" but your response to the proposal about Susy was:

:+1: Sounds good. I think a lot of people in the Sass community use and love Susy or have heard about it and want to know more.

I'm not sure if my proposal came off too harsh or what, but something doesn't add up.

I read the article you linked to. I have 2 problems with it.

1. It's easy to design without a grid when you're just designing a blog post, simple marketing page, or have a staff of 20 designers working on a project, but consider the freelancer who has to quickly and neatly lay out a responsive site for $1000. They don't have the luxury of time to recreate a Hockney photo set on the web.
2. My grid system doesn't hinder this kind of artsy stuff at all. In fact it makes it easy and readable.

http://codepen.io/corysimmons/pen/GgaQzq

[corysimmons]

@elyseholladay If SassConf has panels that cast grid systems in a negative light (sorry if I'm twisting your words @scottkellum ) then we have a conflict of interests and it doesn't make sense for me to present.

[scottkellum]

@corysimmons Apologies. I probably should have refrained from including my personal thoughts in this thread. I am not the person selecting talks, only here to help you make your presentation better and me sharing those personal opinions got in the way of the process.

Regarding all the stuff above my personal note, I think there is a lot of really valuable stuff for you to share here but focusing on the problems Lost solves instead of how it stacks up against the competition would be great. Pulling out examples of layouts Lost solves like the ones you did here are great.

The Susy workshop is focused on using a tool, not comparing that tool to others.

I think you can take this in a few different directions. A process presentation on tough problems that you solved in building building Lost and how you solved them or a full length workshop on using Lost.

[corysimmons]

A process presentation on tough problems that you solved in building building Lost and how you solved them or a full length workshop on using Lost.

I could do both/either.

[scottkellum]

:+1:

[corysimmons]

:roller_coaster: Updated the presentation to be less jerkish.

[scottkellum]

@corysimmons I’m sorry I was a jerk. Thanks for reconsidering.

[corysimmons]

You're way too nice to ever be a jerk @scottkellum

[corysimmons]

Closing because my grid isn't Sass specific in any way anymore. It still works with Sass but it's built with PostCSS now. Enjoy the conf. Sounds fun. :dancer:

[misscs]

We welcome PostCSS! Please don't discount your talk because it isn't 100% Sass.

[corysimmons]

It would essentially just be a talk urging Sass users to build libraries in PostCSS so everyone could use them instead of just the Sass community. =\

[scottkellum]

PostCSS is a wonderful thing. What is it, why it’s a thing, and the ideology behind the syntax decisions are all relevant to the Sass community at large. LESS pushed Sass to have a more CSS-esque syntax and that made Sass better. Sass is pushing for change in the CSS spec. The CSS spec is getting better which enables things like PostCSS. Everything is interconnected and we have had people on stage who don’t use Sass. There are also ways of talking about things that don’t discourage people from using other things.

[corysimmons]

Right, I wouldn't be trying to convince people not to use Sass. I think preprocessors are great for smaller things (variables, small mixins, placeholders), but I'm starting to believe libraries should be written in PostCSS.

[scottkellum]

I think I find this point really intriguing @corysimmons. I’m sure you will re-invent things many times over by SassConf so focusing on a tool that you made or technology you use may lock you into a topic you have shifted away from in a few months time.

What if you talked about your research process, finding inspiration, and executing on it? Why did you create Jeet, Lost, Typographic … etc? What made you experiment with Stylus, Sass, and PostCSS? You make a ton of great projects and I think it would be helpful for everyone to hear why you do it so that they may be motivated to learn, create, and share too.

[corysimmons]

That's why I keep closing this. It seems like every other day my opinion on what I should present on changes.

I guess what I'd like to present on is trying to urge people away from writing libs for specific preprocessors in favor of PostCSS so their libs work for any preprocessor and vanilla CSS. I could present this however you think it would be best received but I think telling my troubling story of maintaining libs in a variety of preprocessors and finally switching to PostCSS would be well received. I think it would put a human story on the whole debate (is there even a debate anymore?).

To my point that all libs should be migrated to PostCSS, @mdo just tweeted that he wants Bootstrap ported to PostCSS: https://twitter.com/mdo/status/591364406816079873

[mdo]

Just for clarity, I mentioned v5 will most likely be with PostCSS (v4 will be SCSS). :)

[corysimmons]

Clarity shmarity, you said all future versions of Bootstrap are PostCSS-centric. I read through the lines.

[mdo]

<3