Designing the Display Layer and Build Systems
- Build Systems
- Build systems are programs that transform source code written by engineers into executable programs that can be read by machines.
- Design Systems
- A design system is a collection of reusable components and clear standards intended to manage design at scale using components and patterns to build any number of applications.
Many times I’ve written that I am good at design at the display layer. “Display layer design” does not appear in many job descriptions. What does display layer design mean?
What I’m saying is that I am good at and care about CSS. I understand the CSS cascade. My combined CSS and HTML “layers” of website design are semantic and well formed.
I’ve built a library of component prototypes. I organize my CSS into SASS files so that I can quickly target or grab elements or components.
My semantic, organized code enhances my client website’s SEO ranking. Combined with good content, I’ve placed client websites on page one of Google. Many for many years.
I really care about CSS. I spend lots of time on CSS research and development. The last two or five years has seen an incredible surge in new CSS elements, values and declaration patterns. The new CSS properties are exciting. The bottom-line news for hiring managers is that “you might not need React for that”.
Creative managers recognize the importance of design systems. Design systems control and enhance company brand development and cohesion. Many popular technologies exist to abstract and document design systems. But where the design system rubber really hits the road is at the CSS display layer.
Build Systems
Part of programming and design is creating the tools to use while coding. I have many “build systems”, constructed in Node, that I use or experiment with. To build my code I use various build systems that compile SASS, PostCSS, and JavaScript. I use templates to break HTML pages into components. The components compile with data using JavaScript or PHP.
Recently I updated my OpenProps ShortStack build system. I also installed a CSS design system by Andy Bell called “CSS Project Boilerplate”. CSS Project Boilerplate combines CUBE methodology with Tailwind.
OpenProps Design System
OpenProps is a design system by Adam Argyle. OpenProps breaks CSS elements and declarations down into elemental custom properties. Custom properties are equivalent to design tokens.
Adam Argyle offers a slew of build systems along with his OpenProps design system library. A variety of build systems are available. Adam’s build systems combine OpenProps with React, or Vue, or Vite, or PHP. I happen to like ShortStack, which uses Rollup, because it is simple. I focus mainly on CSS and HTML design.
The ShortStack build on Adam’s StackBlitz Collections site is out of date. I fixed the problem. Rollup 3 and the rollup-terser-plugin were breaking the build system.
Adam Argyle installs his OpenProps build systems using an NPM module with minified CSS. I inserted the un-minified CSS src files from Adam Argyle’s OpenProps Github repo into my fork. They are organized by category. That way I am able to read the CSS while I work.
I posted my modified ShortStack OpenProps to my Github page.
Now that I have it working I am exploring the abundance of custom properties that Adam has put together. It is an exhaustive array.
I will build webpages and prototypes using OpenProps. I plan to learn from Adam’s design system. I will incorporate some of it into my own. Some of Adam’s custom property names are verbose. I prefer short names.
Andy Bell’s CSS Project Boilerplate
Andy Bell published an article recently. The article, A CSS project boilerplate, introduces his build system for CSS. Andy Bell, like Adam Argyle, is an important design maven. I am interested in anything he does. I downloaded Andy Bell’s boilerplate, installed and tested it.
Some interesting and surprising facts about Andy Bell’s CSS Project Boilerplate system:
First, Andy Bell is including a subset of Tailwind. Sacrilege! Andy says that he has built a JavaScript configuration that weeds out most of the Tailwind code. Actually what I see is a rather small amount of CSS with some few custom properties. I may not have the Tailwind portion working yet.
Second, The CSS Project Boilerplate has CSS declaration patterns derived from his CUBE design methodology. The code is well documented with comments.
Andy Bell and Heydon Pickering have co-published a website called EveryLayout. It consists of a series of CSS and HTML component patterns.
So Andy’s CSS Project Boilerplate consists of a subset of Tailwind in service to his CUBE methodology. It is documented with excerpts from Every Layout. Very cool.
Andy Bell’s CSS Project Boilerplate build system only processes CSS. I plan to add NPM module functions to copy and post HTML files to the distribution folder.
I am still exploring Andy Bell’s CSS Project Boilerplate. I see the CUBE styles exported but not the Tailwind styles. The Tailwind styles are in JSON. I may need to work on the configuration.
In parallel with working on the CSS Project Boilerplate, I’ve happened upon numerous articles about Tailwind. Tailwind, although popular with JavaScript developers, is controversial. I will explore issues with Tailwind in a future article.
Other popular design system libraries include Bootstrap and Material Design. Major companies such as Salesforce and governments including the UK and the US have their own branded design systems.
I am keen to explore and familiarize myself with others while I build and refine my own.