Flexbox: Tables of the Future?

This post was originally written for my work engineering blog. Check us out and see some interesting articles from my coworkers at goats.scripted.com.

The greatest CSS gif of all time

What is flexbox?

Most websites design around grid systems. A long, long time ago, in Internet years, this was done using frames and actual table grids. Then we all moved on to floats and percentage widths. The Holy Grail layout was often a mess of different solutions. Flexbox is a CSS layout mode that gives you complete control over the components you put in your grid, allowing you to keep sizing organized both inside and outside the box, as well as providing a unified layout styling no matter what screen size you view the components on.

How we use flexbox at Scripted

Flexbox is used at Scripted in a number of locations. Most of our marketplace pages are large grids of cards, and each card is itself a grid. In order to accommodate lots of information about each blog idea, we need to be able to keep sizing consistent with inconsistent data. Our CSS is compiled so we are able to make mixins for flexbox that do the heavy lifting (and solve a lot of cross-browser compatibility issues) for us on the fly.

Flexbox in actionFlexbox in action

On the page above, for example, each card uses our standard flex layout. We added the option of a column direction, meaning information should flow down the page, and each component in an individual card should stack. For the overall grid layout of an unknown number of cards, we use the standard with an additional wrap option so cards flow to new lines when we run out of space (versus trying to crowd them onto a single line).

Why not flexbox?

Unfortunately, like with most newer web standards, support and implementation haven’t had time to unify. For example, Internet Explorer — because it’s always the example with new designs — implemented an outdated flexbox interpretation in older versions. Even with current flexbox standards, different browsers render flexbox styles differently.

Other concerns, especially for sites trying to use flexbox for their overall layout, is the speed of rendering. While it’s a few years old, Ben Frain’s look at the speed of table CSS versus flexbox is a good start. Rerunning the tests now shows some better numbers for flexbox layouts.

We still use table layouts for assets that we want to just work; some of our feature charts are examples of this.

Other resources

While it still has some quirks, depending on your project and your commitment to polyfills, flexbox is a powerful tool to build some really nice layouts. To get started building your own, Sketching with CSS has the ultimate flexbox cheat sheet. And of course, Mozilla Developer Network has a full rundown of flexbox layouts and links to many tutorials.

A Canvas

If you’ve tuned in for my regular poetic ramblings on life and web development for the past few days what you probably saw was a site in a bit of a mess. Instead of designing my own WordPress theme I had the zany notion that it would be quicker just to pick a theme and change some things. So instead of writing my own code I spent two days trying on themes like a teenage girl tries on prom dresses – none of them was just quite right. I eventually settled and looked for something that was responsive (meaning I could view it on my computer or my iPhone with ease) and whose structure and CSS was clean and easy to navigate. I settled on Tiny Forge. It was pretty right out of the box and I just tweaked some colors, threw up my own header image and added some of my widgets to the sidebar.

I have a feeling as I get busier I’ll have even less desire to mess with my personal projects, but currently the need make this site pretty is as strong as it was when I started creating websites, which is pretty cool because I never thought I’d get back there.

When I first became enamored with websites and building my own I, well, I sucked at it obviously. This was back in junior high when I was a part of the weird subculture of Petz (I link to the Wikipedia article because the current nature of Petz is sad and pathetic to those of us who started from the beginning) and had a tiny fan site all my own – long-lost to the internet. I can’t even remember what I called it and it was probably on GeoCities (RIP). I couldn’t figure out why images where all red X’s (I never actually uploaded them to the website) and those images I tried to link all had these ugly blue borders around them (oh CSS, how I came to love and despair you).

In 2004 for Christmas my parents bought me a web domain of my very own (this very one) and Leaena as a nickname and a website was born. I jumped quickly into blogs when they became a thing. From Blogger to MoveableType and back again while trying a billion others like Pivot, Textpattern, etc. Somewhere in there I tried WordPress and it stuck (sort of, I think I bounced around a bunch in between).

The problem with all of these blogs up until recently was nothing stuck. I’d write a few posts and then it would just be a static page that I would want to change the layout for once a month or so, but never actually update. So that’s what I did. I wish I had pictures of some of my old sites. I was generally always following the trends. From frames to iFrames to horizontal scrolls. From using CSS to only using Comic Sans at a very small font size (it looks cool tiny guys, promise) to learning box models and divs. All along I wondered why I didn’t actually want to post anything. There were people out there writing constantly about things! in there lives! that sounded neat! I can write, but they always say write what you know and I felt like I didn’t know much of anything.

Then all of this happened, I decided computer science was my way of life, I realized that I enjoyed reading other people writing about their coding and geeky lives, and I realized I could have that life and tell other people about it too. So here’s to the new leaena.com. I’m sure I will be changing layouts every month soon, but at least I’ll also be updating the content as well.

Girl Power!

I’ve spent the past few week inundating my friend Ava, the one who starts Hackbright on Monday, with women in tech articles and sites online. She suggested I try to collect them all in one place, so here we go:

Big Sites:

  • Ada Initiative – Conferences, lobbying, mentoring. Lots of good stuff. Articles and video on Impostor Syndrome.
  • Systers – I just joined their mailing list. Lots of interesting discussions. Some of them don’t really apply to me, but it’s all inspiring. I really want to go to the Grace Hopper Celebration someday.
  • Skillcrush – Articles and teachables by women for women. Ava especially loved the Confusion is your friend blog post.
  • Women 2.0 – All sorts of career/education/tech stuff for women.
  • She’s Geeky – General geekiness for women, lots of rotating meetings/’unconferences’.
  • ChickTech – Currently focused in my hometown, they’ve done some amazing things for high school age girls.

Individual Articles:

[This will probably be a continually updated list for a while. I’ll sticky it to the top of the page for now.]

The Circus Waits to Takeoff

About a year ago for giggles I tried the Rails for Zombies class at Code School. I mean, it’s zombies. I am a huge zombie fangirl and I was getting back into Java programming at the time but wanted to learn something more web develop-y. Anyway, I got frustrated with Ruby/Rails. There were parts of it that just bugged me. So I stopped.

Then a few weeks ago I discovered Python. It was an immediate love. I started with Learn Python the Hard Way mixed in with Codecademy‘s Python lessons. Also I’m in love with the The Hitchhiker’s Guide to Python. I’ve been reading it like a novel.

Then I wandered around looking for things to do with my newfound love. Django just seemed too big for my very newb hackings. I can’t remember where but a blog somewhere out there in my searchings mentioned Flask. So I plugged that little baby into my cobbled together Python studio (i.e. my newly reformatted Windows 7 laptop) and felt a little overwhelmed. Undeterred I searched out tutorials and decided to start with this one which just creates some static pages (I’m moving on to more dynamic things as I post this).

Pic spam!!

My first Flask generated page. Isn’t it gorgeous?

Added some pretty pretty CSS (I missed web design, it’s been awhile):

And ta-da:

And then I added navigation and a second page:

And just because I find it pretty, my recolored PowerShell: