Sass Summit 2016

Sass Summit is a virtual conference on designing for the web

December 14, 2016 Starts at 10 ET / 9 C, New session top of every hourOn your desktop or mobile device

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Participants receive live online training + video

Registration grants you access to the live event

Interaction with the instructor and fellow attendees

Deep dive sessions save time leveling up skills

Online conference means no travel hassle

Real time Q&A with responsive web design experts

Post-event video to watch whenever you want

SPEAKERS

Russ Weakley

Zell Lieu

MIcah Godbolt

Sam Richard

Sarah Drasner

Estelle Weyl

ScheduleDeCEMBER 14, 2016

Creating a Simple, Accessible On/Off Switch

by Russ Weakley

10 AM ET / 9 AM CT

Have you ever tried to style checkboxes or radio buttons and ended up pulling your hair out? This presentation will explore a few simple tricks that can be used to style checkboxes and radio buttons. In this case, we will make them look like an on/off switch.

Along the way we will look at:

Using valid, semantic markup

Using BEM class naming conventions.

Adding accessibility benefits such as hidden labels for screen readers and visible focus states for keyboard only users

Using Adjacent sibling selectors to style all relevant states of the switch including: static, static:focus, checked, checked:focus and disabled

Using a single SCSS “master” variable used to control all dimensions, which will make the switch easier to maintain, modify or scale as needed.

Responsive Typography

by Zell Liew

11AM ET / 10 AM CT

Typography is one of the most important components of a good website. Responsive typography, though, is a tough nut to crack.

Zell has learned a lot about typography since he started to figure it out. He’s picked up best practices like using vertical rhythms and meaningful typography scales to make websites more pleasing to the eye. Implementing these practices on a responsive website was a horrible experience for Zell in the past. Now, he has a way to make it easy.

In this session, Zell deep dives into what he’s learned about typography and how he implements responsive typography.

You’ll learn:

How to select good font sizes, leading and measure to improve the readability of your website

What typography practices you should use, and how to implement them

What problems you’ll face with implementing these typography practices and how to overcome them.

How to make Responsive Typography easy!

Extending Sass with PostCSS

by Ashley Nolan

12 PM ET / 11 AM CT

Sass is without doubt the most popular CSS processing tool in the front-end ecosystem. The majority of us use it on a daily basis to give us powerful features that are currently unavailable when writing vanilla CSS.

But what if I said you could extend Sass and make your CSS workflow even more powerful?

In this talk, we’ll go through how you can do exactly that using PostCSS – a tool that opens up a host of exciting possibilities. Specifically, we’ll look at:

An overview of PostCSS - what it is and what it can do

Using PostCSS with your front-end build tool of choice, such as Gulp or WebPack

The PostCSS Plugin Ecosystem

Exploring a number of plugins I recommend taking a closer look at

Writing your own PostCSS plugin

Guidelines for Design Systems

by Micah Godbolt

2 PM ET / 1 PM CT

Wouldn’t it be great if we could spend less time trying to style the markup we’ve been handed, and more time creating a system of smart, reusable design components?

Well, we’re in luck. With the increased popularity of pattern libraries and the proliferation of templating languages, we finally have the tools to create and deploy our own design systems. But what is a design system, and how do we create them? What rules should it follow? How do I get my team on board? In this talk I will be pulling wisdom and insight from my past two years of creating a design system for Redhat.com.

I will explain what we call our “Road Runner Rules”, which influence every piece of code that we write. I’ll be covering topics such as:

Atomic Modular Design

Element Queries

Single-selector CSS with BEM/BEDAM

Data Attributes Driven Modifiers

Style Guides

Pattern Libraries

Design System Team Exercises

Tips for Creating User Stories

It doesn’t matter if you are a designer who wants to learn how to turn your visual language into a design system, or a developer who wants to create more modular components, you’ll want to sit in on this session and learn from the successes and failures of creating a large scale design system.

Working with Living Style Guide Animation

by Sarah Drasner

3 PM ET / 2 PM CT

Design systems, when done well, offer uniformity and clarity to a front-end ecosystem. There is a lot of literature on how to create good quality systems for clarity on fonts, icons, color, components, and modules. But with all of this effort, people still struggle to understand how to use and incorporate motion into their projects.

In this talk, we’ll go over how to break up your animation into measurable units, and how to apply these to living style guides so that our systems can be built with cohesion and we can stop reinventing the wheel. We’ll go over:

modular animation that can be built to scale and adjust

components with special animations built in and how to build them for performance

motion documentation, dos and don’ts

animation prototyping to get you off the ground

Simple. Accessible. Fast.

by Estelle Weyl

4 PM ET / 3 PM CT

You already know that accessibility is important. In fact, it's the law. It's also a good idea. Let's make the Web accessible--and faster--for everyone.

Estelle Weyl skips the "why" and focuses on the "how." Marking up accessible, performant websites can be as simple as using the right semantic elements in your HTML. Semantic HTML can prevent bugs, improve performance, reduce code bloat, and make your site accessible to screen readers and keyboard users.

Estelle explores accessibility features native to semantic elements and demonstrates how to add additional accessibility with a sprinkling of ARIA roles and attributes. Estelle also covers making accessible form controls, input masking, attractive selects, and creating a fully accessible carousel that functions perfectly with just a few lines of CSS, even fewer lines of JavaScript--and no frameworks.

Magic Tricks with CSS Houdini

by Sam Richard

5 PM ET / 4 PM CT

An introduction to what you can look forward to with CSS Houdini, a set of in-development web standards that explain the “magic” of styling and layout on the web while providing developers with the power to tap in to that power for themselves!

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

How Does Attending a Virtual Conference Work?

1.

Once you are registered, you will receive a follow-up email to confirm your reservation. If you don't receive your confirmation email right away, check your JUNK/SPAM filter and then, if it's not there, contact support.

2.

As the event draws near, you will receive a more detailed message about two days before the event with the full schedule and other helpful information to help you take full advantage of your conference-going experience and plan your day.

3.

On the day of the conference, you will receive an email invitation about 45 minutes before everything starts.

Click on the enclosed link to sign in and enjoy the conference!

You'll be able to see and hear the presentations as they happen, ask questions as needed and chat with the other attendees, if you like!

Technical Requirements

To attend The Summit, you will need a modern web browser and a recent version of the Adobe Flash Player.

Follow this link to run our system diagnostic (opens in a new window). It will let you know right away which plug-ins, if any, you will need to update before the event.