basic questions

[neilmcguigan]

1. what is --ly-brand ? what does it represent?
2. why simple-layout / layout-simple? (layout-simple in docs, simple-layout in code)
3. how do I actually override variables? please provide an example

[lowlighter]

1. what is --ly-brand ? what does it represent?

All --ly-* are for layout packages
There's several of them, mainly:

• --ly-brand: Color for "branding"
• --ly-bg-brand: Background color for "branding"
• --ly-header-size: Size of top header bar
• --ly-aside-size-small: Size of the <aside> menu on small screen

2. why simple-layout / layout-simple? (layout-simple in docs, simple-layout in code)

The code is refering to layout-simple because it was thought to eventually offer other layouts, which would all following layout-* by convention to make it more clear that users are dealing with layouts.

The doc is referring to it as "Simple layout" simply because it's the anglicized name

3. how do I actually override variables? please provide an example

These are just regular native CSS variables, so you can redefine variables on any rules. CSS specificity still applies though, so you need to be more specific than the @root ruleset. You could also use !important if you want to entirely bypass the specificity.

For example:

:root {
  --accent: red !important;
}

You can also use the Custom builder to provide your own set of variables directly (note that this one might be buggy currently #16 I haven't had time to investigate yet), but you could also just not include the @root package and provide your own css variables similarly to what was described above