dotCSS

Progressive enhancement, accessibility, internationalization, and performance as it relates to writing CSS in 3019 (and, of course, today).

It’s 3019, how has writing stylesheets changed? Ire covers topics such as progressive enhancement, accessibility, internationalization, and performance as it relates to writing CSS in 3019 (and, of course, today).

Writing CSS in the year 3019

Writing CSS that scales is hard, even when you're great at it. There's one methodology made for change, called utility-first CSS.

Writing CSS that scales is hard, even when you're great at it. It often starts well, but soon, unforeseen requests start coming in, the layout is being moved around, and you have to undo most of what you've done. 

Soon, you realize that your component-based architecture isn't as resilient as you thought, and it feels like the best thing you can do is to start over.

There's one methodology made for change. Instead of being tied to your project, it's tied to your style guide. This is called utility-first CSS.

In Defense of Utility-First CSS

Explore innovative ways of organizing styles, adding complex interactivity and meaningful transitions.

As web apps and user interfaces become increasingly more dynamic and complex, structuring stylesheets for every possible state can be a challenge. 

David explores innovative ways of organizing our styles, adding complex interactivity and meaningful transitions, and comprehensively test UIs through a decades-old concept – finite state machines. 

With ARIA, data-attributes, and CSS variables, state machines can bring a new level of maintainability, testability, and interactivity to your styles.

Crafting Stateful Styles

Get a deeper knowledge of how to design a public API for components, how theming works, and common pitfalls one might come across when trying to scale a design system across an organization.

Authoring performant, scalable & accessible CSS is difficult and requires specialist knowledge. 

Emily covers why design systems can help enable organizations to ship well-written CSS. 

She also covers what design systems are, the history of design systems at GitHub, and why we decided to abstract styles into reusable React components.

You will walk away with a deeper knowledge of how to design a public API for components, how theming works, and common pitfalls one might come across when trying to scale a design system across an organization.

CSS, Design Systems & Developer Experience

Using CSS with SVG is a great adventure full of magic, friendship and sometimes… creepy villains!

Using CSS with SVG is a great adventure full of magic, friendship and sometimes… creepy villains! 

Jump in and discover why you should tell the world that CSS and SVG are forever best friends.

SVG & CSS

While everyone is talking about CSS in JS, what if we look at how to do JS in CSS? Because yes it is possible! Is that a good idea?

While everyone is talking about CSS in JS, what if we look at how to do JS in CSS? Because yes it is possible! Is that a good idea?

Jean-François is not sure about that, but why not come and relax on this technical and fun session.

JS in CSS

See how reinventing the wheel is a great way to learn and improve as a front-end developer. 

Hakim tries to give people tools for finding unexpected ways to improve UI elements. He talks about how reinventing the wheel is a great way to learn and improve as a front-end developer. 

The talk covers three specific UI improvements that he’s deep-dived into, complete with hands-on examples of how to implement them.

What breaking interfaces taught me about building better interfaces

In this Darwin-themed talk, you'll learn how CSS came to be, and how the language's simplicity and flexibility still make it stand out today.

It's been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. 

The cascade, specificity and the enormous choice in values and units set the language up for success. But not everyone liked to use these features everywhere. Some began to adapt the language to meet their needs.

In this Darwin-themed talk, you'll learn how CSS came to be, and how the language's simplicity and flexibility still make it stand out today.

On the origin of cascades

We used to avoid inline styles, considering them a “bad practice”. But what if most of the known pitfalls could be avoided by using modern CSS features like custom properties?

We used to avoid inline styles, considering them a “bad practice”. But what if most of the known pitfalls could be avoided by using modern CSS features like custom properties?

Roman shows how we can use CSS variables to recreate a utility-first approach by using them as an API from our HTML style attributes.

Utility of Inline Styles

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. 

Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. 

Jason looks at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create a whole new way to think about design and development. 

He also shows how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

Dynamic Typographic Systems with Variable Fonts

Every code line can be tested, even CSS. Learn how to test SASS functions and master SCSS update impact on generated CSS.

Every code line can be tested, even CSS.

Fabien shows you how to test SASS functions and master SCSS update impact on generated CSS.

CSS tests

CSS can be wonderful or dreadful, for accessibility, depending on how you use it. 

Aurélien shows how CSS can be wonderful or dreadful for accessibility depending on how you use it and how small details can open doors to everyone or destroy all your efforts to do it.

dotCSS 2019

Dec 4 | Paris, France