Fosbury

Minimal CSS scaffolding with overridable, sensible defaults

Quickstart

Install the library with your favorite package manager:

pnpm install fosbury # or npm, or yarn...

And then use it with either javascript or CSS

import "fasbury";

@import "fasbury";

Usage

The main way to use this library is by using the CSS variables for color. The main available variables are:

--base
--primary
--secondary
--accent

They all have focus and content variants (e.g.: --base-content, --primary-focus).

For more info check the docs

Themes

Fosbury comes with a few themes out of the box. You can also make your own theme

Here you can test some of the builtin themes. In fact, a theme is so minimal that I can just show you the entire file lol

:root {
	/* Colors */
	--base: hsl(180, 2%, 12%);
	--base-focus: hsl(180, 2%, 14%);
	--base-content: hsl(0, 3%, 88%);
	
	--primary: hsl(206, 61%, 76%);
	--primary-focus: hsl(206, 61%, 86%);
	--primary-content: hsl(264, 100%, 10%);

	--secondary: hsl(206, 61%, 76%);
	--secondary-focus: hsl(206, 61%, 86%);
	--secondary-content: hsl(264, 100%, 10%);

	--accent: hsl(49, 100%, 79%);
	--accent-focus: hsl(49, 100%, 89%);
	--accent-content: hsl(0, 0%, 10%);

	--warning: hsl(49, 100%, 79%);
	--warning-content: hsl(0, 0%, 10%);

	--error: hsl(0, 100%, 79%);
	--error-content: hsl(0, 0%, 10%);

	/* Other stuff */
	--border-radius: 3px;
	--max-main-column-width: 720px;
}

@media (prefers-color-scheme: light) {
	:root {
		--base: hsl(180, 100%, 98%);
		--base-focus: hsl(180, 24%, 82%);
		--base-content: hsl(0, 0%, 10%);
		
		--primary: hsl(206, 61%, 76%);
		--primary-focus: hsl(206, 61%, 86%);
		--primary-content: hsl(264, 100%, 10%);

		--accent: hsl(48, 100%, 23%);
		--accent-focus: hsl(49, 100%, 89%);
		--accent-content: hsl(0, 0%, 10%);
	}
}