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

CSS Summit 2015 logo

The virtual, live CSS and Sass conference

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 2015! Bring the experts to your desktop July 7-9, 2015 from 9AM to 5PM (CT).

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

SVG Track \\ July 7, 2015 \\ 9AM to 6PM CT

(Schedule subject to change)

Designing with Progressive Enhancement   9am CT

by Jason Garber, Co-author of Foundation HTML5 with CSS3

Twelve years ago, Steve Champeon coined the term "progressive enhancement," giving a name to the idea that we should build websites with a base level of functionality and apply layers of enhancement depending on a browser's capabilities.

Today, we use and access the Web more frequently from a variety of devices on wildly variable connections.

What impact has this had on a development process like progressive enhancement? What's changed? What's stayed the same?

In this presentation, Jason will give a brief history of progressive enhancement, discuss its relevance in 2015, and offer a framework for applying the principles of progressive enhancement to the entire design process.

About Jason Garber

Jason Garber is a web developer, author, musician, community organizer, and photographer living in Washington, DC. When not building accessible, progressively enhanced websites, he organizes Refresh DC, plays guitar in The Orchid, and collects vinyl records. He?s the co-author of Foundation HTML5 with CSS3, published by Friends of ED in 2012 and writes regularly at sixtwothree.org.

×

SVG for Everyday Use   10am CT

by Wendee Fiorillo, Front-end Engineer

If you are not using SVGs, what are you waiting for? They are small, crisp, sassy bits of fun for your next project. This talk will take the mysteries out is creating and working with SVGs and provide practical uses.

  • Creating SVGs: Software or Code?
  • How to use
  • Manipulating SVGs
  • Optimizing your SVG files
  • SVG and accessibility
  • Implementation examples: practical and kickass

About Wendee Fiorillo

Wendee is a seasoned front-end engineer who works in the design spectrum of front-end development and has a passion for accessibility. With an illustration and screen-printing background, Wendee enjoys the challenges of translating a design for the web, is a typographic nerd, and can bend a bezier with panache. She is also an artist who grew up on the Mississippi River and loves tomatoes but not ketchup.

×

HTML Tables to SVG Pie Charts   11am CT

by Chris Scott, Founder of Factmint

Chris Scott walks though his company, Factmint's, approach to building data visualizations through progressive enhancement to HTML tables. By example, creating an interactive pie chart using SVG and CSS.

About Chris Scott

Chris is an entrepreneur and developer. His company, Factmint, produces tools for exploring and visualizing data - particularly in the Semantic Web. Chris is interested in SVG, JavaScript and all aspects of Web development.

×

Creating SVG Polygons   12pm CT

by Dennis Gaebel, Design Technologist at Gray Ghost Visuals

In this session, Dennis discusses how to create polygon SVG effects and look at some additional examples of this type of animation in the wild.

In this session, Dennis answers the following questions:

  • What is GSAP and the best way to get started with the tool.
  • How to make Polygon art.
  • How SVG animations work.
  • What a tween is and how it works.
  • How varying eases can alter the feel of a sequence.
  • What compositing failures still linger for SVG.

About Dennis Gaebel

Design Technologist, Writer and Open Source maker at Gray Ghost Visuals. Generally I'm an explorer of the web and write on topics such as Animation, Interface and Interaction Design, SVG and Development Workflow. By night I build out pattern based components for clients using the principles of atomic design. A graduate of Columbia College Chicago with a B.A. in Photography. Previously an aerial photographer now turned web developer who made his first site with WordPress. Currently a freelance writer at Tuts+, SitePoint and Web Design Weekly.

×

Fun with the Animation API   2pm CT

by Dan Wilson, Web and mobile developer

We've loved CSS animations for a few years now, with their broad support and ability to latch onto hardware acceleration. Now the Web Animations API is coming--and already polyfilled!--so how does it improve on what came before it?

  • What is the Web Animations API and why was it even proposed?
  • How does it compare to CSS keyframe animations?
  • How does it add more flexibility?
    • Callbacks
    • Timelines
    • Player controls
    • Dynamic nature
  • We'll close by looking at code and exploring fancy examples

About Dan Wilson

Dan is a web and mobile developer from Austin, TX. While he has experience with the full web stack, front end work is what he enjoys most and where he spends most of his time.

He has worked with major media companies, credit unions, travel agencies, health providers, and more to provide new services across devices. From small, progressively enhanced websites to enterprise-scale responsive web apps, Dan loves seeing a web that can truly be enjoyed by anyone regardless of how he or she accesses it.

×

SVG Sprites for Animation   3pm CT

by Sarah Drasner, Senior UX Engineer at Trulia

In the age of multiple screen resolutions, Scalable Vector Graphics are a powerful thing. An SVG sprite, with the reduction of HTTP requests, becomes more powerful still.

What does this mean in terms of animation? In this session, you’ll learn a few different ways that SVG sprites can cater to your users as well as your performance budget, such as:

  • Creating a complex animation that adjust based on the context of the viewport
  • Standing on the shoulders of animation giants of days past by using an SVG sprite like a traditional hand-drawn animation
  • Options for automating sprite creation for animation
  • Good fallbacks for mobile and progressive enhancement
  • Creating seamless parallax backgrounds with an SVG sprite

About Sarah Drasner

Sarah Drasner a Senior UX Engineer at Trulia (Zillow Group). Formerly she was Senior Interaction Designer at Fauna, Inc., a company founded by former Lead Engineers from Twitter. She is also the former Head of Design and Front-End Development at Basho, creators of Riak. At Basho, she increased lead generation by 75% through design improvements and managed all branding and visual communication.

×

Content-out Layout with Flexbox   4pm CT

by Chris Sauve, Front-end Developer at Shopify

This talk will focus on how Flexbox can be used to create layouts that do not require arbitrary widths or breakpoints to reflow or reorganize their content, but instead, that manage changes to the layout based exclusively on the size of the content and the space available to the component. Using some simple Flexbox properties and patterns, we’ll learn how to create structure for components that depends, not on the size of the viewport, but on the space available to the component itself.

Here’s some of the knowledge I’d love for attendees to take away from this talk:

  • The basics of the Flexbox layout model, including how Flexbox resizes and arranges content vertically and horizontally.
  • When Flexbox is appropriate to use, and when it’s not.
  • Some patterns, such as flexible children with a min-width and a parent that allows wrapping, that allow layouts to work regardless of what context they are in.

About Chris Sauve

As a front-end developer working on Shopify’s admin and experimental projects, Chris helps build interfaces with what, for most people, are still the tools of tomorrow. Chris focuses on everything related to Shopify’s front-end architecture: from the naming and organization of CSS components, to building out responsive-focused JavaScript, to building a living component library.

With some of his free time, Chris also loves contributing back to the community. He’s built a number of popular open-source tools, including bigfoot, a tool for automatically creating responsive footnote popovers, and a soon-to-be-released (and very cool) automated pattern library generator.

×

Interactive CSS in Email   5pm CT

by Mark Robbins, Email Developer at RebelMail

Email is often overlooked as lacking in support for modern CSS techniques. Although that is true for some email clients, over half of marketing email sent are opened on modern webkit based email clients.

  • CSS animation
  • Webfonts
  • SVG
  • Click events
  • Interactive image galleries
  • Interactive games
  • Multi page layout

About Mark Robbins

Mark is at the forefront of modern email development, finding many hacks and fixes for the ever changing email clients including, responsive email in Gmail, CSS triangles, SVG fallback, Yahoo alignment and CSS targeting for over 50 different email clients. He also created the concepts of “SLIFF email design” and “Punched Card Coding”.

×

Sass Track \\ July 8, 2015 \\ 9AM to 5PM CT

(Schedule subject to change)

The Next Steps in RWD   9am CT

by Justin Avery, Curator of RWD Weekly List

Responsive design sounds simple enough, but in practice it can have you banging your head against the wall. I conducted a poll with the readers on RWD Weekly to find out what was causing the biggest headaches.

We will look through the 6 most common issues and techniques on how you can get started or flip to expert mode.

  1. Responsive Images
  2. Improving Performance
  3. Responsive Typography
  4. Media queries in JavaScript
  5. Progressive Enhancement
  6. Layout

About Justin Avery

Web developer, technical consultant, wireframer and recently spend lots of time researching responsive design.

×

Gulping Your Broccoli   10am CT

by Alex Jegtnes, Web Developer

In a short period of time, websites have boomed in complexity and scope, and many developers turn to build tools to manage some of the complexity involved.

However, there's a lot more to build tools than minifying your CSS--learn how to easily take advantage of advanced optimisations--whether you run a five-page marketing site or a complex back-end powered web application!

During this sesion, Alex covers the following:

  • Sync the state of your site across 20 different devices for seamless browser testing
  • Automatically generate responsive images
  • Cut the compilation time of your massive Sass project by 75%
  • Inject CSS into your site every time it changes without a browser refresh
  • Extract, inline, and serve your critical path CSS in the head for a noticeable performance increase

About Alex Jegtnes

Alex is a web developer who pined from the Norwegian fjords to settle down in Bristol, UK.

When building websites, he loves to make sure they're scalable, accessible, performant, and doesn't want to make the next person maintaining his code brutally murder him with an axe. When not building websites, you can find him at the nearest pub with the most cats in it.

×

Classifying Class Names   11am CT

by Ethan Muller, Web Developer at Sparkbox

Naming stuff is arguably the hardest part of writing HTML & CSS. Let’s talk about what we can do to tame the unpredictability of the future and make our code more resilient. We’ll cover:

  • Eliminating analysis paralysis
  • Formulating maintainable class names
  • Categorization of class names
  • Class name semantics

About Ethan Muller

Being a developer with a design background, Ethan has a fondness for both beautiful code and smart design.

Ethan spends most of his days writing maintainable frontend code to delight users, clients, and fellow developers alike. He spends his other days making music, playing video games, and doodling.

×

Writing Modular CSS with Sass   12pm CT

by Guil Hernandez, Development teacher at Treehouse

CSS needs be reusable, scalable and adaptable to different use cases.

When writing modular CSS, our goal should be to get to a point where modifying or re-arranging anything about the structure will not break the front-end.

In this session, Guil will go over how to use many of the best practices and principles of modular CSS architecture with Sass. You’ll learn how a modular approach with Sass can boost your front-end workflow and cut down on maintenance, including:

  • How to write code that scales, no matter how big the project
  • Writing code others can easily read and maintain
  • Overview of the patterns of BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS)
  • Creating CSS components that do not rely on context
  • Learn mixins and functions for writing modular code

About Guil Hernandez

Guil is a front-end design and development teacher at Treehouse. He's also co-organizer of @sflsass and writes for sassbreak.com, a simple blog about Sass.

×

Sass Map Magic   2pm CT

by Eric Suzanne, Developer at OddBird

Maps are a powerful data type in Sass -- perfect for managing color and icon palettes, framework configuration, data storage, and more. We’ll find ways to integrate maps into any project before we push them to their limits.

  • Basics: create, read, manage, and merge maps
  • Organization: name-spacing your variables with maps
  • Tooling: creating your own site config and toolkit with functions & maps
  • Potential problems: handling self-reference within a map
  • Mania: creating your own "natural language" syntax

About Eric Suzanne

Eric M Suzanne creates web software with OddBird, soundscapes with Teacup Gorilla, wordscapes with [WriteyWrite], and performance art with Vicious Trap or the Denver Poets? Theatre. Formerly Artistic Director of New World Arts & Technical Director of The LIDA Project, Eric is the author of Riding SideSaddle*, and The Post-Obsolete Book. She?s an avid open-source contributor ? organizer of SassHack Denver, core developer on Compass, and creator of Susy and True.

×

Designing Web Systems (Not Pages)   3pm CT

by Sam Richard, UI Architect at IBM Watson

The old PSD to HTML workflow doesn't stand up to the complexities of responsive web design and the multi device web. Pictures aren't able to articulate all of the variables and variances that we need to design for.

Instead, we should get into browser early, patterns to support our content instead of pages, from a semantic and accessible baseline for everyone, enhancing up to our ideal user experience.

These are the systems of design that we should be aiming for and will make what we design more valuable for longer.

About Sam Richard

Sam Richard is the Senior Front End Developer for NBCUniversal’s Publisher team where he waxes philosophical about Sass+Compass, Responsive Web Design, Drupal, Photography, and, on occasion, bacon. He also makes all of the above, occasionally dipped in chocolate He organizes the New York Responsive Web Design meetup and co-organizes the New York Sass meetup and has spoken at a number of local, national, and international camps and conferences. He also maintains a number of open source projects to make designing in browser and build responsive sites easier.

×

The (Far) Future of CSS   4pm 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.

×

Adv Track \\ July 9, 2015 \\ 9AM to 5PM CT

(Schedule subject to change)

Sass for Fun   9am CT

by Una Kravets, Front-end Designer at IBM Design

By this point, you probably realize that Sass is an extremely powerful tool for writing DRY, modular code. I'm not going to be talking about the nuances of Sass optimizations and structure. Instead, I'm going to be talking about what got me into using Sass in the first place--it's just a lot of fun.

I wrote a lot of Sass that I never put into production, but through the process of play, I learned key programming concepts like traversing through maps and interpolation, and it even led me to playing with javascript. Eventually, I created tools like Sass Director and a node CLI for Sass docs. I'll walk you through advanced Sass examples like making pixel art with complex functions, and also talk about more basic experiments like playing with color to make dynamic color schemes.

About Una Kravets

I'm a front end designer, creating software prototypes at IBM Design, Austin. My goal is to make people smile through interactive experiences. I'm an avid Tweeter @una, founded the Sassy DC and ATX Sass Meetups, draw sometimes, and play with code a lot. I'm a DC girl at heart and have previously interned at some amazing places like Viget, nclud, and nvite, but look forward to my next adventure in Texas!

×

CSS & Sass Color   10am CT

by Clarissa Peterson, Author of Learning Responsive Web Design

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.

About Clarissa Peterson

Clarissa Peterson is a UX designer and developer, specializing in building responsive websites and training organizations in responsive design workflow. She frequently speaks on responsive design and mobile content strategy.

×

CSS Workflows from the Ground Up   11am CT

by Jonathan Snook, Web Design and Development Specialist

Between frameworks, preprocessors, and package managers, getting a web project off the ground seems to require a lot of tools. Have the days of opening up a single CSS file in a text editor disappeared?

This session will look at workflows that can help us work quickly and easily to build a performant and scalable site.

About Jonathan Snook

Jonathan Snook moves effortlessly from client-side, front-end work to hardcore server-side challenges, and his fluency in CSS, JavaScript, PHP and MySQL make make him the "turn-to" man for many high-profile clients. Co-author of Accelerated DOM Scripting and The Art and Science of CSS, he writes regularly for Digital Web and Sitepoint while also maintaining his popular blog at Snook.ca.

×

Styleguide-driven Development   12pm CT

by Chris Coleman, Sr. Web Developer at Science Magazine

As a previously print-focused publication, our web sites were historically implemented by contractors and vendors, without consistent design stewardship. A large, content-driven site with decades of articles spread across multiple platforms presents maintainability challenges for a small team.

In this session, attendees will learn:

  • How we avoid “design drift” by using canonical styles directly in our applications.
  • How we save time and money by removing Sass and CSS from projects and using Pattern Lab as a project dependency.
  • How this approach keeps internal and external developers happy
  • How this approach powers an expanding network of websites spread across several platforms.

Topics covered:

  • Workflows
  • Gulp/Grunt
  • BrowserSync
  • Git
  • Pattern Lab
  • NPM/Bower
  • Continuous integration Jenkins
  • CMS integration with Wordpress and Drupal

About Chris Coleman

Chris has been building for the web since the Geocities days, and he liked it so much that he never stopped doing it.

Chris is a senior web developer at the American Association for the Advancement of Science, the world’s largest general scientific society and publisher the Science family of peer-reviewed journals. He is currently leading the development of a major responsive redesign project. Chris brings modern tooling and workflows to his projects, focusing on maintainability, reusability and performance.

Chris has also done front-end development at LivingSocial, Advance Internet, and EightShapes, and naturally he’s done plenty of freelance projects. Chris doesn’t have any free time, but if he did, he’d probably just spend it building more web sites.

×

Making Template Site Systems   2pm CT

by Jess Lissy, Front-End Developer at Adobe

How to expedite and scale development using Sass; build multiple websites using a set of base styles and variable sheets.

In this session, Lissy covers:

  • What is a CCN?
  • How do we build a CCN?
  • Working with APIs
  • Foundation of base styles and using a core library
  • Using a Variables Sheet
  • Leveraging partials, mixins, variables, and functions

About Jess Lissy

Information coming soon. ×

A Designers Guide to AngularJS   3pm CT

by Kevin Lamping, Front-end Engineer at Four Kitchens

AngularJS is known by JavaScript developers as a great tool for building complex web applications, but it’s a tool that comes with a steep learning curve.

How can designers take best advantage of Angular without having to learn everything there is to know about directives, controllers, views and this thing called transclusion?

In this talk, we’ll cover everything a designer needs to know in order to control the HTML/CSS side of an Angular app, including:

  • How do views work?
  • How is server data accessed?
  • What are directives?
  • What is “transclusion”?
  • What are filters?

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.

×

Using AngularJS for Data Visualisations   4pm CT

by Nick Moreton, Web designer and WordPress developer

Often we jump straight to a 3rd party library to visualise our data, but often these come with a learning curve, or opinionated style. It always struck me that with its data-binding, and the ability to use variables directly in our markup, that Angular could be a great fit for visualising data - with the added bonus that we have full control of the style and appearance.

In this session, Nick looks at:

  • Angular as a data store
  • Filters for data design
  • Using variables in styles
  • Using variables in SVG
  • Stats dashboard with Angular

About Nick Moreton

New Media lecturer at Birmingham City University. Web consultant. Front end developer. Angular explorer. WordPress butcher.

×

Featuring
speakers from:

many fine organizations and companies

About the CSS Summit 2015

Whether it's the implementation of the new techniques available in CSS3, mobile concerns, pre-processor workflows or the ever-growing list of available fonts and how to use them, Web designers and developers will get up-to-speed with the help of these internationally recognized speakers and educators.

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

Next Event →

After this event, join us for our Accessibility Summit 2015, the 6th annual online, live accessibility conference.

Satisfaction Guaranteed 100%

Buy Tickets

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.