add reference to Andy's new article

This commit is contained in:
madrilene 2024-02-13 13:34:16 +01:00
parent 31b95e6564
commit 9679608437
3 changed files with 15 additions and 3 deletions

View file

@ -5,3 +5,6 @@ title: CSS
Add and delete your custom block stylesheets in `src/assets/css/blocks/*.css`, they get pulled in your output stylesheet automatically.
The methodology used is [CUBE CSS.](https://cube.fyi/)
The CSS system of this starter was invented by Andy Bell.
If you want to know exactly how it all works, and have a look at the (further elaborated) original, [read this article on piccalil.li](https://piccalil.li/blog/a-css-project-boilerplate/).

View file

@ -6,14 +6,17 @@ layout: page
youtube: true
---
Based on the [companion website](https://buildexcellentwebsit.es/) of Andy Bell's talk 'Be the browsers mentor, not its micromanager'. It takes over a core functionality: Using Tailwind CSS to generate CSS variables based on design tokens.
This starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template.
Like buildexcellentwebsit.es, this starter uses modern CSS, fluid type & space, flexible Layouts and Progressive Enhancement, wrapped in a basic template, ideal for personal websites and other small projects.
Based on the CSS boilerplate by Andy Bell and inspired by Andy's talk **'Be the browsers mentor, not its micromanager'**.
If you want to know exactly how it all works, [read this article on piccalil.li](https://piccalil.li/blog/a-css-project-boilerplate/).
The aim is to spread the idea and use of this _excellent_ workflow. To work with it efficiently you should be familiar with [cube.fyi](https://cube.fyi/), [utopia.fyi](https://utopia.fyi/) and [every-layout.dev](https://every-layout.dev/).
- Find out more on https://buildexcellentwebsit.es/.
- buildexcellentwebsit.es
- Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites
- Study the [original CSS boilerplate](https://github.com/Set-Creative-Studio/cube-boilerplate/tree/main)
## Watch the talk

View file

@ -4,6 +4,12 @@ description: 'We are using Tailwinds "engine" to generate utility classes on dem
date: 2023-11-30
---
**Update February 2024:**
The CSS system of this starter was invented by Andy Bell.
I wrote the following explanation quite quickly after hearing several times that people are confused about normal Tailwind CSS classes not working. In the meantime, Andy has published a [much better and much more detailed explanation](https://piccalil.li/blog/a-css-project-boilerplate/).
---
We are using Tailwinds "engine" to generate utility classes on demand, based on our design tokens.
If you have a look at the [tailwind.config.js](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js), you can see how that is done. For example, we are [deactivating Tailwinds default reset](https://github.com/madrilene/eleventy-excellent/blob/main/tailwind.config.js#L67C1-L69C5).