CSS Day

Our MC for the day, Chris Heilmann

Chris Heilmann has dedicated a lot of his time making the web better. Originally coming from a radio journalism background, he built his first web site from scratch around 1997 and spent the following years working on lots of large, international web sites. He then spent a few years in Yahoo building products and explaining and training people including Yahoo Answers, Search, Local and Maps. He then worked at Mozilla moving HTML5 support forward and advocating Firefox OS as an open alternative to closed mobile systems. Chris wrote two and contributed to eight books on web development and wrote many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more. He also wrote the Developer Evangelism Handbook in use in many companies to coach evangelists.

Responsive Principles, by Paul Robert Lloyd

Five years since its introduction, responsive web design has become an accepted best practice for developing websites. Furthermore, it has engendered a wider conversation about building products that can accommodate an increasing range of connected devices. This talk will aim to provide a framework within which we can model this discussion, and outline the principles needed for our work to better adapt to a rapidly changing world.

Video, slides

About Paul

Paul is an independent graphic designer and front-end developer who lives in beautiful Brighton, England. Previously at the Guardian, Clearleft and Ning, he advocates collaborative practice, systems thinking and embracing the inherent nature — and purpose — of the web. When not writing for publications like net Magazine, A List Apart and 24 ways, he can be found working on side projects (he is currently digitising George Bradshaw’s railway guide) or blathering on Twitter.

Flexbox, by Zoe Mickley Gillenwater

Flexbox and responsive web design go great together, like peanut butter and jelly. Flexbox gives you more control over the things you care about in a responsive layout—like order, alignment, and proportional sizes of your boxes—and lets the browser figure out the rest—the math-y stuff that computers are good at, like the exact dimensions that are needed on the boxes to perfectly fill the available space. You can create much more complex and reliable layouts with flexbox than you can with floats, table display, or inline-block, all with far less CSS.

In this talk, you’ll learn which features of flexbox are particularly suited to responsive layouts and how you can harness them today by applying flexbox as progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.

Video, slides

About Zoe

Zoe is a web designer and developer who loves creating sites that work for as many people and devices as possible. She wrote an entire book on fluid web sites two years before “responsive web design” had a name (Flexible Web Design: Creating Liquid and Elastic Layouts with CSS), and has also authored the book Stunning CSS3: A Project-based Guide to the Latest in CSS and the video training title Web Accessibility Principles for lynda.com. She’s written articles for publications like .net Magazine and Smashing Magazine, and has spoken at conferences like SXSW and Future of Web Design. Zoe currently works as a UX designer for Booking.com. Find out more about Zoe on her blog and portfolio site, or follow her on Twitter.

Typography on the Web, by John Daggett

Typography on the web has improved dramatically in the past few years with the wide availability of web fonts and browser support for basic typographic features. As browsers slowly implement support for font features, color font formats and better control over font display during loading, authors will be better able to customize more precisely how type appears in the browser. At the same time, type designers are coming up with clever solutions to problems associated with fonts for the web. This session will cover the current state of type in the browser and improvements on the horizon.

Video, slides

About John

John works on text and graphics code, based at Mozilla Japan in Tokyo. He is the editor of the CSS3 Fonts spec and has worked on the implementation of downloable fonts and other text and font-related features in Firefox.

Responsive Color, by Clarissa Peterson

Color is one of the first things we learn how to do in CSS — and yet many of us don’t ever go further than typing hex numbers handed to us by a designer. But getting colors to appear on a screen is just the beginning. Discover the secrets behind hex color values, and how to use simple math to adjust color attributes like saturation and brightness. Find out why colors look different on different devices, and what you can do about it. Learn how to adjust colors with media queries to make sure your colors look their best on any screen size. Find out how user context may affect the appropriate colors for a website. And finally, learn how you can make this whole color thing a lot less complicated by using a CSS preprocessor like Sass to manage your color choices and create color variations automatically.

Video, slides

About Clarissa

Clarissa is a UX designer and web developer, and co-founder of Peterson/Kandy, a Montreal-based digital agency specializing in creating responsive websites. Clarissa frequently speaks and gives workshops on responsive design, mobile strategy, and user experience. She is the author of Learning Responsive Web Design: A Beginner’s Guide, published in 2014 by O’Reilly Media. You can find her online at clarissapeterson.com and @clarissa.

Grid Layout, by Rachel Andrew

Since the early days of the web, designers have been trying to lay out web pages using grid systems. Likewise, almost every CSS framework attempts to implement some kind of grid system, using floats and often leaning on preprocessors. The CSS Grid Layout module brings us a native CSS Grid system for the first time—a grid system that does not rely on document source order, and can create complex layouts which are easily redefined with media queries. Following along with practical examples, you’ll learn how Grid works, and how it can be used to implement modern layouts and responsive designs.

Video, slides

About Rachel

Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the bestselling CSS Anthology for Sitepoint and she is a regular contributor to a number of publications both on and offline. Rachel founded her web development company edgeofmyseat.com in 2001, the company initially offered web development consultancy and now concentrates on developing and supporting the CMS Perch. She writes about business and technology on her own site at rachelandrew.co.uk.

The future of CSS isn’t CSS, by Roy Tomeij

The future of CSS, at least for the foreseeable future, will be pre-processors. They allow us to use next generation CSS syntax today, while still supporting older browsers. Let’s explore how we could benefit from a more programmatic approach to writing CSS, and go batshit crazy on Sass.

Video, slides

About Roy

Roy is a Sass advocate, speaker, trainer and front-end architect from The Netherlands. By day he works on AppSignal, by night he shoots through the sky as The Sasstronaut.

Defining “auto”, by fantasai

fantasai will explain how a layout engine works, what are the various primitives that go into “automatic” sizing, and how the CSS Working Group incorporates these into the design of new layout systems. You’ll walk away with a better understanding of what “auto” means, and how to incorporate the right automatic sizing rules into your adaptive layouts.

Video, slides

About fantasai

fantasai is a senior spec-writer in the CSS Working Group and a former Mozilla layout engine QA & dev contributor. Since joining W3C as an Invited Expert in 2004, she’s worked on a long list of specs including CSS2.1, Backgrounds and Borders, Selectors, Flexbox, Writing Modes, Paged Media, Image Values, and others.

The Back(side) of the Class, by Stephen Hay

Have you ever been taught that “modularizing” CSS via an endless number of “reusable” object-like “classes” is the “proper” way to use CSS on “large-scale websites”, or have you taught others that these are “best practices”? Do you think there’s a difference between the term “large-scale websites” and “enterprise websites”? When I say “inheritance” and “specificity”, do you feel dirty?

If you answered yes to the above questions, then you, my friend, are going to absolutely hate this session.

Video, slides

About Stephen

Californian by birth and Dutchman by choice, Stephen is a designer, consultant and author of Responsive Design Workflow (New Riders, 2013) and contributing author to Smashing Book #3. He is a frequent speaker at industry events and has written for A List Apart and other industry publications, including his popular-but-sparingly-updated blog The Haystack. While spending an increasing amount of time leading workshops, writing, and speaking, Stephen still spends the majority of his time working with clients large and small through his consultancy, Zero Interface.