YeastCSS

YeastCSS is an opinionated CSS framework to build beautiful and customisable web pages. Similarly as when cooking, yeast is not here to perform everything but enabling to another level.

Goals and Non-Goals

• Writing a div soup should never be required to have a a beautiful page
• It should be easy enough for using with a static web site generator, but modular enough for building more complex app
• Do not micro-manage the user-agent: web browsers knows the best how to display content responsively
• HTML knows it better: writing semantic HTML makes accessibility easier and pages more performant
• Configuration is possible, but not everything is configurable
• Utility classes allow to tuning, but are not the core of builing pages
• Writing custom CSS could be required to get the exact wished complex page or component layout
• Should work with all directions: left-to-right top-bottom is not the only writing that exists (logical properties are always used)

Customisation

YeastCSS is customisable using CSS variables. Please mind the British spelling. Those variables must be declared after YeastCSS stylesheets or they will not take precedence over the default values.

• --accent: colour used throughout the framework for building a coherent theme
• --success: colour used when an element is marked with the class success
• --warning: colour used when an element is marked with the class warning
• --danger: colour used when an element is marked with the class danger
• --focus-coefficient: used coefficient when calculating the new colour when an element is focused (or hovered); current implementation is not a coefficient but a substraction, and only alters the luminance
• --interact-coefficient: used coefficient when calculating the new colour when an element is interacted with; current implementation is not a coefficient but a substraction, and only alters the luminance
• --main-colour: the colour used for font and elements' borders
• --main-colour-contrasted: like --main-colour, but used when it is not on a regular --background-colour
• --background-colour: the colour used for background
• --table-stripe: the colour used for striping table rows
• --border-style: defines the border style throughout the whole framework
• --input-border-style: defines input border radius
• --input-border-width: defines input border width
• --input-padding: defines how much padding is applied to input
• --input-font-size: defines the input font size

Other variables should not be touched, or at least caution should be applied.

Honouring the user-agent theme preference is not implemented by default but could be easily implemented to YeastCSS user discretion. First option is to use light-dark(), or to use media-queries:

@media (prefers-color-scheme: dark) {
 --background-colour: #282646;
 --main-colour: #f6f6f6;
 --main-colour-contrasted: #a0a0a0;
}

Important Notice: YeastCSS has issues and a dark theme will look bad (e.g. the main colour contrasted)

Adding It to a Project

• Vendoring it (download the stylesheets and save those in project)
• Using it as a Git Submodule

Licence

Not yet defined (aka All Rights Reserved).