Skip to main content

The Conference

CSSConf is a conference dedicated to the designers, developers and engineers who build the world’s most engaging user interfaces. The presenters push the boundaries of what is possible — talking about the latest technologies, cutting edge techniques, and tools.

CSSConf 2016 takes the show on the road anew, bringing two days of talks from experts around the community to Boston!

Part of the international CSSconf family

CSSconf Family Since the first CSSconf US in 2013, the CSSconf family has expanded around the globe. All CSSconf organizer teams share the vision of an international, diverse and creative CSS community, for which the CSSconf series offers a platform to meet, hack, share knowledge and build friendships.

Schedule

Monday, September 26

8:30 - 9:25

Registration & Breakfast

Get your badge and swag bag, grab some coffee and a seat, and get ready for the show to start!

9:25 - 9:30

Claudina Sarahe

Emcee's Introduction

Leading us through the two days of talks, we're proud to have SassConf & GothamSass co-founder Claudina Sarahe on board as our master of ceremonies. She'll be chatting with speakers between talks, fielding questions from attendees, and generally helping make sure our transitions – CSS and otherwise – go smoothly!

9:30 - 10:05

Sarah Drasner

Creativity in Programming for Fun and Profit

Sarah Drasner of the venerable CSS-Tricks explains how we can use web platform tools like SVG and WebGL to inspire and imbue creativity into our projects.

Creating engaging products starts with our own fascination. Empowering our users, designing for emotion, and marrying what is useful with what we find intriguing pays dividends for our own fulfillment as developers as well as the people who use what we create. This talk will illuminate some of the ways that we can manipulate code for great effects, with exciting yet practical purposes. We'll talk about data visualization, innovative SVGs, WebGL and immersive experiences, and even subtle cues. We'll explore key differences in our processes, and why innovation in our field starts with opening our minds to new ways of working with code.

10:10 - 10:45

Brian Jordan

No Bugs in Sight

At Code.org, automated cross-browser visual testing plays a vital role in maintaining stability and catching regressions. Learn how they test their their visually-intensive, interactive curriculum from Brian Jordan.

In this talk, Code.org's Brian Jordan will describe the evolution of their continuous, cross-browser automated testing suite, including a year’s worth of lessons learned from visual regression tests in the wild. Setting the context of the challenges of testing Code.org’s interactive, drag-and-drop open source computer science curriculum (game visualizations using SVG, Canvas, and a metric boat-load of SASS styling), Brian will describe how Code.org’s small engineering team got a handle on cross-browser issues and visual regressions, and how team members can write quick tests for their own visual-intensive code. At the end, Brian will share some fun examples from Code.org's "Bug Collection"—real live examples of bugs detected before they hit production.

10:50 - 11:25

Jessica Lord

Nativize Is the New Normalize

CSS and friends are making their way onto the desktop with Electron. GitHubber & Electron team member Jessica Lord shares what you need to succeed when styling in this new paradigm.

Electron is a library that lets you build desktop apps in much the same way that you build web apps: with CSS, HTML and JavaScript. Use the tools you already know and ship one codebase to three platforms—awesome! But when CSS meets the desktop things change. In this new context—the native app—we must think about CSS differently and sometimes write things that would make no sense on the web at all. In this talk we’ll cover the best practices for using CSS to create a native feeling desktop app: the surprising things, the tricks and lest we forget, the perks of designing for just one browser.

11:30 - 1:00

Lunch in Boston

Head down to Boston's waterfront district where a variety of food fare await you and your new conf crew. Check out some of our favorites below !

1:00 - 1:35

Pete Hunt

Component-Based Style Reuse

Learn how React has impacted approaches to styling web applications from none other than longtime library contributor Pete Hunt.

React has triggered a renaissance of component-oriented frontend development on the web, which has led to a rethinking of the relationship between stylesheets and components. In this talk, Pete will cover some of the ways this thinking has changed, how this impacts accessibility and SEO, as well as how component-based style reuse changes how design and product orgs interact, and throw out some big ideas for what the future might look like.

1:40 - 2:15

Jen Kramer

CSS4 Grid: True Layout Finally Arrives

It's been years in the making, but the Grid spec is here! Jen Kramer explains what that means for our designs and for our code.

For years, front-end developers fumbled with hacking floats for layouts, often as part of a grid system. Media queries made these float-based grids more responsive to different screen dimensions, but unfortunately, the behaviors weren't always granular enough to work well with complex layouts. Now with the new Grid specification in CSS4, we can easily define behaviors for each cell in our layouts in two dimensions. When combined with media queries, we can specify where each cell will be placed under a variety of conditions, in horizontal and vertical space. Similarities and differences with Flexbox will also be identified and discussed.

2:20 - 2:55

Will Boyd

Silky Smooth Animation with CSS

Used effectively, CSS animations can add a flourish to any UI. Used haphazardly, they can take your page on a one-way trip to Jank Town. Will Boyd will explain how to make sure you're in the first group!

CSS animations can really help your web pages shine, but making them silky smooth requires finesse. This talk explains how browsers handle CSS animations, tips and tricks to optimize them, and the tools you can use to ensure top notch performance. Specific topics include compositing layers and the compositor thread, recognizing costly reflows and repaints, writing optimal CSS, using browser dev tools to debug CSS animations, and fixing annoying browser-specific quirks. There will be plenty of live demos to visually convey all of this information.

3:00 - 3:30

Afternoon Break

Take a break, grab a snack, and chat about the talks!

3:30 - 4:05

Keith J. Grant

Stop Thinking in Pixels

Discover how CSS's relative units and variables can be your secret weapons for creating flexible, responsive layouts – with no media queries!

We tend to like working with pixels. They are constant and easy to understand. But the real power of CSS is found in relative units: em and rem and vw/vh. Their exact meaning is determined with a “late binding” in the browser, where they change depending on their context.In this talk, we’ll unravel the mystery of relative units. I’ll show you how to build flexible designs with simpler code. I’ll cover how to make your design responsive without a single media query. And we’ll dive into one of CSS’s newest tricks: CSS Variables, which offer far more flexibility and control than the SASS/LESS variables you may be used to. Come learn how to stop thinking in pixels and embrace CSS’s late binding of styles.

4:10 - 4:45

Lea Verou

CSS Variables: var(--subtitle)

Native CSS variable support brings a lot to the table (and other HTML elements too). Find out how and why to use them today from CSSConf veteran Lea Verou.

You may have heard about CSS Variables (AKA CSS Custom Properties), but think they're not something you can use yet. Plus, you already have your preprocessor pipeline in place, so why should you care? This talk will show how CSS Variables are much more powerful than static preprocessor variables and can be used today without compromising progressive enhancement. You will also learn several creative tips and tricks to take full advantage of them. As is customary with Lea’s CSS talks, expect a swath of live demos to demonstrate the material.

Tuesday, September 27

8:30 - 9:30

Breakfast

They say it's the most !important meal of the day.

9:30 - 10:05

Sara Soueidan

SVG IRL

Sara Soueidan returns to CSSConf US with practical tips and tricks for using SVG!

SVGs seem great – and are – but widespread use of them can come with pitfalls. This talk will demonstrate ideal use cases and examples focused on getting the best results from SVG, with an emphasis on creating accessible SVGS, because we can't talk about real life without talking about real people and real people are not all using our sites in ideal situations and contexts.

10:10 - 10:45

Henri Helvetica

The Hateful Weight

As the web has grown, so too has the size of web pages, thanks largely to an explosion in image sizes and formats. Make sense of it all and get lean with Henri Helvetica!

The web’s growing complexities has made for even more complex metrics. Web performance and it’s dark artistry demands for the interpretation of Gordian data, legible only to the erudite. But the most comprehensible metric remains the page weight. It continues to grow at an alarming rate, wreaking havoc to data plans and user experiences world wide.
THE HATEFUL WEIGHT will look at one of the main actors in this drama: image formats. The talk will analyze their impact on browsing, the tools and processes in place to address their size and the reasons developers must exercise vigilance in a growing and worldly audience

10:50 - 11:25

Miriam Suzanne

Sass Map Magic

Understand how Sass maps power a range of programming techniques from prolific open source author Miriam Suzanne.

Maps are a powerful data type in Sass — perfect for managing color palettes, module scales, framework configurations, and even data storage. I've pushed them to the limit with toolkits like Susy (for responsive layouts), True (for unit testing), Accoutrement (for living style guides), and any number of over-engineered tools that failed along the way. We'll explore the full range of options, from day-to-day configuration and practical tips, to automated style-guides, and complete API's with custom syntax parsing.

11:30 - 1:00

Lunch in Boston

Head down to Boston's waterfront district where a variety of food fare await you and your new conf crew. Check out some of our favorites below !

1:00 - 1:35

Zach Green

Webpack and CSS

When it comes to CSS, Webpack offers so much flexibility that it can be hard to figure out what, if anything, is the 'right way'. Zach Green's on hand to guide us toward making the best decisions when incorporating it into applications.

Webpack is a powerful tool for writing and loading CSS, and it offers the front end developer a suite of approaches to style authoring. CSS-loader or ExtractTextPlugin? Sass or PostCSS? Locally scoped classes with CSS modules? Multiple entry points? This talk will review (almost) everything CSS-related that Webpack has to offer, and the advantages and pitfalls of each approach. We'll discuss asynchronous loading, text extraction, compilation and transpilation, and more. Attendees will learn how and why Webpack is so great for CSS, and how

1:40 - 2:15

Emily Hayman

It's Time To Ditch The Grid System

Emily Hayman will show you how to flex your flexbox muscles with real-world examples and, of course, some Sass mixins.

Responsive, column-based grid systems have been the de facto choice for CSS layouts for several years. However, now that flexbox support has reached critical mass, it's time to ditch the grid in favor of axis-driven, content-based layouts. In this talk, we'll discuss real-world component types and how to approach creating them from a flexbox mindset. We will then extrapolate from these examples to write a set of lightweight Sass mixins from which any number of layout types can be easily derived.

2:20 - 2:55

Justin McDowell

Bauhaus in the Browser

Inspired by century-old designs and armed with new CSS features, Justin McDowell brings art to life – and to any size screen!

Until recently, design on the web has been limited to fragile, horizontal, and boxy layouts. Today there are new tools in CSS that can help us breathe new life into stale projects. Some of them are cutting edge, while others are quite mature yet still under-used. This talk is centered around the use of four emerging CSS tools: grid, shapes, transforms, and viewport units, along with others. By the end, attendees will see practical examples of how to mix these tools together and turn them into novel, eye-catching compositions. Attendees will get a showcase of how these new digital techniques can be applied to the web by journeying back to the past—nearly 100 years—to one of the most notable periods in the history of design: Bauhaus modernism. During this period, design was highly influential yet gleefully experimental, with strict geometry, overlapping elements, and rotated text. Attendees will see works by artist Piet Mondrian, typographer Jan Tschichold, dadaist Kurt Schwitters, and metal-worker Marianne Brandt recreated or redesigned on screen, and optimized for the new medium of mobile devices.

3:00 - 3:30

Afternoon Break

Take a break, grab a snack, and chat about the talks!

3:30 - 4:05

Amelia Bellamy-Royds

The Great SVG RetCon

The web has changed and so has SVG. Amelia Bellamy-Royds will explain how SVG 2 impacts how you use SVGs on a day-to-day basis.

In the world of comic books, a retcon is the introduction of new information that ret roactively changes the story, in order to improve con tinuity from old to new storylines. In the web standards world, retcon alterations are also sometimes required, re-defining existing features so that new features can be built on top of them. The new SVG 2 spec is overloaded with them.

Why are we retcon-ing SVG? Because the original SVG spec was based on what turned out to be incorrect assumptions of how the web would evolve. SVG 2 cuts free from dependencies on little-used XML specifications. It increases coordination with HTML and with CSS. It sacrifices a strict separation of "structure" versus "style" in order to better support responsive and dynamic graphics.

Most of the changes appear on the surface to be syntactic conveniences, but those surface differences require corresponding changes to underlying fundamentals. Fundamentally altering the logical model of SVG inevitably led to breaking changes. Well-supported and widely-used features have been carefully preserved, but many details have been dropped and edge cases have been altered.

What does this mean to web developers & designers trying to use SVG? How can you safely navigate this construction zone of changing features and incomplete browser support? You have two options: either stick to the sturdy sections with the most reliable features, or put on your hard hat and push into the danger zone, testing for support as you go and creating a safety net of fallbacks and polyfills.

4:10 - 4:45

Alisha Ramos

Coding is a Privilege

Vox.com Design Director Alisha Ramos shares the lessons she learned on the path from web beginner to professional developer, reminding us of what we often take for granted in terms of the accessibility of careers in technology.

Coding is a privilege on many levels. In this talk, I want to share with you my story of beginning as a beginner – with nothing in my bank account, no computer science degree, nothing in my background that screamed "one day you will code for a living," as I do now. I want to share the similar stories of others who want to code but can't. I want to tell you the responses I get from people who don't believe me when I tell them that coding is a privilege, and what I say to them. I want to leave you inspired to take action and do more to help others find the magic of CSS and coding. I'll share some actionable steps you can take. The future is about making this knowledge accessible to all. of users.

Pre-Conference Workshops

Sunday, September 25

We are thrilled to be offering workshops for the first time at CSSConf. They will take place the day before the conference on Sunday, September 25th, 2016 from 10am - 5pm.

You may notice that the workshops are not "about" CSS – and that's intentional. We've got plenty of time for that during the conference! Instead, we've assembled workshops aimed at giving you practical experience with skills that will make you a more well-rounded developer or designer.

Tickets for the workshops are available in conjunction with your CSSConf ticket, or standalone if you aren't attending the conference.

All workshops will be held at the Bocoup Boston Office, 201 South Street, Floor 1 Boston, MA 02111 .

Learn More & Get Your Ticket

Visual Design Strategy

Instructor

Isaac Durazo

Foster your design thinking skills with a collaborative and open approach to improve and optimize your design process.

Learn More

User Research

Conduct qualitative research and transform it into actionable insights that guide product decisions.

Learn More

Command the Command Line

Instructor

Mike Pennisi

Learn the fundamentals of "Unix-like" systems and apply them to your work.

Learn More

Tickets

If you experience any trouble purchasing tickets, please try purchasing them at our dedicated checkout page or get in touch for assistance.

All tickets are non-refundable, but are transferable until the day of the conference. You can transfer the ticket directly using the link you receive when you purchased it, or contact us for help.

The Venue: Laugh Boston

We had such a good time at Caroline's in 2015 that we're continuing the tradition at Laugh Boston ! Opened in 2013, this state of the art standup comedy theatre will be our home in Boston's Seaport district, footsteps from downtown.

Lunch

We learned very quickly that we couldn't match the level of great food that's within walking distance of our conference venue, so we dropped the cold-cuts and mini-plates in favor of an hour-and-a-half block for you to head out to some place close by with friends old and new!

Here's a non-exhaustive list of ideas, but explore the neighborhood to your heart's (and stomach's) content. Just don't go to the same place as everyone else! All are within about a half-mile of Laugh Boston, and can should be able to get you fed and on your way in time.

Diversity Scholarship

We are constantly seeking ways to make the web development community broader and more inclusive, and our Diversity Scholarship program, which covers a full CSSConf ticket as well as travel and hotel stay in Boston, is an important part of that effort. The scholarship is open to people who self-identify as part of any group that's under-represented in technology. We invite you to learn more . The application period for the 2016 conference has closed.

If you want to help us extend the reach of this program, you can get the word out to groups and people who'd be interested in applying and attending, or your company can sponsor additional scholarships .

Learn More

Sponsors

Sponsorship

CSSConf 2016 is a great opportunity to meet and get to know hundreds of the world's top CSS and front-end developers. Whether you're looking to hire developers, promote your product, or just give back to the community, this is the place to be. Get in touch with us to get involved.

Learn More Reach Out

Code of Conduct

We believe that everyone deserves a thoroughly pleasant conference experience, regardless of who they are. We adhere to the Bocoup Code of Conduct and expect that all of our speakers, attendees, sponsors, and volunteers will do the same.

Learn more