39 lines
No EOL
2.2 KiB
Markdown
39 lines
No EOL
2.2 KiB
Markdown
---
|
|
title: CSS
|
|
---
|
|
|
|
Add and delete your globally available custom block stylesheets in `src/assets/css/global/blocks/*.css`.
|
|
|
|
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/).
|
|
|
|
**New in version 3.0: Inline CSS and bundles**
|
|
|
|
The main CSS file is now inline in production to improve performance, see `.src/_includes/head/css-inline.njk`.
|
|
|
|
You can add per-page or component bundles of CSS. Instead of adding your CSS file to the `src/assets/css/global/blocks/` directory, you can place them in `src/assets/css/bundle/`. All CSS files in there will be stored alongside `global.css` in `.src/_includes/css/`. You can now include them in the "inline" bundle only on pages or components where you need them:
|
|
|
|
{% raw %}
|
|
|
|
```jinja2
|
|
{% css "inline" %}
|
|
{% include "css/your-stylesheet.css" %}
|
|
{% endcss %}
|
|
```
|
|
|
|
{% endraw %}
|
|
|
|
**New in version 3.0: Component CSS**
|
|
|
|
All CSS files placed in `src/assets/css/components/` will be sent to the output folder, where components can reference them: `/assets/css/components/*.css`.
|
|
|
|
**New in version 3.0: Debugging CSS**
|
|
|
|
In `src/assets/css/global.css` you can decomment `@import-glob 'tests/*.css';` to include CSS for debugging.
|
|
|
|
It makes visible when your code[ wrapped in `<is-land>` elements](https://github.com/11ty/is-land) is being hydrated, where things might overflow and many other warnings and errors [that Heydon Pickering came up with](https://heydonworks.com/article/testing-html-with-modern-css/).
|
|
|
|
**New in version 4.0: Cascade layers**
|
|
|
|
We now use cascade layers! Up until now, I used the `:where` pseudo-class to create low specificity selectors for the reset and compositions. [Mayank inspired me](https://mayank.co/blog/css-reset-layer/) to change to cascade layers. We have two major bundles of CSS: everything included in "global" In `src/assets/css/global/global.css` is now organized in cascade layers. The "local" bundle is for per-page or component CSS, and does not use cascade layers - it has thus a higher specificity, independent of any selector specificity in the global CSS. |