Bruce Lee

李小龍

Be formless, shapeless, like water.
Now you put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put it in a teapot, it becomes the teapot.
Now water can flow, or it can crash.
Be water, my friend.

—Bruce Lee

What about frameworks?

Preformations simply lack the flexibility to adapt to the ever changing.

—Bruce Lee

Let's establish a new normal

State of Browsers (2018)

and many more...

Yes, it's easier to develop and test in only one browser. I'm sure IT professionals would have loved to only support one kind of machine. But variety creates opportunity for us as developers in the long run.

—Rachel Nabors, The Ecological Impact of Browser Diversity

Feature Queries

To write style sheets that use new features when available but
degrade gracefully when those features are not supported

Browser support

.selector {
  /* Styles that are supported in old browsers */
}

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}

It is futile to argue as to which single leaf, which design of branch, or which attractive flower you like; when you understand the root, you understand all its blossoming.

—Bruce Lee

Transforms

Allows us to change the shape and position of the affected content
without disrupting the normal document flow

2D transform functions

Diagonal text with rotate()

.trf2d-cont {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows:  repeat(3, 2em) repeat(3, minmax(10vmin, 3em)) 2em 2em 50vh;
  grid-gap: 0.125em;
  position: relative;
}

@media screen and (min-width: 480px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateX(5vh);
  }
}

@media screen and (min-width: 640px) {
  .trf2d-cont {
    transform: rotate(-30deg) translateY(-15vh);
  }
}

Perspective text

Browser support

CSS Shapes

Defines properties to control the geometry of an element’s float area

Basic shapes

Firefox Shapes Editor

MDN: Edit Shape Paths in CSS

Shape from image

Lee Jun-fan (李振藩), known professionally as Bruce Lee, was a Hong Kong and American actor, film director, martial artist, martial arts instructor, philosopher and founder of the martial art Jeet Kune Do. He is widely considered by commentators, critics, media, and other martial artists to be one of the most influential martial artists of all time.

Lee was born in Chinatown, San Francisco, on November 27, 1940, to parents from Hong Kong, and was raised with his family in Kowloon, Hong Kong. He was introduced to the film industry by his father and appeared in several films as a child actor. Lee moved to the United States at the age of 18 to receive his higher education at the University of Washington in Seattle, and it was during this time that he began teaching martial arts.

Browser support

Writing-mode

Defines CSS features to support for various international writing modes

Vertical text

Vertical headers

Vertical tags

Vertical links

Vertical navigation

Flexbox

Provides “simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need.”

Auto-margins

Flex lines

Flexbox layouts (1/2)

Flexbox layouts (2/2)

calc() and object-fit browser support

CSS Grid

Defines a two-dimensional grid-based layout system,
optimized for user interface design

Flexible tracks with fr

Represents a fraction of the free space in the grid container.

Fluid CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 3fr 2fr);
}

Flexible tracks with minmax()

Defines a size range for columns or rows in the grid.

The repeat() function

To specify a large number of columns or rows that follow a similar pattern

auto-fill vs. auto-fit

Allow browser to determine how many tracks to create depending on track size.

repeat(auto-fill, 100px)

repeat(auto-fit, 100px)

auto-fit collapses empty tracks.

auto-fill versus auto-fit

Responsive grid without media queries

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
}

The implicit grid

The grid-auto-flow property

Adjusting the direction and density of grid items

Firefox Grid Inspector (1/2)

Firefox Grid Inspector (2/2)