Nicole Sullivan & Mark Otto talk Front End

Notes & images from The Mixin June 2015 at Airbnb

Jina Anne
Jina Anne
Jun 9, 2015 · 4 min read

In 2013, I started a quarterly San Francisco Sass & frontend meetup called The Mixin. I have felt very fortunate with the line up of speakers we’ve had so far. Some of those speakers include:

You can see the full list at our website, which was designed by my co-organizer, Mike Fowler.

Attendees mingling over in Airbnb’s top floor space. Photo by Amy Lee.

As if that line up wasn’t already amazing, last week we were very excited to have both Nicole Sullivan, creator of Object-Oriented CSS, as well as Mark Otto, creator of Bootstrap. It was a wonderful coincidence that their talks complemented each other. Common themes were smaller APIs, obvious naming conventions, style guides, and extensible platforms.

Mark Otto

@mdo-ular CSS

Mark Otto. Photo by Daniel Eden

View his slides

Mark shared his tips for modular CSS, or @mdo-ular CSS, as he calls it. ☺

  • A simple class structure is preferred. They should be more meaningful. No chaining.

“Every line of code should appear to be written by a single person, no matter the number of contributors.”

  • Document and evolve guidelines for your team.

A couple Bootstrap bonus updates came up in Q&A: Bootstrap 4.0 will be built on Sass and will include a flexbox layout system.

Sketch notes by Susan Lin

Nicole Sullivan

Building the Media Block in React.js

Nicole Sullivan. Photo by Daniel Eden

View her slides

Nicole shared her team’s experiences with React and how they iterated over time to land on a “reactified” media block that suited their team’s needs. It was great hearing the steps they took, what they learned, and where they landed.

  • React is great for components because it creates consistent HTML.

“Designers usually just want traditional top-aligned media blocks & centered flag components. So make those dead simple to use.”

  • Don’t reinvent HTML tags, but make different components to package different functionality.
Sketch notes by Susan Lin
More sketch notes by Ricky Holtz

Bonus: an Update on LibSass

Michael Mifsud. Photo by Amy Lee

In addition to the great talks by Mark and Nicole, Michael Mifsud (libSass core team member and NodeSass project lead) gave an impromptu update on the state of libSass. It’s almost at feature parity with canonical Sass!

The event was held at Airbnb’s beautiful, well-lit headquarters. It was a great turn out! Airbnb graciously provided dinner and beverages.

Dinner time conversations. Photo by Amy Lee

I was stoked to have Hampton Catlin, Chris Eppstein, and Michael Misfud in attendance. It’s pretty awesome that leaders in the Sass community come hang out with us!

Michael Mifsud, Hampton Catlin, & Chris Eppstein. Photo by Amy Lee
Salesforce UX t-shirts! Photo by Amy Lee

Finally, I felt very fortunate that so many members of my team at Salesforce UX came by as well. We also gave out some Salesforce UX t-shirts!

If you would like to stay updated on future events for The Mixin, you can follow @TheMixinSF.

If you would like to keep up to date with future events hosted by Salesforce UX, follow us at @SalesforceUX!

Thank you to Amy Lee, Susan Lin, Daniel Eden, and Ricky Holtz for notes and photos for the event!

Follow us at @SalesforceUX.
Want to work with us? Contact
Check out the
Salesforce Lightning Design System

Salesforce Design

A collection of stories, case studies, and ideas from…

Salesforce Design

A collection of stories, case studies, and ideas from Salesforce design teams

Jina Anne

Written by

Jina Anne

Design Systems Advocate

Salesforce Design

A collection of stories, case studies, and ideas from Salesforce design teams