Introduction
Welcome to the tech section of the Lookbook! In here, we go through some must-know things when working with the Lookbook.
tldr; please read the Tailwind docs before getting started with the Lookbook CSS:
Functional CSS
The Lookbook uses a style of CSS coding nicknamed "Functional CSS". The "Functional" part in it comes from Functional Programming (FP), where the focus is composability and immutability.
Please read "Functional CSS" by Jon Gold for a short primer on the terminology.
What problem does functional CSS solve? Anybody who's been working with CSS at scale during the last decade is aware of the burden involved in maintaining a large CSS codebase. A codebase that might need to scale across several services, include multiple authors, be used in various environments and devices.
Please read "CSS and Scalability" by Adam Morse for an ideologic essay about these subjects.
Tailwind
You might see references to "Tailwind" throughout the Lookbook. Tailwind is a "utility-first CSS framework for rapidly building custom designs". It builds on the principles of functional CSS, and lets us generate functional CSS based on a configuration file.
This is incredibly powerful. Tailwind will generate a bunch of utility classes – super small and composable – based on config values we feed to it. Those config values are managed in a Javascript file. The deliverable is a drop-in lookbook.css file which includes everything needed for a great web frontend foundation in a Lookback product.
If you're gonna work directly with the Lookbook CSS, please read the Tailwind docs! We won't cover the nitty gritty of the utility classes on this site.
On this site
This site includes two things:
- Guidelines and demos of Lookback's current UI language
- Tech specs and docs on how to work with the UI language in web code