Environments for Humans
twitter icon facebook icon flickr icon feed icon linkedin icon email icon

CSS Summit 2016 logo

The virtual CSS and Sass conference event

In-kind Sponsors


Environments for Humans brings together some of the Web's most notable experts in CSS and Sass for an all-new, three-day online conference, the CSS Summit 2016! Bring the experts to your desktop July 26-28, 2016 from 9AM to 5PM (CT).

Don't miss this great event and purchase your tickets now!

DAY 1 \\ July 26, 2016 \\ 9AM to 5PM CT

(Schedule subject to change)

Using Flexbox Today   9am CT

by Zoe Gillenwater, Author of Stunning CSS3 and Flexible Web Design

With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work.

We'll talk about the when, what, and how of using flexbox today: when it's a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn't harm non-supporting browsers or accessibility.

In this session, you'll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.

About Zoe Gillenwater

Zoe is a freelance graphic and web designer, developer and consultant. She is the author of the book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS and the video training title Web Accessibility Principles for lynda.com, and is working on the upcoming book Stunning CSS3: A Project-based Guide to the Latest in CSS.

Zoe is currently a member of the Web Standards Project (WaSP) Adobe Task Force and was previously a moderator of the popular css-discuss mailing list. Find out more about Zoe on her blog and portfolio site at www.zomigi.com or follow her on Twitter @zomigi.

×

Flexbox Designs with PostCSS   10am CT

by Archana Sankaranarayanan, Front end Engineer at Coursera

PostCSS Flexbox offers compact, easy to understand rules to construct complex layouts using CSS3 Flexbox. In this session, we discover the steps needed to build complex layouts in under 30 minutes using PostCSS Flexbox.

You will learn 7 tutorials to build them with Flexbox with PostCSS:

  • Horizontal layout
  • Aligning items differently using Flexbox
  • Responsive layouts
  • Wrapping layouts
  • Aligning, sizing Individual items within Flexbox
  • Simple vertical alignment
  • Vertical alignments for accordions and drawers

About Archana Sankaranarayanan

×

Atomic Design   11am CT

by Andrew Jones, Front-end developer at MoZeus

With the rise of modern frameworks like Ember and Angular, we need to learn to think outside of "pages" and start designing and building modular components.

Using the Atomic Design approach, we can build smaller units that form a highly flexible and modular whole.

You will learn:

  • An overview of the principles of the Atomic Design methodology
  • An in-depth breakdown of each Atomic component
  • An overview of pattern libraries
  • An in-depth walkthrough of the Pattern Lab library
  • A walkthrough of a pattern library for a real site

About Andrew Jones

Digital and traditional artist in Atlanta. ×

Patterns for Pattern Making   1pm CT

by Miriam Suzanne, Creator of Susy

Style Guides and Pattern Libraries are great tools for documenting the relationships between code and design, but beautiful docs and consistent UI are only half the battle. Somewhere, behind the scenes, those patterns have to live in our code, and hopefully make life easier for developers. We can go beyond "living" style guides to find tools that encourage and document pattern-making from the ground up, across projects, without adding developer overhead. From Sass maps and Jinja macros, to front-end architecture and style-guide generators -- let's talk about the code patterns that make our UI patterns possible.

About Miriam Suzanne

Miriam Eric Suzanne is an author, performer, musician, designer, and web developer. She is the author of Riding SideSaddle* and The Post-Obsolete Book, co-author of Buntport Theater?s 10 Myths on the Proper Application of Beauty Products and SitePoint?s Jump Start Sass, and creator of the Accoutrement, Susy, and True open-source toolkits.

Formerly Artistic Director of New World Arts & Technical Director of The LIDA Project ? Miriam creates web software with OddBird, soundscapes with Teacup Gorilla, words with [WriteyWrite], and performances with Vicious Trap or the Denver Poets? Theatre.

×

Guidelines for Design Systems   2pm CT

by Micah Godbolt, Creator of SassBites

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 Twig powered flexibility we'll be seeing in Drupal 8, 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.

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 a large scale Drupal design system.

About Micah Godbolt

Creator of SassBites and Founder of PDXSass, Front End Developer at Phase2, Sass Evangelist, Android Junkie

×

Beyond the Toolkit   3pm CT

by Nathan Curtis, Founder & Designer at Eightshapes

A design system is made up of parts: visual style, UI components, code, editorial, and often more. We know how to design, build, deliver them is like any other digital product development process. And there's the rub: your system is a product in and of itself, applied to an enterprise's ecosystem of other products built by autonomous teams of designers and developers.

Your strategy needs answers to "What products will use it, when and to what extent?" "Who's our audience?" "Who participates and contributes?" "What groups must we align with?" "Who wants it, and -- really -- who doesn't?"

We'll explore ways to identify and prioritize how to engage your enterprise's people and products as you spread and sustain a system over time.

About Nathan Curtis

Nathan co-founded EightShapes in 2006, a UX agency in Washington DC. He shares his passion for design systems by consulting with teams large and small and regularly writing, speaking, and conducting workshops worldwide. He also wrote the book Modular Web Design and conceived of UX documentation and HTML/CSS prototyping tooling downloaded by 50,000+ designers worldwide.

×

Day 2 \\ July 27, 2016 \\ 9AM to 5PM CT

(Schedule subject to change)

Fostering an Open-Source Front-end Culture at Work   9am CT

by Kevin Lamping, Front-end Engineer at Four Kitchens

Even if you're working an entirely closed-source codebase, the chances are high that you're pulling in an open-source project. The popularity of Sass, jQuery, and many others speaks to how well open-source works, when done right.

But the truth is, these projects face the same troubles that many workplaces struggle with. How do they encourage contributions when most contributors only have a few minutes to spare? How do they manage to collaborate on a codebase when everyone lives in a different city and works on different teams? How do they get developers to RTFM?

While not everyone project can be open-source, all of them can benefit from taking an "open-source" approach. In this talk, we'll look at how to foster a codebase and a culture that is open and encouraging to everyone. We'll cover what works and what surprisingly does not, all in an effort to foster a more open, maintainable and friendly project.

About Kevin Lamping

Kevin Lamping is a Front-end Engineer at Four Kitchens. He also helps organize Hill Country JS, a front-end meetup in San Antonio. In his free-time, when he's not playing with his kids, Kevin dabbles in scale model building, tabletop gaming, piano and gardening.

×

Advanced HTML Email Tips & Tricks   10am CT

by Kevin Mandeville, Email Designer/Developer at Litmus

In this session, we will go over all the best tips & tricks that the best email developers in the world use to master HTML email. We go over the state of email client rendering and making sure to understand what rendering engines are being used--which is a massive game-changing perception!

Next, we go into actual email hacks used for all of the major email clients, such as:

  • Outlook conditional comments
  • WebKit targeting
  • Gmail targeting

Afterwards, we will walk through a few real-world examples of the hacks in action such as emails containing a live Twitter feed, HTML5 video background email, and more! Each example is broken down to show what's possible using the hacks and in the framework of thinking that the best email developers in the world use.

About Kevin Mandeville

×

Houdini: The Future of CSS   11am CT

by Tab Atkins, Web Standards Hacker at Google
Session information forthcoming.

About Tab Atkins

Tab Atkins Jr. wears many hats. Working for Google on the Chrome browser as a Web Standards Hacker, he also is a member of the CSS Working Group and several others, and contributes to even more working groups in the W3C.

×

Moving Pictures: On Web Video and Interactivity   1pm CT

by Opher Vishnia, Creative developer at Interlude

No matter the narrative, whether you’re making a movie, a game or an advertisement on the web with HTML5 video, there is one aspect is always important: The GUI.

So, how can we design amazing interfaces on top of video with web technologies like CSS and SVG? And make it work across devices and platforms without affecting video performance?

In this session, I will show many cool examples while presenting several methods of impemtnations and discussing best practices.

About Opher Vishnia

Opher is a multidisciplinary creator, invested in many different and often unrelated fields at the same time: computer science, art, music, design, math, game development and more.

For the past three years Opher has been working at Interlude as lead creative developer, and the go-to authority on client side web technologies. His day-to-day involves working with both creative teams (design, art, film) as well as development teams to push the envelope of interactive video, a new and exciting creative medium.

×

Inclusive Code   2pm CT

by Estelle Weyl, Open Web and Performance Evangelist for Instart Logic

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.

About Estelle Weyl

Estelle Weyl is the Open Web and performance evangelist for Instart Logic. Previously, she consulted for Kodak Gallery, SurveyMonkey, Samsung, Yahoo, Visa, and Apple, among others. Estelle shares esoteric tidbits learned while programming and detailed grids of CSS3 and HTML5 browser support at Standardista.com. She is a co-author of Mobile HTML5, CSS3: The Definitive Guide, and HTML5 and CSS3 for the Real World. While not coding, Estelle works in construction, de-hippifying her 1960s throwback abode.

×

Recreating GIFs in CSS   3pm CT

by Gregor Adams, Web Developer and Artist

CSS is simple and powerful. With the help of Sass, we can add math and logic to generate code.

There are some amazing GIF artists out there creating some great work, but wouldn't it be nice if we all took a look inside the GIF to understand it's logic?

This talk will focus on Greg's technique to recreate some of the most impressive processed art and let you look right into it's heart.

In this session, you will change your point of view, learn to analyze animations, learn about drawing techniques, and recreate the impossible.

About Gregor Adams

Information coming soon. ×

Day 3 \\ July 28, 2016 \\ 9AM to 5PM CT

(Schedule subject to change)

Deep Dive into Line-Height   9am CT

by Russ Weakley, Web Designer at Max Design

At first glance, CSS line-height seems very simple, but there is a lot going on below the surface. Line-height is important for any designer or front end developer to understand as it can impact almost every aspect of our layouts.

You will learn:

  • Leading and half-leading
  • Applying line-height
  • Shorthand line-height
  • Different methods for calculating line-height
  • Vertical alignment
  • The line box
  • Baseline grids
  • Responsive line-height

About Russ Weakley

Russ has worked in the graphic design arena for over 20 years, with a major portion of that time spent specialising in web development and design.

×

Using Sass & PostCSS Together   10am CT

by James Steinbach, Web Builder

PostCSS & Sass are mortal enemies locked in eternal combat, at least that's what someone tweeted... But what if they can actually work together? PostCSS is a powerful tool and it can be a fantastic complement to the preprocessor you've already got in your workflow.

In this session, we talk about how we can use the strengths of both tools to write future-friendly, organized CSS.

About James Steinbach

I'm a Chicago native living in South Carolina and yearning for Denver. When I'm not building websites, I love to spend time with my wife & newborn baby, read something suspenseful, catch a good movie, and discover fantastic food & drink. When I am building building websites, I'm all about developing meaning animations, presenting unique responsive design solutions, and using Sass to keep my code clean and light.

×

Advanced Greensock Workflow Tips   11am CT

by Carl Schoof, Geek Ambassador at Greensock

All animations take many revisions to get the right timing and feel.

We all know that clients will always have last minute changes so its imperative that the animation tools you choose are flexible enough to handle these demands.

This session would focus on the unique strengths of GSAP that allow for coding complex sequences with ease and making quick changes that would literally take hours with other tools. This session would be packed with tips to help animators solve real world problems.

About Carl Schoof

As Geek Ambassador, Carl Schooff is in charge of GreenSock?s support and training. He loves making things move with code and enjoys helping people understand that you don?t need to be a hard-core programmer to make delightful things. After having spent a decade doing all manner of interactive advertising and taking a few lumps from Flash-pocalypse Carl finds comfort in being able to focus solely on the wonders of the GreenSock Animation Platform. If you?ve got a GSAP question for him you?ll be sure to find him in the GreenSock forums. If you?re interested in having him spend a day or two showing your team the ins and outs of GSAP, check out greensock.com/training.

×

FLIPping Awesome Animations   1pm CT

by David Khourshid, Web Developer

When it comes to native mobile versus web animations, it seems the web is lagging behind. However, using the FLIP principle, we can create smooth, 60 frames-per-second animations between layout changes and emulate the aesthetic layout changes typically seen in well-designed native apps.

You will learn:

  • What the FLIP (first, last, invert, play) principle is
  • Using transforms in CSS to animate layout
  • How we can apply FLIP in web layout transitions and animations using JS and CSS
  • Comparison and exploration to Android’s Shared Element Activity Transitions and iOS’s Layout Constraint Animations
  • Using the Web Animations API to facilitate and customize FLIP transitions
  • Interrupting FLIP transitions and additive animations

Live demos will also be shown demonstrating the FLIP principle and techniques. By learning how layout animations are accomplished in native apps, we can implement meaningful transitions on the web in similar ways that can improve the usability of our web apps.

About David Khourshid

David Khourshid is a web developer, blogger, and speaker based in sunny Orlando, FL. He is passionate about cutting edge front-end technologies, UI development, and motion design, especially with JavaScript and Sass. When he has free time, he is either working on open-source projects, practicing piano, or traveling.

×

The Business Case for Well-Constructed CSS   2pm CT

by Jonathan Cutrell, Director of Technology at Whiteboard
Session information forthcoming.

About Jonathan Cutrell

Jonathan leads a team of developers at Whiteboard, a design and development firm focused on people and their exchange with technology in Chattanooga, TN. Beyond casting strategic vision at a high level for the developers at Whiteboard, he writes code with his team every day. Jonathan is also an author, and the host of Developer Tea, a 10 minute, top-rated podcast focused on providing regular, valuable insights to developers.

×

Working with Javascript Task Runners   3pm CT

by Kevin Ball, Engineering Lead at ZURB

Let's face it, the frontend is an increasingly complicated ecosystem. With the rise of the Node.js JavaScript ecosystem, CSS preprocessors like SCSS, less, and stylus, and powerful Javascript frameworks like Angular, React, and Ember, the days of a simple frontend with a few flat files are rapidly fading away.

Frontend developers have to grapple with their own alphabet soup of headaches named things like Bower, Npm, Grunt, and Gulp.

In this talk, we'll take on the key lynchpin in this ecosystem - Javascript task runners like Grunt and Gulp - and break down what they are, how to use them, and how they can make your life much better.

You will learn:

  • What a Javascript task runner is
  • How to set up a build environment using Gulp
  • Some quick wins you can take back to immediately improve your frontend development practices to write cleaner, tighter, better code.

About Kevin Ball

Kevin Ball is an experienced web developer and entrepreneur. He has co-founded and acted as CTO for 2 companies, founded the San Diego Javascript Meetup, is a regular presenter at local tech meetups, and consults on software development, communication, and leadership.

Currently, Kevin is leading the tools group at ZURB, heading up the development of the Foundation family of open source projects and the Notable suite of design tools.

×

Featuring
speakers from:

many fine organizations and companies

About the CSS Summit 2016

Join us for the 8th Annual CSS Summit and discover the tips and techniques to improve your CSS, keep it responsive and lean, and ready for the future. From Flexbox to Style Guides, from Animations to Video, our experts can help you discover ways to create your best CSS and Sass layouts.

Why attend the online conference?
  • Attending a conference online means no travel hassle!
  • Bring the experts live to your desktop!
  • Time spent on the road is better spent instead in the office or with family, friends!
  • Sessions are developed to dive deeper into the material!
  • Ask questions directly to the speakers!
  • Can't make it the day of the conference? Watch the recordings whenever you want!
Free Recordings

Can't make it the day of the conference? Recordings are part of registration, so you can watch the recordings whenever you want!

Within five business days after the event, we will send you information on how to view recorded sessions.

Testimonials from
Attendees
This conference was a load of fun. I loved the instant feedback from the speakers and the atmosphere.

John-David Dalton
Web Application Developer
& Web Performance Summit Attendee

I love these online conferences. It's convenient and you can still learn a lot from the comfort of your home or at work.

Candi Ligutan
5by5.tv Producer

An absolutely fantastic event. Well done—will definitely be back for more!

Russ Weakley
Chair of Web Standards Group
& CSS Summit Attendee

I can honestly say I've learned more attending E4H's virtual summits than I've learned attending real life conferences.

Glenda Sims
Senior Accessibility Consultant at Deque Systems, Inc
& Accessibility Summit Attendee

Satisfaction Guaranteed 100%

Buy Tickets

CSS Summit 2016 Recordings

HOW IT WORKS

Once you are registered, you will receive a follow-up email to confirm your reservation. Later on, as the event draws near, you will receive a more detailed message, with the full schedule and other helpful information to help you take full advantage of your conference-going experience and plan your day.

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 enter the virtual meeting space. Once you are signed in, 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 Specifications: 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.

Still have questions? Drop us a line or contact us at e4h@heatvision.com if there's anything else you'd like to know.