Jen Simmons : Writing

A lot of people are getting excited about CSS Grid, and want to learn it. A lot of people are also super busy. So let me teach you some very basic things about Grid, and get you started with a 5-minute taste.

Unlike Bootstrap or any of the other layout frameworks we’ve been using for the last decade, CSS Grid does not get applied to the entire page with everything on it.

You define a grid on a specific element. All of the direct children of that element will be placed on that Grid. Nothing else on the page gets involved.

Start by thinking about what to make a Grid container, and how to structure your markup so you have the Grid items that you want.

Exercise Set 3

It can be hard to know where to start with learning CSS Grid. You can’t bite off the whole thing at once. You want to start with a taste. Here’s my introduction to Grid, made for the day the new CSS launched in the first browser.

I’m working on a lot of different projects these days, but one of my favorites is the Firefox CSS Grid Inspector.

I first started learning CSS Grid without a tool for seeing what’s going on. It can be tough to understand why things aren’t working they way you expect. Grid is much easier to learn when you can see the lines. We shipped the original version over a year ago, as an Add-on for Firefox.

As an extension, CSS Grid Inspector “version 0” was limited in what it could do. It didn’t always line up with where it should have. (To make a tool that works accurately in all use-cases, especially crazy edge-cases, it needs to be directly integrated with the browser’s rendering engine. No extension can do that.)

Really, the main job of the Firefox Grid Inspector version 0 was to prove that such a tool is useful and would be popular. And it did so very successfully. Along the way, we gathered lots of feedback from designers and developers who were also learning Grid — thank you to everyone who chimed in, especially Eric Meyer and the CSS Layout Club NYC. This tool is much better because of you.

That early experience gave us the momentum to ship version 1, baked straight into the Firefox Dev Tools, in the first week of March 2017. We were proud to ship developer tools when we shipped CSS Grid itself, on day one. Our CSS rendering engine team created an API for Grid, to which our Dev Tools team connected the new tools. And we got it into your hands, so you could use it to learn and to code layouts with this amazing new specification, CSS Grid.

Firefox Grid Inspector version 1 offers one thing — the ability to see your grid lines. It’s the tool you’ll find in the regular version of Firefox today.

Since March, a ever-growing cross-department team has been working hard on version 2. They declared it finished-enough to ship in Firefox Nightly (without a flag) in late June. I’m excited to finally be able to show it to you. We’ve added a lot.

Watch this video for a 10-minute introduction into how the mid-July version of the Firefox Grid Inspector works, and how you can use it to write layout CSS.

Download Firefox Nightly (if you don’t have it already) to get access to the latest and greatest. In fact, things are moving so fast, this video is already slightly out of date. (“Display grid areas” has been renamed “Display area names”, and the list of options has been reordered.) Things will keep changing. The regular version of Firefox will get these tools sometime in the future. Meanwhile, Nightly will continue to be the best place to learn and code CSS Grid.

Let me know what you think. Feedback is definitely wanted. Which tools are the most helpful? Which parts are confusing? Or simply not very helpful?

Not many people have a lot of experience with Grid, and getting real feedback from real developers and designers can have a strong effect. We need to hear from you.

Please don’t misunderstand what I just said / wrote / tweeted. I’m not a girl who doesn’t get any of this web code stuff. I’m a woman who is a member of the CSS Working Group. Who’s been teaching the industry ground-breaking insights into the nature of CSS, layout, graphic design, and the medium of the web full-time for the lastthreeyears. I’m working on new CSS, inventing things that don’t exist yet.

The other day, when Eric Meyer was introducing me on-stage, before a six-hour lecture on layout CSS that I gave at An Event Apart, he said he’d learned more about CSS from me in the last few years than from anyone else. Quite an honor. Gosh. Wow. Thank you Eric. Yes, this Eric Meyer.

In fact, I’m a highly-technical person, who’s mixed design with a deep mastery of nerdy tools my entire career. Which has spanned multiple industries. I wrote my first line of code in 1982 — learning BASIC, Fortran, and Turbo Pascal. In fact my skills in Turbo Pascal won me Computer Science Student of the Year in high school. I twice won (structural) engineering awards for building the strongest bridge in contests at Virginia Tech. The first video game I owned? Pong. Likely before you were born. I took Calculus I and II in college just for fun (and it was super fun). My professional career started almost three decades ago in print, where I learned pasteup and film-based techniques for offset printing right before the industry started switching to desktop publishing. Soon after, I started working in theater as a stagehand, an electrician and a carpenter. Once I’d gained enough experience, I designed for theater professionally — creating lighting, scenic and sound designs, expanding later to projection design. I designed computer-driven projection for an opera about Nikola Tesla which premiered in Belgrade, Serbia. I taught myself how to mix sound and mixed salsa bands. I taught myself double-entry bookkeeping because we needed someone to do the bookkeeping. I taught myself PageMaker, and then taught my boss at the print shop. I taught myself SuperPaint, Freehand, Illustrator, Photoshop, QuarkXpress, etc, and then taught all my friends who wanted to know. I mastered Final Cut Pro, Director, Flash ActionScript. I figured out how to install an AppleTalk network. This is how it used to be — other than one friend, there was no one else around who knew any of this stuff, and the web wasn’t robust enough yet to use to learn any of this stuff, so I taught myself. And then taught everyone around me.

Over twenty years, I sent thousands of jobs to a printing press, and designed or produced more than 400 shows. When the web came along in the mid-90s, I started designing and building websites, too, making hundreds of sites for artists, non-profits, and tiny businesses. I got an almost perfect score on the GRE Analytical Ability test, despite being out of school for ten years before taking it. I got straight As in graduate school, and finished first in my class with an MFA in film production, which included learning a lot of nerdy film camera technology. I’ve taught university classes in web design. And taught media arts to teenagers for several years. Once I moved to New York city, nearly ten years ago, I dove full-time into web design, working on big projects for big names, including CERN, Google, and the W3C. I’ve stood onstage teaching CSS, layout, and how to best make websites many, many times . And I think it sounds stupid to brag like this, but it’s so deeply frustrating to have people not even consider me a person who might really know something deep and complex, because of the assumptions you make about who I am before you know anything about me.

So, take a breath. And realize that just because I’m a) a woman, and b) willing to admit there’s still a lot of stuff I don’t know, doesn’t mean you know more than me about this CSS stuff, or that you should tell me How It Is™. So relax. Notice if you have a bias against me and take my statements of vulnerability to mean that I’m stupid. Because, well, I’m not. That bias is on you, not me. Or really, it’s on society, and forces that were started long before you or I were born. So, take a look at the baggage you might be carrying around, and see if there’s something you might want to let go. It’s really just about taking a moment to notice the bias, and not acting on it. And waking up again tomorrow and attempting to do the same thing again. Notice the bias. Ignore it. Act differently than sexism — or racism, or homophobia, or classism, or nationalism — tells you to. It’s not your fault. But it is your responsibility.

I like explaining how there’s a lot of stuff I don’t know. I like learning in public. I think it helps us all. I just get tired of paying a price for this, when men assume I’m stupid, and try to explain things in a way that clearly shows that they don’t actually understand what I’m saying, or who I am saying it. So thus this defensive ranty braggy note. Which maybe will make it easier to flop around describing all the stuff I don’t know, being the person I actually am. I don’t like being bitter about the death by a thousand paper cuts stuff. So I’ll just leave this here. Where I can link to it periodically, as a footnote to other posts. And see how that works out.

Love, Jen.

Oh, in a similar vein, two months ago, I decided to institute an anti-mansplainer quiz. I think I’ll put it here.

If you would still like to tell me how wrong I am, from a place of deep conviction that I don’t know much, you may do so. But you first have to pass this quiz, without using the internet to look things up:

1) What is this diagram? Explain in detail why these colors are drawn in this order.

2) Pros and cons of PageMaker vs Quark vs InDesign. Which was better when? And why? Illustrator or Freehand? MacPaint or Superpaint?

A flurry of articles are coming out about CSS Grid, and many of them are in one of my favorite formats — the how-to tutorial.

Over a decade ago, I got really stuck trying to learn CSS. Then I read Dan Cederholm’sBulletproof Web Design. In it, he showed me how to think through CSS, by walking step-by-step though specific usecases. I’m reminded of his book as I see these links float through my streams.

There are so many ways to teach and learn. These articles might be the right way for you:

I’ve been staring at a list of CSS Grid properties for the last two days. It’s been well over a year since I started learning and using Grid, but somehow I hadn’t seen a list like this before. It’s looks really intimidating.

The CSS Grid Layout Module is a massive specification, much longer than many of the others. While traveling to conferences last year, I dragged around a stack of printed specs. Most were twenty or thirty pages long. Grid seemed to be a few hundred. CSS Grid is simply much more powerful.

You don’t need to learn all 18, however. Not at first. Many of them do the same things as the others — they just provide multiple ways to write the same syntax: long-hand, short-hand, extra-short-hand, super-duper-extra-short-hand. I found it to be too much to try and learn all the variations while learning what they do. So I recommend starting with a shorter list.

Then, eventually, you can learn all the rest. And decide which level of short/long hand you prefer.

To really get started, it helps to have someone explain it to you. The raw properties can be hard to figure out. Perhaps start with this MDN Guide, Basic concepts of grid layout, then read the others. Or look at my giant list of resources to find videos and other things.

Yesterday, I wrote about CSS Grid. Ted Mazer responded by asking on Twitter: “As a beginning front end developer, is it going to be beneficial to jump right into becoming proficient at this layout style?”

I replied to him on Twitter, (spoiler alert: “yes”), but I have a better answer that’s longer than 140 characters… so, time for a quick morning blog post.

• • •

In the beginning, we webmasters used HTML for everything — including styling font colors and doing layout. HTML tables were the one tool we had, and we abused it like crazy. Dark days for code. Bright days for funky, punk rock designs.

After a while, we realized abusing HTML to do styling was horrible. Especially maintaining a site over time. It made redesigning impossible. And quickly got out of control. CSS was invented. We separated content from styling. And we web designers learned how to use floats to do layout.

Sadly, floats weren’t really a good solution. They are perfect as intended — to float a photo to the side and wrap text around it, for example. But we’ve been using floats to do the whole page layout. And that’s also giant a hack.

We forged ahead, inventing and teaching each other a few hand-coded techniques for making a handful of layouts. We iterated on those techniques, finely honing them, making them slightly better and better. Search the web for “holy grail layout”, and you’ll see the trail of evidence.

But we wanted more options for layouts. So we front-end developers started emerging with new layout patterns, and code libraries for getting each one done. These layouts were too complicated to teach people to hand-code. It was more helpful to make a framework, and pass that around. It started in 2006, with Yahoo YUI. Then came 960 Grid. And then a bunch of variations on 960 Grid. When responsive design hit the scene, a gazillion 12- and 16-column layout frameworks popped up, all handling RWD slightly differently. Then folks leveraged complex Sass formulas to make powerful toolkits… the list of layout frameworks goes on and on. There are hundreds of options.

Bootstrap is possibly the most popular such framework, offering a handful of familiar layouts to choose from. There’s the one with the hero graphic at the top, followed by the large centered paragraph, and the three columns of icons — you’ve seen the results of this everywhere. We are completely bored with what happens when the whole industry reaches for the same two or three templates.

Get ready for all of that to go away. It’s time to go back to hand-coding layouts for each project. Of course, make reusable code for yourself and your company. Of course, create style guides and limit code chaos. Of course, use a starter-kit of some kind so you aren’t beginning each project staring at a blank page. But it’s time to stop assuming your page layout design process looks like this: 1) Pick a third-party framework; 2) Pick one of the layouts that comes with that framework; 3) Limit all your ideas to what that framework can do.

We don’t need that crutch anymore.

I know a lot of people will think the “best” way to use CSS Grid will be to download the new version of Bootstrap (version 5! now with Grid!), or to use any one of a number of CSS Grid layout frameworks that people are inevitably going to make later this year (despite Rachel Andrew and I begging everyone not to). But I don’t. The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.

I’m tired of every website looking the same. I believe in the power of graphic design to elevate a project. To make it stand out. To give it a unique voice, to help its readers / users / viewers understand what is happening. I don’t want to paint-by-numbers, I want to paint.

It’s time to design layouts like we design everything else — typography, color — unique to each project.

How will this be possible? Because now, finally, we have real tools for layout. CSS properties that were created to do layout. CSS Grid, Flexbox, Alignment, Writing Modes, Multicolumn, along with, yes, Floats, Positioning, Inline Block, Display Table — just to name a few.

People sometime ask “which one is the best one?”, as if we will pick only one CSS property to create a layout, as if it’s similar to picking only one framework. You don’t use Suzy and Bootstrap — why would you use Flexbox and Grid? Well — that is exactly what’ll do. You will use a combination of all of these properties on every project. You’ll code this part with Grid, this part with Flexbox. Over here, a simple Float will do the trick. Over there a Grid nested inside a second Grid will get it done. All the while thinking through what happens in the browsers that don’t support Grid yet, creating elegant fallbacks by using Feature Queries.

The challenge is to learn all of these tools. Not only do we need to learn the new ones, like Grid, but most of us have to go back and learn the old ones. We’ve been using frameworks so much, we are rusty now when it comes to knowing how to use a float. Plus `box-sizing: border-box` changed everything, and made a lot of the old problems go away when we weren’t looking. (If you don’t know what that is, start there.)

It’s not just front-end developers who have a lot to learn — designers do, too. Most of the current design practices assume the page layout is already set. We’ll just pick from these handful of templates. Those designers who are more innovative, it’s likely you’ve been told over and “we can’t do that on the web”, and you’ve listened. Now we don’t even remember the graphic design ideas we use to have. We stopped being creative. We submitted to the constraints of the float.

Now designers can open their minds to a world of possibilities. There are a lot of new ones. And there are new constraints. Not everything is possible. We need to explore CSS Grid until we understand what it wants to do, what it can be forced into doing, and what it refuses to do. Many designers may not ever learn to code CSS, but you need to understand CSS well enough to understand our artistic medium.

Many of us are newer to this industry, and were not around when layouts were hand-coded. Many people have only ever used a framework. It will be hardest for you to change your thinking. Developers will need to invest some time to learn how to use CSS to do layouts, and to undo all the habits from frameworks.

In many ways, perhaps it’s the people who are brand new to the industry who have the most potential. You might think, “well, I know nothing! I have to learn it all at once!” Yes, you do. And, actually, so do most of us. You at least don’t have to unlearn anything.

If I were a scrappy young designer or front-end developer, I would jump all over this layout stuff and learn it as fast as I could. I expect that later this year and throughout 2018 there will be a lot of demand for people who know how to hand-code a layout. Those folks who can imagine an innovative page design and make it happen — you will have a lot of control over the future of your career. You’ll stand out. You’ll get work. You’ll be able to be picky about where you work, and raise your rates.

How do you learn all this? Where do you start? Well, read my post about Learning Grid, and especially take a look at Rachel Andrew’s CSS Workshop, where she goes through everything CSS for layout. Most of all, start coding demos. Play. Experiment. Learn by doing.

We stopped taking risks at some point. Everything online seems so polished and perfect. The frameworks do make a new project look snazzy right away. All that polish, all those rounded-corner images. But we’ve got to break away from that, if we want to make great work, great designs. If we can dare to make mistakes, and learn to play and experiment again, we can push this industry to a whole new level, and truly start to understand the web as a graphic design medium.

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:

Rachel also put together a polished course on all the CSS you need to know to hand-code layout: https://thecssworkshop.com It comes in two parts. You can buy access to Part 1, Part 2 (which includes Grid), or both. (If you are able, paying to access these videos is a great way to support all this work Rachel is doing for free. Also, you’ll fill in any gaps in your overall knowledge of layout. I certainly did. There was a bunch of stuff I didn’t know, and I didn’t know I didn’t know it.)

And as always, MDN has a detailed technical documentation on everything you want to know about CSS Grid including a well-written guide to the basic concepts. How’d we put together such a comprehensive expert set of documents? We hired Rachel to write them.

Be sure to try out the Grid Inspector Tool that is baked into Firefox. It’s very hard to code a Grid layout without being able to see your lines. My colleagues at Mozilla and I are aiming to give you a tool that makes it easy to develop and design Grid Layouts in the browser. Many more features have been planned, and will appear over next the year. Contact me with any ideas, requests, comments on how the tool is working out for you. Such feedback — praise and critique — helps tremendously in wrangling resources to take things to the next level.

Want a quick way to start messing with CSS Grid right now, without having to find a place to write code? Try CSS Grid Playground

There will be much more coming from Rachel, Jing and me this year.

I am starting to see a bunch of simple introductions, link-baity false-narratives, and weirdly-wrong ideas to creep into the conversation about CSS Grid. They are not as helpful. Frequently they are actually wrong. Let’s please share the best work with each other — not exclusively work done by men because it seems more respectable / more authoritative / more bro-awesome! And especially, let’s not pass around the work published by people who simply copied Rachel’s work, badly, with mistakes. In 2017, I have no more patience for these shenanigans. So far, most of the people I’ve seen learning, teaching and evangelizing CSS Grid are women. If suddenly we all “disappear”, and a bunch of men get all the attention, my head might explode.

If you see any new resources that are good, do let me know! I want to feature the most helpful work out there. Once you start learning CSS Grid, share what you’ve discovered. Explain things in a new way that feels helpful. Make demos unlike anything we’ve seen before. Credit the sources that taught and inspired you. Reference the larger conversation. There is a lot to learn. A lot for us to discover. A lot to invent. This truly is a revolution in graphic design on the web. There’s no time, and no reason to be all jockeying for the same worn-out boring territory, trying to make the people — the women — who got there first invisible.

There are all kinds of ideas I’ve had once about a design treatment I would have liked to do in CSS. Only CSS couldn’t do it — at the time. And so I took those ideas and stuck them into a bucket labeled “Nope”.

Only CSS evolved. And now it does a lot of those things. And I need to rummage through that bucket and see what I can pull out, and use.

This CSS isn’t fully-baked or fully-supported. In fact, the specification is being revised, the property names might change, and the details of how browsers render this today are messy and inconsistent. But it’s still really cool to see. And if you are on the more adventurous side, you might want to use this on a project — especially if the text is big, and the colors & font are chosen so that it works with and without support / works even in browsers where the rendering is messy.

This morning on Twitter, Shane Hudson asked if it were possible to do a kind of Monopoly board layout using CSS Grid. He’d tried in the past, but had gotten stuck.

I love questions like these, because they get to the heart of what I think really matters as we learn CSS Grid — understanding what brand new things are possible, and what’s still actually not. A year ago I wouldn’t have known the answer to this question — how can we make a Monopoly board layout? Can we? Would it be responsive? Do I need to write out all the code to tell each item to be in each particular place? Or can I rely on the autoplacement algorithm to place items? How flexible would it be if the content changes (to say, use this kind of layout for a list of articles (and not for Monopoly). I didn’t answer all of those questions for Shane, but I did quickly put together a demo.

Hello, from a coffee shop on the road. I’m in Seattle for a CSS Working Group meeting, where we are nerding out on the details of coming-soon CSS properties. Being in Seattle makes me think of An Event Apart, since it was AEA who first brought me to this beautiful town in 2013. In April, I’ll be back here for AEA Seattle 2017.

I love An Event Apart. If I could get in a time machine, I would go back to 2005 and tell myself to attend the first one, in Philadelphia. I lived there at the time and easily could have gone, but I didn’t know about it. It must have been a few months later when I first heard of AEA. I desperately wanted to go. I just didn’t. Year after year, I decided not to attend. First living on a grad school fellowship income, and then struggling as a web designer who was charging clients only what they could afford (and not what I could afford), I watched AEA from afar. I knew I could probably scrape together the money, but I wasn’t sure it’d be worth it. It seemed like a lot to spend on just a few days.

I now wonder how my life might have been different – better – if I had gotten to know the community that surrounds AEA sooner. I was well into my 40s before I figured out how important personal relationships, face-to-face networking, and community are to shaping your trajectory. It’s only looking back that I can see that yes, the investment of paying to go to AEA would have been worth it. I feel like if I had, opportunities to work on some amazing projects would have come my way.

Meanwhile, I did attend and speak at many conferences. I was part of the Videoblogging community. I went to one DrupalCon after another, lots of WordCamps and DrupalCamps, too. I made websites because I believed they’d be powerful tools for clients I cared about. I believed in accessibility, HTML semantics, web standards, great design, putting users first, diversity, and having empathy for everyday people. I used open source software because it was free, and it put powerful content publishing tools in hands of organizations with tiny budgets. I expected everyone was involved with the web for similar reasons — to empower others.

It was painful when the Drupal community started rejecting me, first in NYC and later internationally. I was too opinionated of a woman, too much of a designer, and I just didn’t fit into their flavor of nerd. I considered leaving the tech industry completely. Why should I work so hard to try to fit in with people who don’t really want me around? Why pour so much energy into convincing arrogant developers they shouldn’t use tables for layouts — in 2009!? Or that design is important. Or that other humans don’t experience the world the same way as they do, and we should be making decisions based on what our audience needs, not what you personally prefer. Such battles are exhausting. And when you are one of a tiny minority saying such things, you quickly become “the problem”.

Then I crashed AEA Boston. Well sort of. I didn’t go into any of the conference sessions because I hadn’t bought a ticket. (I respected the organizers too much, and the attendees who had stretched their last dollar to be there.) I took the cheap bus up to Boston, and stayed in the conference hotel, on a cot in the room of friends who were attending. And I did the “hallway track”. I came down for coffee breaks and chatted with folks (without eating anything — again, no stealing). I went to dinner with those same friends, and met more people. And it changed my life. It changed the course of my career. Not because it led to speaking at AEA — no, that came much later through other channels. Being around the attendees of AEA changed my career because I realized I didn’t have to struggle so much. I didn’t have to fight with people who didn’t want me around in order to have a career in this field. I just needed to slide over a bit, and find people who see the tech industry like I do. These were smart, friendly people, the kind of people with whom I could easily collaborate. An Event Apart reminded me of what I believed, and showed me a lot of other people did, too. It told me I’m not crazy.

Within the year I stopped going to Drupal events, stopped working for Drupal shops, and refocused my own public speaking on Design, HTML&CSS. I had a better sense of what kind of clients to find, and who to avoid. A year and a half later I was speaking at AEA. Three years later, my whole professional world looked different.

I’ve now presented at An Event Apart twenty times. It’s an honor to be there. I feel just at home now as I did the first time. The crew running the show works incredibly hard to make sure all the speakers have everything we need. They challenge and inspire everyone to do the very best job we can. I speak at a lot of events these days, all around the globe. There’s still something very special about An Event Apart, and the high level of the craft that goes into putting together each show. Something special about the level of passion Jeffrey and Eric have for the web and why we make websites.

I’d love to see you there. We can have lunch. You can share with me what you are passionate about. We can talk about design, and what’s next, and why we still like being part of this crazy industry. Because I am still here. And I have AEA to thank for that.

Safari runs on Webkit. Chrome runs on Blink. And Firefox runs on Gecko. Which is old. Like really old. I think it’s the oldest rendering engine still in wide use.

Of course, after two decades of experience, we now have Mor Better Ideas™ about how to make a browser rendering engine (and software in general). So for the past several years, Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open.

The project is called Servo. It was started as an experiment. It’s coded in a new programming language called Rust. (Gecko is written in C++.) And it’s open source. You can totally help us make it.

So what does this mean for Firefox? Well, first, I’m talking about the rendering engine here, not the whole browser. (The rendering engine is the part of the browser that parses and displays each webpage. Which is separate from stuff like tools for managing bookmarks, the URL/search bar, and the menus of Firefoxy things.) If we could snap a finger and magically replace Gecko all at once, normal people would have no idea it’d happened — well, except for the fact websites would load insanely fast. Insanely. Fast. Because Mor Better Ideas™.

The trick of the thing comes with figuring out how to switch from the old rendering engine to a new one. You can’t just do it all at once. It’s like figuring out how to replace a jet engine on a jet that’s still flying. I guess we could land the plane, let all the passengers disembark so they can wander over and take other planes, and not provide any service for a while while we change the engines out… but no — no, we can’t do that. Not gonna happen.

We could keep flying the current plane, while starting from scratch and building an entirely new plane on the ground — special ordering every nut, every bolt, designing a new cockpit, and waiting many years before we to get to fly that plane. But we don’t want to do that either. We already have a giant plane. And it’s a pretty good plane. We should keep using it. We just want a new engine on that plane. As soon as we can get it.

Enter Quantum, the codename for the project to figure out how to replace the engine on our still-flying plane. One piece of it is called Quantum Style(aka, Stylo) — that’s where we transition from having Gecko render all the CSS, to using Quantum for CSS. Quantum Style morphs Gecko and Servo together, asking each to do the job they do best. Because, actually, even though it’s been around for 20 years, Gecko does some pretty amazing things, and we want to keep leveraging The Good Parts. New isn’t always better.

At some point in mid-2017, all new CSS will be built with Quantum plane parts, not Gecko. Going forward, it will be much easier and more enjoyable to implement new CSS properties. Which makes it easier for folks in the open source community to contribute. Which makes new things come out faster.

This next year should be a good one for Firefox. If you haven’t tried it in a while, do. After refocusing in 2015 and laying groundwork in 2016, Mozilla has setup Firefox to impress over the course of 2017.

If you follow my work, then you know I’ve been encouraging designers to break up our old stale layouts for years now.

Box. Box. Box.

We can stop using rectangular boxes for everything. We’ve got several things in our CSS toolkit to get away from the rectangles. CSS Shapes. Clip-path. Transform. Masks. But how do these work exactly? What’s possible and what’s kinda still not?

It’s a pretty-great walk-through of the options in CSS for creating a big diagonal line across the page. He does point out that the best solution is unworkable because Firefox doesn’t yet support basic shapes for clip-path — you have to use an SVG. (Which he then explains how to do).

The @moz-document is a cheat to prevent the rule from being applied in other browsers.

The trouble with this is that once Firefox ships support for shapes in clip-path, this code will be a problem. Rather than targeting Firefox, it’s better to target the feature, or lack of support for that feature, using a Feature Query.

Current status: Using my substandard lady brain to write an article for you about the most complex CSS module of them all, the CSS Writing Modes Module Level 3. Too bad for you I’m the only one around here who can explain this. Wait — I mean, I’m sorry that my presence is taking up a spot that should be going to by a guy who’s smarter and better than me. I feel sad for him. He should write this article for you instead.

Only, I don’t know of any white men who understand this spec. I’m sure there are some, since all the white men who invented the web didn’t bias the entire thing toward English, and only support Latin-based languages. No, not at all. The web is only 25 years old. Of course it didn’t take until late 2015 to have full support in CSS for languages that flow in different directions. No. You had this from the beginning. You are fully qualified to be the authority here. Go for it. It really is the white men who deserve to get a spot on stage to talk about this first. Sorry that I did an hour long talk about it last November, and will again all next year. Sorry it wasn’t a white dude first, even though the only other people that I know who understand this stuff are people of color — most of whom live in Asia and speak fluent Chinese or Japanese. So. Sorry to the white men who’s rightful spot we’ve taken away. We are thinking of you and offering you our sadness. We grieve for your loss of the right to be seen and heard.

And I apologize to those of you reading this that you are stuck with my lady brain writing this article for you. I know you would rather hear from another white man. Truly, you would. I know. I look at the Twitter follow counts across the industry, where a woman around a certain place in her career will have 10–25k followers, and a white man at about the same place in his career will have 50–150k. We know who you listen to more. So I’m sorry. So sorry I can’t be that trusted white man for you. I know you would rather have him.

I didn’t write anything yesterday, election day here in the U.S., because I didn’t want to write about politics. I wanted the day to go by, and to return to talking about graphic design and layout CSS on Wednesday, today, the day after.

Instead, I’m stunned. Overwhelmed. We just elected a hateful man. Who will bring us a terrible, terrible future. I couldn’t walk through my neighborhood without crying this morning. How do I look friends in the face, knowing they could be snatched from their beds one night next year and dragged away to a country they don’t know anymore. It seems crazy to care about CSS right now.

I quit Twitter today — at least for the week. I’m sure I’ll return eventually and use it as a announce things again, but I’m not sure whether I’ll ever return to Twitter as my main space to have conversations. It’s time we stop relying on one central location that we don’t control. And today, it seems especially fruitless and hollow to shout into a void full of trolls. So I’m here again. Writing.

I have a vague sense I want to post here everyday. So here’s the second day. This site is very raggedy and needs a lot of work. I’m just doing it as I can, bit by bit. Today I added all the events I’ve already booked for 2017.

Meanwhile, I’m making another demo of CSS Grid and writing an article about it. Here’s a peek:

I won’t publish it for a while. Today feels like September 12th, 2001. How can we do anything publicly but grieve and fear? And reconsider what’s important in life. What kind of world we want to build. How we want to use these powerful technologies with more care, more morality.

Feel free to comment below. We can have a conversation here. You can link your your website, your blog posts. And I’ll go read them. The formats of comments are awful right now. I’ll fix that soon. One step at a time. One breath at a time. One meal at a time. One sleep at a time. If we can sleep.

We would really rather have a rapist for our leader than a woman? Of course there are thousands of ways to understand what just happened — but this is one of the loudest ones in my head today. We would rather put a man who’s repeatedly raped young teenagers in charge than dare to have a woman President. That’s how much our culture hates women.

Oh, and the planet is done. We have no chance of slowing climate change now. It’s over. If we didn’t have a loud clock ticking, we could go through a round of fascism and economic depression, camps and killing, and come out the other side. Eventually people want peace. Eventually people realize love and tolerance make for a better life for everyone. But never before have we had the very health of the planet at stake. This time will will miss our very last window to stop burning fossil fuels, to slow the melting of the ice, to save some natural habitat. Maybe it wasn’t possible anyway, but we were all set to try. Now we aren’t going to try. Now we are simply and completely fucked.

I passed a friend this morning in the street, and she said simply “Where are you going to go?” I replied, “There is no where to go.”

I couldn’t walk past toddlers this morning without apologizing with every cell in my body — I’m so so so sorry. Your life, you… you will be fucked. We just destroyed your planet. I’ll hopefully be dead before it gets really bad. You won’t.

I don’t have anything profound to say. And that is the point. I haven’t been writing, haven’t been publishing. And I should. I want to. It’s funny how by not doing it I turn it into something precious. The pressure to write builds up into this thing where in order to write I have to come up with something REALLYGOOD. Something really good to beat the silence. To make the silence worth the wait. Or something.

Stop.

I’m just tired. Busy. Until last Thursday I was traveling like mad, presenting at conferences. Now I’m home for a while. Well, for a month. Which seems like forever. I haven’t been home for four weeks in a row since February. Now it’s November.

So I have nothing much to say in this post. Or more honestly, I have so freaking much to say, I don’t know where to start. So I’m going to start here. I just need to break the silence. And get into a habit of posting. So I’m posting this. And I’m going to publish it without thinking about it. Without proof-reading it really. Without thinking about how it will be received.

This is how so many people used to blog. Before Twitter. Before follower counts. Before we wanted or worried about massive audiences. We were few in number, talking to each other. Having simple conversations.

Now everything seems so complicated. So IMPORTANT. Or not, and therefore, not worthy.

I worry about Twitter. The company doesn’t care about things I care about. It will do whatever it needs to for the money it wants. It might go away. It might get even worse. By outsourcing our whole means of connecting to each other to a company we seem to agree we hate… we are putting our relationships at risk. So I’m determined to at least start getting away from the monopoly of Twitter by posting to my website. A lot. I’ll setup RSS (or double check that it’s already been setup, or setup multiple options or whatever something better) and I’ll try for the dozen-teenth time to get the CMS that runs this site to connect to Twitter and crosspost in some way. But… all of that is a delay. An excuse to not write until all is perfect. Forget that. I’m posting this. Resetting expectations. Building a habit.

Do we dare to write on our own sites again? Do we dare to not be polished or perfect? Do we dare to ramble for tiny audiences who might not care? I hope that I can dare to do just that. Starting here.

Challenge your assumptions, break out of old habits and discover what’s newly possible with layout on the web.

When the web was first invented, there was no technology for page layout. Every background was grey. Every page was a single column of text, filling the whole space from side to side. Over the years, we’ve created one hack after another to tackle page layout.

The hacks have become far less messy, but everything we do today is still a hack. To hand-code a page layout, you must master the art of clearing floats, using negative margins to rearrange order, and dodging browser quirks. It’s painful. Many of us have given up and instead use a third-party framework; Bootstrap, Foundation, or one of their many competitors let us outsource the pain.

We’ve shipped a lot of work using layout frameworks. We’ve been more efficient and suffered through fewer bugs. But now every website feels the same. Every website reaches for an identical 12-column symmetrical grid. Every site uses the same shapes and patterns over and over. And we are totally bored.

A new era

But there’s good news. Finally, we are getting real tools for page layout. Instead of hand-coded hair-pulling or boring formulaic frameworks, we can get creative. Flexbox, CSS Shapes, Masks, Clip-path, Initial Letter, Rotation, Multicolumn, Viewport Units, Object-fit and more are already opening up a world of new possibilities.

Most profound of all, CSS Grid Layout will arrive sometime in the next year, completely changing how we approach page layout on the web. [Update: It’s here now! Arrived in March 2017.]

The question will no longer be ‘which framework should we use?’ We aren’t going to need them any more. In fact, once CSS Grid arrives, using a framework will be much less efficient than hand-coding your own layout in vanilla CSS. Third-party frameworks – even new frameworks based on Flexbox or Grid – will just get in the way.

We should start asking ourselves, what kind of page layout will best serve this project? How can we tap into a hundred years of graphic design practice to communicate through our layout?

Fighting the code will no longer be the hardest part of creating a layout. Our biggest challenge will be fighting the limitations of our imagination. We developed powerful habits over the last 10 years. We squashed our creative ideas under piles of ‘the web doesn’t work that way’ and ‘you can’t do that’. Well, things have shifted. The boundaries between possible and impossible have drastically changed. It’s time to let go of long-held habits and myths.

Myth 1: Everything must be a floating bar of soap

Any float-based web page layout is like a bathtub full of hundreds of bars of soap. Every element on the page is a rectangle, fighting to rise up to the top. The header is a bar at the top, followed by a bar of navigation, followed by a hero bar, a sidebar, a bar of content. Any time the viewport is resized and a different media query kicks in, the soap bars rearrange themselves, jostling for a position on top.

Floats don’t allow for white space. Floats encourage busy pages crammed full of crowded content. Floats require us to artificially create content of the same length or aspect ratio.

Although it still works on the basis of a grid of columns, CSS Grid has a different mental model to the layout frameworks we’ve been using. One of the biggest changes: it has rows. Rows! These allow us to line things up horizontally, but also let us distribute vertical space. Rows let us create white space. Our default will no longer be everything crammed up against the top of the page.

There are ideas from a century of magazine design that become possible when we have the ability to control the space vertically. I’ve been collecting books on grid and layout design. In one of them, I saw a poster for the Lincoln Center’s 2007 Jazz Festival and wondered if the design could be accomplished as a web page. Here’s the result.

CSS Grid lets us place things in vertical space, instead of cramming everything against the top of the page.

Myth 2: Rectangles; only rectangles

By default, everything on a web page starts life as a rectangle. The tools we’ve been using keep it that way – we line up one box after another. Box. Box. Box.

Now we have tools to help us break up the boxes. You can use Clip-path, Masks or Gradients to cut a box into a different shape. Triangles, diamonds, trapezoids – content can be cut into all sorts of silhouettes. Create a headline with a bold background colour, and slice across the bottom of that box with a diagonal line. Take a series of bio photos and cut them all into hexagons.

CSS Shapes lets you float an element to one side, and flow the content that follows in a shape that’s not a rectangle. Float a photo that’s been cut into a circle with border-radius , and then flow the accompanying text in a circular shape around the photo using shape-outside .

Or create a complex illustration with lots of odd shapes, and use that image as a mask to get the browser to flow text around the shapes in the illustration. In Figure 2, a photo of grapes is floated left, while the text flows around a polygon.

With Rotation you can escape the perfection of everything being square to the page. Tip a headline a bit askew. Tilt a photo to give it some character. Put the credit for a photo sideways along the edge.

The photo is floated left, while the text flows around it in a non-rectangular shape.

Myth 3: We can’t control the fold

On the web, we have no control over where the bottom edge of the screen cuts off the layout. We pretended for a while that all screens were 1024x768 pixels (or 800x600), but in reality we’ve never controlled the bottom edge of the screen. Despite meeting after meeting where people insisted their special snowflake must appear ‘above the fold’ , we haven’t had any way to know where ‘the fold’ is. Until now.

With viewport units, we can size or place items in relation to the viewport.

If we want to style an item so it’s a certain proportion of the viewport, we can. img {height: 50vh; width: 50vw} will size an image so it fills exactly half the viewport in each direction.

In the past, defining both a height and a width for an image was a terrible idea. The image would end up being squished. But now, object-fit: cover tells the browser to maintain the aspect ratio of the image, and crop it to fit the defined box.

Figure 3 shows an example. No matter the size of the browser window, the photo of Grace Hopper is always half the width and all of the height. Start scrolling and the article appears just ‘below the fold’. This layout is accomplished with Viewport Units and Flexbox.

No matter the size of the window, the photo is half-width and full-height

Myth 4: 12 columns is best

It was in 2006 that the industry started advocating for the use of a 12-column symmetrical grid. We didn’t intend to become prescriptive, we just wanted simpler maths for hand-coding our fixed-width websites.

960 pixels fitted nicely inside a 1024px-wide screen and allowed us to create column units of 60px with gutters of 20px. Plus, having 12 columns meant we could easily break the space in half, thirds or quarters.

Starting new projects with a Visio template made UX design seem more legitimate. It was easier to impose a standard on a team when you could point to a popular website and say ‘everyone is using this tool, we should do this’. We needed to tame the chaos. But after 10 years of almost every site using the same grid, web design has become incredibly boring.

The 12-column symmetrical grid conveys a feeling of stability and sturdiness, and we use it without asking if that’s really the feeling we want to convey. We’ve learned to art-direct through our choice of typefaces, but not yet through our layouts.

With responsive web design there is no reason to maintain mathematical ratios based on a 960 grid. For years, Mark Boulton has been advocating the idea of using odd numbers of columns, like nine or 11, and trying out grids where the columns are not all the same size, but instead are based on a ratio like the golden ratio.

Such grids are the staple of great graphic design in print. Creating custom grids would allow us to convey so much more about each project through its design, but somehow these ideas have not taken off.

Why not? I think it’s because the maths is too hard when the underlying technology is the float. The team at Mark Boulton Design created an app called Gridset to make such design work easier, and the Sass community has built one library after another to abstract away the maths of complex grids, but either way it all still feels too tricky and fragile.

CSS Grid will make designing custom grids trivial. It will be just as easy to create 11 columns as it is 12. It will be a piece of cake to create a ratio-based array. The browser will handle most of the maths, we just have to get creative with what we want to do.

There’s no reason to keep to 12 columns. Do something new and give your site a fresh look. We’ve got decades of graphic design practice to guide us.

A brief look at how layouts have evolved; we are at the beginning of a new era in web design

Myth 5: We have to use a layout framework

Actually, writing CSS using the new Grid syntax will be easier than applying a framework, and updating old-style frameworks with CSS Grid will only make life harder. Get out of the habit of reaching for a framework. Write your own vanilla CSS.

Myth 6: We are stuck in a rut because of RWD

I don’t believe that for a minute. It was hard for the industry to wrap its head around responsive web design, so we leaned on tools to help us relaunch our sites quickly. But there’s nothing inherent to RWD that requires we all use the same half-dozen layout patterns.

We can create anything we want with CSS, and change it to whatever we want to at any breakpoint. Stop using cookie-cutter tools and you won’t have cookie-cutter results.

Here’s a taste of the surprising waiting in CSS Grid: it can rearrange the order of the content to make it fit the available space using the grid-auto-flow: dense; property. Figure 4 shows the result.

Apply grid-auto-flow: dense and the browser rearranges the order of content to make it fit

Letting go

If you can let go of these myths, your work will stand out. You can make a splash and have a strong impact. Take advantage while the opportunity is still new. Start playing with these properties and see what’s possible.

layout.land will become home to a community of designers trying out different layouts

I sat down tonight to get a handle on just how much I’ve been doing this year. Invitations for next year’s conferences are starting to come in, and I wanted to get some metrics from this year to assess what’s reasonable for next year.

Ok. That is way too much. It’s hard not to be home. I love presenting, and want to be at ALLTHECONFERENCES, but I can’t travel that much next year. I’d like to be on the road 20-30% of the time, not 50%.

If you are interested in having me at your conference, especially to do an all-day workshop, please contact me soon. Otherwise it will likely be too late.

I can see a conflict coming. And either Sass will loose, or named lines in CSS Grid will loose. You’re going to be forced to choose between the two — unless we can find some C/C++ programmers to help make the next version of LibSass.

What am I talking about?

CSS Grid is coming, and it’s awesome. You might not have had a chance to wrap your head around it’s power, but wow, it’s amazing. And powerfully complex. One thing it let’s you do is name areas and lines. And place items into grid cells by referencing those names. But here’s the thing, it uses some syntax that’s new to CSS. Line names introduce square brackets. Like this: grid-template-rows: [start] 1fr [mid] 1fr [end];.

And the thing is, Sass hates those brackets. It chokes on them. It refuses to parse a file that has brackets in it.

But there are two versions of Sass, written in two different programming languages. Ruby Sass runs in Ruby. And it’s slow. LibSass is much faster, since it’s closer to the metal. There’s a good chance you are actually using LibSass without paying attention to which one you installed.

The thing is, LibSass is written in C/C++, and the number of engineers who are excited about both C/C++ and CSS is, well, small.

__
Footnote:
Now before anyone *splains me to say you can unquote the brackets to force Sass to allow them, I’ll say, yes, I already know that.

foo { // wait this is not it
bar: unquote("[foo] 1 [bar] 2");
}

You know what — it’s a horrible pain in the ass. Combine that with the complexity of Grid and the steep learning curve of learning Grid, and forget it. Not going to happen.

There are people in the CSS Working Group who want to get rid of the commas in the new color function, because to them, it feels more consistent with the rest of CSS. They know it’s inconsistent with the other color values, but think those other color values are dumb — and never should have been created with commas. They want to fix that now by making the new thing not have commas.

Then there are other people who think it will be very confusing to have some color values use commas (like rgb() and hsl()) while the new color() function doesn’t. Like many things in CSS, perhaps we would do it differently if we were starting from scratch now, but once something is shipped, we need to stick to it. Values for specifying colors have commas, the new one should be the same.

Some folks are proposing that the new function not have commas, while the old functions (rgb and hsl) get new rules — where you could use commas (which we have to do to support older websites) but you could instead “switch” and no longer use commas. You’d be required to be comma-less for color(), while using commas or not — your choice — for rgb() and hsl().

Some folks think, ok, this comma-optional idea has merit. Let’s make this so the people who don’t want to use commas can write new code across all our color functions (color, rgb, rgba, hsl, hsla) without commas. But let’s also allow commas in the new color() function so that people who are used to commas don’t have to change their practice, and they can do what they would expect, and use commas in the new thing. Basically, make commas optional everywhere.

Then there are people who think, OMG, we are going to make this overly complex and crazy-making by allowing commas but not requiring them. Let’s just keep things simple. We’ve already started out with commas in color functions. Just keep it that way. color() should use commas so that the new thing is consistent with the older things. Maybe it’s not “pure” when thinking about code syntax across all of CSS, but it’s easier for people who write CSS, and that’s important.

Best of all, Rachel has made a video series for learning All the CSS for Layout, from floats to display:table, from Flexbox to Grid: The CSS Workshop. It’s a high-quality course that costs money to access. Meaning she gets paid, and you get an efficient way to really go deep with this stuff. It’s totally worth it, if you can afford the $200 for the whole course.

A Flexbox Game at Webflow. Instead of writing code, you use the Webflow tool interface to apply style to elements. It’ll focus you more on the mental model for what’s possible, and take you into more complex possibilities than some of these other games.

Flexy Boxes — not really a game, but a way to manipulate the code quickly to see what happens.

Flexbox introduced a lot of new CSS lingo. Justify-content? Space-between? Align-self? It can get confusing fast. But to use Flexbox — to really use it — you need to memorize all these words. You need to know them cold.

And guess what? All of this terminology isn’t just useful for Flexbox. It’s part of CSS Grid spec, too. In fact, it’s becoming so important, the CSS Working Group pulled this part of the spec out of Flexbox and put it into it’s own new spec: The CSS Box Alignment Module. Eventually these properties will work in block containers and multicol containers.

The time you spend studying and memorizing this new terminology will pay off. It’s time to pretend you are back in school. Flashcards anyone?

Or… maybe not. There are some fun games popping up that will drill the concepts into your fingers. Here are two:

If you’ve seen me present on stage anytime in the last three years, then you’ve seen me get excited about CSS Shapes. Clip-paths are also awesome. Both require (if you want to make a anything besides a circle or ellipse) some strange polygon math. I’ve been tossing random numbers at my CSS, hunting and pecking my way into what I want.

Six years ago, I created a new theme for Drupal 7 to be the new default face of Drupal. I’d been experiencing some problems with sexism and hate in the Drupal community, and I wanted to take a stand when I named the theme. My goal was to replace the Garland theme, named after Judy Garland. So I chose to name it Bartik, after one of the ENIAC programmers.

Six people programmed the world’s first electronic digital computer, and they had to invent programming in order to do it. They were all women. In fact, women did all the early software programming; it was only later that men took over the industry.

I wasn’t sure which of the six women to choose, and I wasn’t sure whether I should use her maiden name — the name she’d use during the years she programmed the ENIAC — or choose her married name, the one she’d have used throughout the rest of her career. But best I could tell, the team was led by Betty Jean Jennings, known for most of her years as Jean Bartik. So Bartik it was.

I originally wrote this essay on an earlier version of jensimmons.com. I wanted to redo the website, but I also wanted to start writing before I’d have time to build a new site. Turns out, I didn’t. This was the last post I made on the earlier site. This new site is built on a fresh new database, and I wiped out the old database. But I thought I’d move this one essay over.

I have so many blog posts I want to write. I’ve been waiting forever to get started. I’ve been waiting for the time to be right. To be ready. Really ready. To be done with this other project, first. Oh and that other thing. And these other 57 million things.

Plus my website looks horrible. The layout is incredibly boring. How can I travel the country, inspiring people to change up their boring layouts, while my layout is the most boring of all? I better to not post anything, ever, and not have anyone go to my website and see how bad it is. And worse, never mind how it looks — the content is a mess! What in the world is going on on these pages? The home page? The speaking page? The site is full of weird rambly lists that sort of have good content, but mostly are repetitive and weird. Can’t Jen do way better than that? I thought she was a great web designer. I aspired to be like her. Clearly, I was wrong. She sucks. This is useless.

Yeah. That.

So my plan is wait until I totally redo my website before I post anything. That’s a great plan. Such a good plan, it’s been my plan for the last two years. No, five years. No, longer. Which is why I’m not publishing anything.

But isn’t it weird that I’m starting now? Why now? Why not 12 years ago? Ten to fifteen years ago is when all the cool kids started blogging. I missed the boat. I should have started 5 years ago. I could have written about responsive web design when it was new. Or HTML5, when people were looking for information. I could have written so many things. I missed them all. So why start now? Isn’t that awkward and stupid and weird? Just out of the blue? In August 2015? Just because I say so? Haven’t I said all this before?

Well. Plus. I mean. I secretly think I have to potential to be a great writer with a lot to say. To have a voice. To have an audience. To accomplish something. But if I actually start to attempt to make such a possibility real, and then it turns out none of this is true — and I suck, my ideas are flimsy, and no one cares or worse you hate me for it and harass me — then what? Then what will my Big Grand Scheme of How Awesome My Future Life Will Be Just As Soon As I Get It Together? What will I have left to imagine about my fabulous future? I’d rather have a plan for my amazing future then have a memory of a train wreck in my past.

Ugh.

Yeah, it’s time for that era to be over. Seems like I’ve… well, I finally have gotten it together to an extent. Not in a way that was pre-planned, but I have removed one obstacle after another until there’s not much left. There is really no reason to not be writing. In fact, now I’ve done gone setup my life so I have to write. It’s my job to blog.

“Write like no one is reading.”

You aren’t reading this anyway, are you?

“Write like no one is reading.”

This is something Zeldman is saying on stage at An Event Apart this year. Well, I’m going to take the advice.

I have a lot to say. A lot. It’s busting out of me. And I’m ready to let it.