dotCSS

A technical retrospective about shipping CSS Grid layout in production, its benefits and some advices on how to use it to its full potential.

Benjamin shares a technical retrospective about shipping CSS Grid layout in production, its benefits and some advices on how to use it to its full potential.

CSS Grid in Production

Laurence explains the manifold benefits for the web: responsive type within responsive design, reduced webfont payload, and much more. 

In September 2016 the font world was super-excited by the announcement (by Google, Microsoft, Adobe and Apple) of the OpenType 1.8 Variable Font format. Development versions of Safari soon supported Variable Fonts via the ‘font-variation-settings’ CSS property. Chrome since added support on all platforms. Yet the technology’s success depends on being embraced by typography’s new vanguard: UX designers and front-end developers.

Laurence explains the manifold benefits for the web: responsive type within responsive design, reduced webfont payload, and much more. He shows how to explore the possibilities of Variable Fonts using his Axis-Praxis website and other tools, encourages dialogue with font makers to make sure they’re making the responsive fonts you need, and explains how to deploy Variable Fonts in real projects.

Variable fonts: a million times the possibilities...

What if we could hack CSS into a search engine? Actually we can, and Tim shows you how to do it.

What if we could hack CSS into a search engine? Actually we can, and Tim shows you how to do it. 

Using only CSS and minimal HTML, it's possible to build a fast, relevant and easy to use search engine... with "only" 8MB of CSS.

Building a search engine in CSS

How do you make CSS easier to work with? Write less of it.

How do you make CSS easier to work with? Write less of it.

The more CSS we write, the more difficult our stylesheets are to work with. When stylesheets are difficult to work with, we're likely to write more CSS. This leads to more bugs, less consistency, and more frustration for both developers and designers.

Adam focuses on both technical and human problems related to maintaining CSS and a few solutions that have worked best at Meetup in our pursuit to write less CSS.

Whether you're working with a legacy website or building a new React application with component-specific styles, he shows you how the most powerful CSS is the CSS you don't have to write.

Write Less CSS

How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?

How do you take a complex web application, with a myriad of components and interactions, and make it fully responsive without pulling your hair out for a year?

Jonathan looks at what Container Queries are, how they can be implemented, what the hurdles are, and even looks at some tricks to avoid needing container queries (or media queries) at all.

Container Queries

One of the key tool for responsive design is getting smarter.

One of the key tool for responsive design is getting smarter. 

Florian gives us a quick look at what we have, which part of the original design turned out to be a bad idea, what we're doing instead, and how to best use it all.

Media Queries 4

The website simultaneously exists and does not exist. 

The website simultaneously exists and does not exist. 

In this talk, Jackie explains the paradox of building user-customizable responsive layouts for a website builder like Adobe Portfolio: how can a developer write the markup and styles for a website, and make it responsive, without first knowing what it will look like?

Schrödinger's Website

Ryan discusses the two biggest challenges facing the CSS-in-JS ecosystem and how compilers can help. 

What's next in CSS at scale? In this talk Ryan discusses the two biggest challenges facing the CSS-in-JS ecosystem and how compilers can help. And finally, he demonstrates the power of optimizing compilers with an experimental compile-to-CSS-and-JS language.

Compilers in styling web UI

With a little bit of math you can achieve an infinity of crazy effects in CSS, using a pre-processor like SASS.

With a little bit of math you can achieve an infinity of crazy effects in CSS using a preprocessor like SASS. Louis shows you how to create a Christmas bauble in pure CSS.

CSS Christmath

Large goals, like mastering web development, are hard to reach. Steffen shows how to break big challenges into small, daily habits.

Large goals, like mastering web development, are hard to reach. Steffen shows how to break big challenges into small, daily habits. This practice can help you to achieve those goals faster and enjoy the process while doing so.

One Step a Day

2017

How does a colorblind designer work with color? Not with his eyes! Instead David relies on reading color hex codes.

How does a colorblind designer work with color? Not with his eyes! Instead David relies on reading color hex codes. 

He shares his process into understanding those six-digit codes and related insights into human vision, computer history, and digital color.

Read color hex codes

A crash course on SVG filters and examples of powerful effects you can create with them, in a friendly, easy-to-follow approach.

Sara gives you a crash course on SVG filters — why they are awesome, how they work, and examples of powerful effects you can create with them, in a friendly, easy-to-follow approach. 

Brace yourself, and get ready to set your imagination free and expand your creativity for what's possible on the Web today.

A Mini Crash Course

Florian goes over a set of confusingly named properties and values from the css-text-3 specification that control white spaces and line breaking. 

Florian goes over a set of confusingly named properties and values from the css-text-3 specification (https://drafts.csswg.org/css-text-3/) that control what happens to white spaces when laying out text, and how line breaking works. 

He explains the logic of the system, different ways the properties can be used to achieve various results, and looks into some of the complication caused by incomplete implementations.

Line breaking

Not a lot of people use CSS counters, especially for something which is not an ordered list, but, this unique set of properties can be very powerful if you'll know where to look.

Not a lot of people use CSS counters, especially for something which is not an ordered list, but as Roman explains, this unique set of properties can be very powerful if you'll know where to look.

Not your usual CSS counters

CSS exists at an intersection between mental models. How do we know? Because we keep hearing the same endless debate: "Is CSS broken or awesome?" 

CSS exists at an intersection between mental models. How do we know? Because we keep hearing the same endless debate: "Is CSS broken or awesome?" 

Instead, we should work on building tools for collaboration - enabling teams to communicate by creating interfaces to accommodate different mental models.

CSS at the Intersection

A rapid review of internationalization and localization, the Web platform features that facilitate it, and how to use them.

Elika ('fantasai') does a rapid review of internationalization and localization, the Web platform features that facilitate it, and how to use them.

i18n: A Brief Primer of Web Internationalization

Fabien focuses on one of the links between CSS and Accessibility.

Fabien focuses on one of the links between CSS and Accessibility.

In the short term, whatever you want to do with CSS, your HTML should always be written in the exact order you want it to be read.

Don't write HTML the way George Lucas wrote Star Wars

Variable fonts can offer practical and creative opportunities for web design.

The web is entering a new era of design opportunities with the introduction of CSS Grid, Photoshop like effects such as filters and blend modes and importantly the increasing support for Variable Fonts. 

Variable fonts can offer practical and creative opportunities for web design. We can combine them with pre-existing technologies to improve our font performance, design, accessibility and usability of our websites. We can also begin to explore new and exciting creative opportunities for story telling, design and expression in ways standard fonts could never provide us. 

This is just the beginning of our journey to discover what we can do with variable fonts.

Variable Fonts and the Future of Web Design

Often, it has little to do with CSS itself, but everything to do with making mistakes, teaching while you're still learning, and that everything we create on the web will eventually disappear. And that's ok.

Reflecting on 20 years building websites, Dan shares what CSS taught him. Often, it had little to do with CSS itself, but everything to do with making mistakes, teaching while you're still learning, and that everything we create on the web will eventually disappear. And that's ok.

What CSS taught me

Five simple tips that can make or break a web experience for a lot of users: color contrast, resizable text, semantic HTML, focus states and keyboard interactions.

Hugues shares five simple tips that can make or break a web experience for a lot of users: color contrast, resizable text, semantic HTML, focus states and keyboard interactions.

Make your website accessible for everyone

Feeling uninspired and tired of constantly building the same layouts? Let’s leverage the CSS superpowers you might have heard about before, but haven’t already used.

Feeling uninspired and tired of constantly building the same layouts? Let’s leverage the CSS superpowers you might have heard about before, but haven’t already used. Let’s explore new CSS features that give us a great set of tools and enable to do amazing things on the web!

The future of web graphics and CSS as a design language is bright, and finally it will make us less dependent on the image editors. We’re entering the new era with in-browser designing. Don’t stay behind and get your creative juices flowing!

Breaking the norm with creative CSS

2018

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.