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.

Image for post
Image for post
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

Image for post
Image for post
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.

Image for post
Image for post
Sketch notes by Susan Lin

Nicole Sullivan

Building the Media Block in React.js

Image for post
Image for post
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.
Image for post
Image for post
Sketch notes by Susan Lin
Image for post
Image for post
More sketch notes by Ricky Holtz

Bonus: an Update on LibSass

Image for post
Image for post
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.

Image for post
Image for post
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!

Image for post
Image for post
Michael Mifsud, Hampton Catlin, & Chris Eppstein. Photo by Amy Lee

Image for post
Image for post
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 Experience and Design

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store