Be like water

Applying Bruce Lee's philosophy to web design

🇲🇾 🏀 👩‍💻 🇸🇬 📝 🎙

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
Blog layout Holy Grail layout
Every startup's template

The “Blog” layout

Example of Blog layout Example of Blog layout Example of Blog layout

The “Holy Grail” layout

Example of the Holy Grail layout Example of the Holy Grail layout Example of the Holy Grail layout

The “Panel” layout

Example of the Panel layout Example of the Panel layout Example of the Panel layout
“Preformations simply lack the flexibility to adapt to the ever changing”
—Bruce Lee

Let's establish a new normal

“The hardest part is changing our thinking, not our CSS”
—Jen Simmons

State of Browsers (2017)

Chrome Firefox Opera Webkit Edge IE11 UC Browser Android Samsung Internet

and many more...

Feature Queries

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

@supports (property:value) {
  .selector {
    /* Styles for browsers that support the specified property */
  }
}
Wismut Labs site layout on IE11 Wismut Labs site layout on Firefox Wismut Labs site layout on Chrome

Flexbox and Grid

Based on the container-child relationship

Flex/Grid containerFlex/Grid item

Flexbox

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

Flexbox browser support

Flexbox basics

Pumpkin by Yayoi Kusama

Flex shorthand

flex: initial flex: 0 1 auto, cannot grow but can shrink when there isn't enough space
flex: auto flex: 1 1 auto, can grow and shrink to fit available space
flex: none flex: 0 0 auto, cannot grow or shrink, AKA inflexible
flex: <positive-number> flex: <positive-number> 1 0, can grow and shrink, extent of growth depends on flex factor

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

CSS Grid browser support

“We need to translate ideas that we find in other places, not transfer them.”
—Jen Simmons

CSS grid basics

Define your grid.

Place items in the grid.

Fixed CSS grid

.container {
  display: grid;
  grid-template-columns: repeat(5, 10em);
}

Fluid CSS grid

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

Responsive CSS grid

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

Placing grid items

grid-row and grid-column

Whitespace

Basic overlap

.grid-cont2 { display: grid; grid-template-columns: repeat(9, 1.25em); grid-template-rows: repeat(6, 1.25em); } h2 { grid-row: 3 / 5; grid-column: 1 / 10; } .grid-cont2::before { grid-row: 1 / 7; grid-column: 1 / 7; } .grid-cont2::after { grid-row: 1 / 7; grid-column: 4 / 10; }

Firefox Grid Inspector (1/2)

Firefox Grid Inspector (2/2)

Flowing from fallbacks...

main { display: flex; flex-wrap: wrap; justify-content: space-between; } .title { width: 100%; } .card { flex: auto; min-width: 12em; height: 12em; }

...into feature queries

@supports (display:grid) { main { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); grid-auto-rows: 8em; } .title { width: initial; } .card { min-width: initial; height: initial; } @media screen and (max-width: 383px) { main { grid-template-rows: 3em repeat(auto-fill, 8em); } } @media screen and (min-aspect-ratio: 1/1) { main { grid-template-columns: repeat(4, minmax(25vw, 5em)); grid-template-rows: repeat(3, calc(100vh / 3)); grid-template-areas: "a b c ." "d e . f" "g . h i"; } } }
“They no longer ‘listen’ to circumstances; they ‘recite their circumstances‘.”
—Bruce Lee

Transforms

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

2D transform functions

rotate( <angle> ) Performs a 2D rotation by the angle specified around the element's origin
translate( <translation-value> [, <translation-value> ]? ) Performs a 2D translation in the specified X and Y directions
skew( <angle> [, <angle> ]? ) Performs a 2D skew by the angles specified
scale( <number> [, <number> ]? ) Performs a 2D scale operation by the scaling vector specified

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

Rethinking Web Design

Transforms browser support

CSS Shapes

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

Basic shapes

Lollipop marshmallow lemon drops jujubes muffin fruitcake bonbon. Muffin carrot cake bear claw sweet roll tiramisu chocolate jelly beans toffee sweet roll. Biscuit candy sweet sweet powder tart bear claw. Tiramisu jelly beans apple pie donut topping dessert lemon drops gummies halvah.

Dessert pie dragée fruitcake chocolate oat cake donut muffin. Chocolate lemon drops cake muffin. Bonbon lemon drops chocolate fruitcake jujubes chupa chups sesame snaps sesame snaps pudding. Pastry chocolate jelly beans cake wafer.

Donut jelly toffee macaroon macaroon. Cookie sesame snaps chupa chups. Lollipop jelly lollipop brownie pastry gummi bears.

Gummi bears apple pie chupa chups jelly pie halvah pastry sweet. Cookie dessert sweet roll icing cheesecake macaroon wafer cheesecake. Toffee lemon drops apple pie fruitcake sweet roll chocolate cake jelly bear claw jelly. Donut tiramisu chocolate cake sesame snaps marshmallow tootsie roll candy canes cheesecake cotton candy.

Cake powder croissant lollipop cotton candy tiramisu lollipop tiramisu. Cookie candy canes gummies jujubes bonbon fruitcake ice cream gingerbread. Marzipan toffee carrot cake marshmallow danish cupcake jelly-o.

Halvah brownie lollipop. Chocolate cake marshmallow croissant muffin macaroon pastry. Gummies danish soufflé muffin gingerbread. Lollipop jelly cake croissant sesame snaps macaroon.

Biscuit gummies tart gingerbread wafer jujubes sweet roll. Wafer oat cake carrot cake liquorice chocolate bar chocolate cake jelly-o. Pastry donut oat cake. Fruitcake candy apple pie cake tootsie roll cotton candy candy canes. Halvah halvah chocolate jelly-o macaroon.

Macaroon dessert sweet roll dragée candy. Sweet cheesecake lemon drops. Sweet tart chocolate cake candy canes powder cotton candy. Apple pie danish chocolate cake danish bonbon. Muffin soufflé topping carrot cake chocolate. Macaroon toffee chupa chups sesame snaps gummi bears.

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.

Writing-mode

Defines CSS features to support for various international writing modes

Vertical text

Halt and Catch Fire

“Computers aren't the thing. They're the thing that gets us to the thing.”

“How did we all get here today? The choices we made, the sheer force of our will, something like that? Here's another answer... the winds of fate. Random coincidence, some unseen hand just pushing us along. Destiny.”

What are you searching for?

Vertical headers

Vertical tags

Vertical navigation

CSS layout workshop by Rachel Andrew
https://thecssworkshop.com/
Jen Simmons' experimental layout lab
http://labs.jensimmons.com/

A long list of references

“True observation begins when one is devoid of set patterns, and freedom of expression occurs when one is beyond systems.”
—Bruce Lee

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing