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. 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 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 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/). 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 - 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 ## 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 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. 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). 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).