In the last few years, we've seen an emergence of a modular way of thinking about code and design.
We've seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular
concepts and how they can streamline development for large and long-running projects. We'll also
look at how these approaches can ease responsive design and development. Lastly, we will look at
where the modular approach is going in the future as Web Components slowly make their way into
browsers and application frameworks.
You can use the CSS you already know to create beautiful illustrations in your browser.
Better yet, you can achieve surprising results while still maintaining clean, semantic markup. We'll
take a look at techniques for drawing with CSS, practical applications, and pushing the limits of
what CSS can do.
Handling variable or unknown content in a layout can be tricky. Our current responsive layout techniques generally have unspoken assumptions that can easily be broken by changes in content, internationalization, and a collection of other unexpected adjustments to what needs to be laid out.
This talk will discuss how we can use Flexbox-driven layouts to overcome these challenges - how we can learn to stop worrying about our traditional, top-down layout techniques and love the content-driven layouts that Flexbox affords. We'll go over the key parts of the Flexbox spec that let the container respond to the content, instead of the other way around, and how we can build amazingly responsive layouts without a single media query or fixed width.
In the CSS world, we're not accustomed to wielding such power - but there's no need to be afraid. After clarifying what PostCSS is (and what it's not), dispelling some misleading rumors, and re-framing the conversation, David will expose you to different types of tools that have been built with PostCSS, and show how you could start building your own.
A well-organized style sheet is written in layers: the more general styles appear first, and lay the foundation for the more specific styles later. Let's explore some strategies for improving our general styles, so the specific styles are easier (or unnecessary!) to write. This talk will look at some ways to leverage the cascade instead of fighting or avoiding it, how to build layouts that behave responsively without media queries, and generally reduce the need for more and more specific styles later in our style sheet.
Animation capabilities have improved dramatically across the web driven by CSS transitions, hardware accelerated transforms, and standards such as JS Web Animations. Given the early state of UI motion design, it's only natural that designers are tempted to add animation as visual flair, not unlike, drop shadows or bevels. We will be creating few UI and layout projects that will help you learn some of the awesome new design techniques that CSS3 brings to the table. Animated user interfaces can be powerful - so powerful that they offer a competitive advantage to their products, regardless of platform.
Modern client-side tools are abundant and powerful, with pre-processors being one of the greatest advancements to date for CSS. However, in practice, these tools are only as smart as the client-side architects who wield them. We will look at several techniques for how Sass can help you apply a modular way of thinking to your site's CSS file structure that can be configured to support both cutting edge responsive web development and legacy codebases.
I will be speaking about the web's hunger for more, bigger, and higher-resolution images, and the performance problem this creates. I'll give a brief history of the new (and occasionally controversial) responsive images specification, and discuss some other exciting new standards that are on the horizon. In addition to responsive image solutions, I'll discuss techniques for improving image loading performance in general, including optimization and pre-processing, deferred loading, image format choice, caching, and use of CDNs. Attendees can expect concrete examples of how the new
sizes attributes and
picture element work, and to learn how they can use responsive and responsible images right now to improve performance and deliver the best possible experience to their users.
An overview of methodologies, technology choices, tricks, and compromises that let us use web components in production at Adobe.
While separation of components from layout is a well known strategy, sometimes practice is more difficult than theory. We'll cover the strategies for building the structure of components with re-usable parts and achieving separation of components from their layout. Also, grid systems are increasingly popular these days, but not all layouts require them. We'll explore some layout strategies without grid systems so you'll have the freedom to choose when to use a grid and when to go custom.