I’d also point out https://tiny.ted.com/ - a (mostly) text version of TED. It defaults to the full transcript of talks.

I really really want to love this. I'm so close to loving it.

I'm a fan of utility classes. I don't think that classes should be named based on their content, or that we should be using stupidly specific and complex selectors so we can keep our markup clean (clean markup has nothing to do with class names or selectors); But I feel like this takes to too far.

What do I gain over inline styles? This doesn't seem to be too much more maintainable than that.

You gain a significant amount of performance. And readability. You would also lose a lot of the benefits of framework level variables with only using inline styles.

Classes have no semantic value.

This is your own fault. You've made your "boss" believe that you can complete designs without content for so long that he now expects it. You should try re-framing the conversation. Something like:

— SCENE: BOSS TYPING FURIOUSLY, YOU KNOCK ON HIS DOOR AND HE INVITES YOU IN.

BOSS: "We need this design for our new sprocket page as soon as possible - We're going to market in two weeks and need a landing page for our Google AdWords campaign"

YOU: "Awesome! The new sprocket is going to be huge for our company. What would you really like to focus on for this page? I want to make sure to prominently feature the most important things."

BOSS: _excitedly lists a dozen things_

YOU: Wow - this thing is really great. It's going to be a huge benefit to our customers. How can we show them the three things they're going to react to instantly?

BOSS: "Well my favorite is the gizmosis feature. It makes it so you don't have to flim-flam any more!"

YOU: "Woah. That's really cool! I'll make sure that is billed highly. Anything else you can thing of that sticks out in your mind?"

BOSS: "That's the only thing that sticks out. I do have this detailed list of features here"

YOU: "Please do send that to me - I'll try to make some sense of it. If you think of anything else really important, just email it over to me. I'm going to start putting all of these features into the design tomorrow morning - so make sure you let me know by the end of the day! I can't wait to get this page up for our clients to see - it's going to be a huge win."

BOSS: "Excellent. I'll send over any additional thoughts I have with that document right now. Thanks."

— END SCENE

Framing the conversation is important. Seeing yourself as the boss's advocate is important. You're working toward the same goal. The content is more important than your design. Accept that.

This assumes that "the boss" is all knowing about all of the content, which in my experience is very rare.

However, "I need a mockup by the end of the day" is very common.

You forgot the laugh track indicators.

It's my own fault he wants to see what it will look like before signing off on something? Yeah ok. http://i.imgur.com/seh6p.gif

Nope. It's just your fault the you've told him "this is what it will look like" before having the content. It's not the truth.

EDIT: He's not going to "sign off" on it until the content is in anyway… right?

I'm willing to bet many people have "signed off" on things before there was content.

People seem to forget that lorem ipsum is not a new thing, it's been a part of design for decades. It is an accepted practice during design phases of a project, whether digital or print.

This looks nice and seems to be a decent solution to setting a consistent vertical rhythm, but doesn't seem to really use any Sass features, and the old OOCSS-style layout helpers leave a bad taste in my mouth. Seems easier to extend placeholders rather than use those classes all over the place in your markup. Sure, you CAN do something like this:

<div class="h2 left p2 mr2 bold white bg-blue rounded">.oh</div>

but do you really want to?

Check out SASS's control directives. They do everything you want.

http://thesassway.com/intermediate/if-for-each-while