Designing CSS Elika J. Etemad aka fantasai W3C CSS Working Group Invited Expert

Specs I've Worked On Since 2004

What is CSS?

A basic Web page is composed of HTML and CSS.

HTML is just annotations around the text, describing its structure.

CSS is just annotations keyed off the HTML, describing its presentation.

Design for the Web is very different from design for Print.

You often don't have control over the content.

You almost never have control over the display size or orientation.

Resizable CSSWG Redesign circa 2011 (Divya Manian & Elika Etemad)

But with CSS, we can make designs that take whatever environment and content we have as input, and lay it out to fit perfectly. (Try resizing the page above!)

5 Principles of Web Architecture

Web Architecture Cross-Device & Cross-Platform

Web Architecture World-Wide Web

Web Architecture Forwards- and Backwards-Compatibility

Web Architecture No Dataloss

Web Architecture Separation of Content & Style

Why? Separation of Content & Style

How? Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

CSS Zen Garden: Separation of Content & Style

Principles of Web Architecture

Fundamental Goal of the Web = Accessibility of Information

Constraints of CSS

Design Principles of CSS

Multi-column Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
columns: 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
columns: 15em
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
columns: 15em 3

Flexible Box Layout

First
Second Longer Item
Third
justify-content: center
First
Second Longer Item
Third
justify-content: space-evenly
First
Second Longer Item
Third
flex: 1
First
Second Longer Item
Third
flex: auto

Initial Letters

Initial Letters

Initial Letters

Initial Letters

Automatic Sizes

Automatic Sizes

Resizable Typography Experiment using “Intrinsic Design” (Jen Simmons)

Automatic Sizes

grid-template-columns: max-content max-content minmax(min-content,1fr) min-content

Automatic Typesetting

日本語English فارسی
2018年919
writing-mode: vertical-rl;
text-orientation: mixed;
text-combine-upright: digits 2;

Relativity: What is your sizing based on?

Design Principles of CSS

Design Pitfalls of CSS

shape-inside

Exclusions

Regions

Grid Layout First Proposal

Grid Layout

MSFT Grid Layout v2 + Bert’s Template Layout + Line-based Model Δ
CSS Grid Layout Model

Interoperability

Open Standards

Proprietary .....🐇 5年
Open ....................................................................................................🐢 100年

天下一ウェブ

Thanks! ~fantasai