diff --git a/src/docs/css.md b/src/docs/css.md index 2f7158d..66d06ea 100644 --- a/src/docs/css.md +++ b/src/docs/css.md @@ -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/). diff --git a/src/pages/about.md b/src/pages/about.md index 2c7f5c5..ced613b 100644 --- a/src/pages/about.md +++ b/src/pages/about.md @@ -6,14 +6,17 @@ layout: page youtube: true --- -Based on the [companion website](https://buildexcellentwebsit.es/) of Andy Bell's talk 'Be the browser’s 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 browser’s 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 diff --git a/src/posts/2023-11-30-tailwind.md b/src/posts/2023-11-30-tailwind.md index b209799..7f08de9 100644 --- a/src/posts/2023-11-30-tailwind.md +++ b/src/posts/2023-11-30-tailwind.md @@ -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).