Sass Conf

October 2-4, 2014

2014 Speakers

2014 Keynotes

Side portrait of Tab Atkins Jr.

Tab Atkins Jr

Spec Hacker for Google

Portrait of Chris Eppstein

Chris Eppstein

Core Contributor to Sass & Senior Engineer at LinkedIn

2014 Talks

Future Tools: Beyond Live Style Guides

Portrait of Adam Detrick

Adam Detrick

UI Design Architect, Meetup

Live style guides are widely accepted as a best practice in building user interfaces, but they don't always live up to their promise in practice. Meetup is a company with over 12 years of accumulated code, and we've been making a transition from ad-hoc UI to a more modern approach. We've learned a great deal about what works and what doesn't when trying to implement a custom CSS foundation and other design-driven tools.

In this talk, I'll be going beyond the basic idea of a live style guide, demonstrating tools and techniques that can help design ideas thrive. Fully automated documentation, package management, cross-platform color management, authoring best practices, and the strangler pattern will be covered. This talk avoids diving deeply into advanced features of Sass, focusing instead on novel approaches to the process of building user interface. Let's get ready to use and create the front end development tools of the future!

All software referenced in this talk will be open source under the MIT License and available on github.

Thinking inside the box inside the box inside the box

Portrait of Mason Wendell

Mason Wendell

Senior Developer/Designer, Phase2

Great design, like jazz, needs both harmony and discord skillfully executed in just the right places. On the web, many of our projects are playing sour notes. Let’s get in tune.

Even in the age or Responsive Web Design, many sites are designed from the outside in. Whether the page is defined in Photoshop or, let’s hope, in-browser, many design projects slide out of tune when they get to the second or third page. Components are inconsistent, page and layout dimensions vary, font sizes shift. These details add up. Living style guides have been proposed to address this problem, the trouble is they’re often extracted from the finished project.

Let’s design the style guide first. Start from inside out with the most common aspects of a design language. Instead of envisioning individual pages, work to create a cohesive family of components and layouts that can be assembled into any page. By leveraging a tools that help us create the elements of out design language and visualize them in various contexts, we can make components, layouts, and even working pages that snap together beautifully. It’s the new blank paper.

This session will focus on the principles and benefits of this approach and use real-world examples from client work and personal projects. There will be some technical examples that will range from intermediate to advanced Sass and Responsive Web Design. This will include Sass partials, extends, mixins, and Compass extensions like Breakpoint and Singularity Grid System.

Keeping Your Sass Squeaky Clean

Portrait of Adam Onishi

Adam Onishi

Senior Front End Developer, Architect

In this talk, I will take a look at all the features Sass and Compass put at your disposal, showing you how they can be used in real-world situations with a case study from the new Persil.co.uk website. From making complex responsive front end builds more manageable, working with custom IE style sheets, all the way through to improving the consistency amongst a team of developers. All of this formed part of the work that went into the new Persil website. In the last few years we’ve become quite accustomed to increasing our productivity with preprocessors like Sass or LESS. But how many of us take it much further than using a few variables, nesting our selectors, and using partials. Sass brings much more functionality to the table, including loops, conditionals, functions, and mixins. Now bring Compass into the mix and you have an even more powerful combination with added functions and built-in mixins. I'll show you how you can start cleaning up your own Sass with these advanced techniques that we've been using in the Persil project.

Style as a Service: Maintaining Style Across Multiple Websites

Portrait of Shay Howe

Shay Howe

Director of Product, Belly

We often build multiple websites and applications that share the same styles across multiple code bases (style guides/pattern libraries). Maintaining these styles becomes quite a task, and causes increasing frustration overtime. Fortunately it doesn’t have to be this way. Within this talk we’ll cover a service-oriented architecture approach to sharing Sass styles across multiple code bases. Geared towards designers and front-end developers, we’ll discuss at how to best structure and write style sheets for reuse and how to properly package them to be used within different development environments. Consistency shouldn’t take a back seat to maintainability, and this talk covers how to have the best of both worlds.

Building an Artful Web

Portrait of Smith Schwartz

Smith Schwartz

Interaction Designer, Say Media

Having recently made the transition from the world of art museums to the world of front-end development and design, I’ve learned that these two disciplines have more in common than one might think at first glance. There’s lots of talk in our industry about craftsmanship, but I believe we also need to strive to build a more artful web. We’ll start with a behind-the-scenes look at museums, art in the digital era, authenticity and fear, the temporal nature of what we do, and learn a bit of art history along the way.

2014 Lightning Talks

Color in the Real World

Portrait of Katie

Katie Kurkoski

Getty Images

How color works in the real world, how you can use this knowledge to inform your designs and improve your development, and how Sass's color functions make doing so easier. Covers subtractive vs additive color, print vs. monitor color, and how artists in physical mediums use colors to hack the human brain.

Spreading the Sass Love

Portrait of Una Kravets

Una Kravets

Front-End Developer, IBM Design

We love Sass! But how can share this warm fuzzy feeling and make others love it just as much as we do? Whether you're interested in starting a sass community in your town, convincing coworkers to incorporate it into their workflow, or just getting more involved as a Sassvocate, this talk will show you how.

Lead Maintainer for Sass Q & A

Portrait of Natalie Weizenbaum

Natalie Weizenbaum

Lead Maintainer for Sass

2014 Workshops

Included with your ticket!

Expanding your Sass Arsenal

Portrait of Anthony DiSpezio

Anthony DiSpezio

Content Engineer, Inkling

Are you a Sass beginner eager to increase your experience? In this workshop we’ll take an in-depth look at some powerful features to help you write smarter Sass and cleaner CSS.

What you'll learn

  • Extends and Mixins In-Depth
  • Maps and Loops
  • Functions FTW
  • Bulletproofing with Warnings
  • Media Query Techniques

Please bring a laptop, a great attitude, and a sense of humor!

Requirements

Laptops are strongly recommended but not required. Those without can follow along. Sass should be installed (and functioning), preferably command line as some UIs ignore Sass warnings.

Optimising the Critical Rendering Path

Portrait of Patrick Hamann

Patrick Hamann

Senior Software Engineer, The Guardian

Who is it for?

This workshop is for any designer or developer wanting to improve the speed of their websites and have a greater understanding of the browsers internals.

What you'll learn

Over the 4 hours you will learn what are the common performance bottlenecks in the browser from networking to painting and learn how to best optimise at each stage of the critical path to create fast, jank free websites.

What this workshop will cover

  • Why performance matters
  • Networking
  • Render tree construction
  • Measuring performance using browser developer tools
  • Hardware acceleration
  • Optimising CSS
  • Optimising load time
  • Optimising paint
  • Practice on working examples
  • Testing and monitoring
  • Tips, tricks and best practices
  • The future

Requirements

  • Please bring your laptop with the following installed:
  • Latest Chrome browser
  • Node.js
  • Grunt

Introduction into UI Regression Testing

Portrait of Kevin Lamping

Kevin Lamping

Front-end Engineer, Rackspace

Test-Driven Development has grown in popularity among the community in the past few years, but we're still lacking the proper tools to provide automation behind our CSS.

How do you know a change you made to one small section on a page doesn't break a large section on another page of your site, especially when you support hundreds of devices?

What you'll learn

This workshop will walk through a few of the tools available to help out. We'll set up the software together, then run them against real-life scenarios to show where each succeeds and where they individually fall short.

By the end of the workshop, attendees will have a solid understanding of what options are available and know how to add a regression test suite to any project they're currently working on.

Requirements

Choose your own Refactoring Adventure!

Portrait of Elyse Holladay
Portrait of Jina Bolton

Elyse Holladay

Developer/Designer, MakerSquare

Jina Bolton

Senior Product Designer, Salesforce UX

Whether you’ve been using Sass for a while or are still trying to figure out how to abandon plain CSS, refactoring a large project can be a daunting task. We all know it’s too hard to refactor everything for months and launch it all at once, so how do you begin a multi-step refactoring process?

What you'll learn

In this four-hour workshop, Jina and Elyse will walk you through the basics of refactoring using Sass. You’ll receive guidelines for how to refactor for clarity, maintainability, efficiency, and DRY code, and learn how to test your changes. They’ll cover ways to break down a refactor into manageable chunks, help you understand how to modularize your CSS, and organize messy code into documented, style-guide ready files. Everyone will leave with a customized game plan of steps, tools, and guidelines to refactor their project—not a sample app—so bring your project code with you.

What This Workshop Will Cover

  • overview of ways to use Sass (CodeKit, Rails, libsass, nodesass, etc.)
  • creating color and typography variables
  • breaking out and importing files
  • determining CSS/UI modules, where they live in your app, and how to organize them
  • namespacing for style safety
  • commenting and in-CSS documentation
  • creating living style guides
  • naming conventions and refactoring classes/IDs
  • testing for changes

Requirements

Bring your laptop with your personal codebase you want to refactor. If you don’t have a project in mind, that’s fine; you can still get a lot out of it. We’re hoping to have people come up with a game plan for their own projects that need refactoring, rather than a sample project.

Think Like IBM

IBM Logo

IBM

Design Thinking

IBM cares about solving complex problems that affect millions of people globally. IBM Design will be running 2 workshops throughout Saturday at SassConf where we’ll give you a glimpse into what it’s like to design solutions at IBM that are completely focused on our end users. You’ll not only learn about IBM Design Thinking and about some of our incredibly powerful and disruptive enterprise technologies like Watson - but we’ll give you chance to a design a solution to solve a problem that is important to you (we'll have some prompts available to you as well in case you are stuck). Imagine what you would do with IBM Watson. Get ready to rapidly sketch, prototype, and present your ideas in our workshops. Post-it® Notes as well as snacks + drinks will be provided! Sign up at the IBM table during the conference. We’re looking forward to meeting you!

2014 Panels

Large Scale Sass!

Portrait of Kyle Fiedler
Portrait of Scott Kellum
Portrait of Jackie Balzer

Kyle Fiedler

Managing Director & Designer, Thoughtbot

Scott Kellum

Senior Front-End Designer, Vox

Jackie Balzer

Head of Front End Development, Behance

We'll discuss the challenges and strategies of developing and maintaining reusable Sass components for use of thousands of users and use cases.