Nicole Sullivan & Mark Otto talk Front End

Notes & images from The Mixin June 2015 at Airbnb


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.
  • Minimize overrides; build for reuse.
  • Avoid shorthand attribute syntax. (i.e. background is bad, background-color is good.
  • Avoid deeply nested selectors.
“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.
  • Use utility classes that have a single purpose and use obvious nomenclature.
  • Automate and track your CSS.

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.
  • It provides a smaller, simpler API.
  • It provides “lightning fast” DOM updates.
  • She acknowledged that user testing and talking to their designers would have avoided a lot of the steps and helped get to the result faster.
“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
uxcareers@salesforce.com
Check out the
Salesforce Lightning Design System