Code review HTML/CSS/LESS

[toolness]

I don't consider myself an HTML, CSS, or LESS expert, so I'd appreciate some code review (or I can rubber duck w/ someone). In particular:

• I'm using LESS, but I'm not actually building Bootstrap from LESS; just importing its variables.less to reuse some of its variables. Not sure if that is cool or not.
• Not sure how well my CSS rules follow best practices. For instance, I'm using > in a number of my rules, which could break as HTML changes--might be better to come up with explicit classes for such things.
• Cassie's original mockups used a 16-column grid, while Bootstrap uses a 12-column grid. My code attempts to resolve this by nesting columns, which I'm not sure is the best approach.
• I'm using CSS flex layout a lot but I'm not sure how smart that is; I guess it depends on what our criteria for browser compatibility is, and how bad the site looks on browsers without flex support. According to caniuse it appears IE9 doesn't support flex layout at all, while IE10 only partially supports it. Also not sure about the stock Android browser on older versions of Android.
• I suspect I'm not using the most semantically-relevant HTML tags that I could be using, so that could use some review.
• I doubt my HTML works very well on screen-readers, so I should probably check that. And run the HTML through a validator, perhaps.

[simonwex]

This issue was moved to mozilla/learning.mozilla.org#119