HTML

html starting template

This is a starter template for html pages based on the basis framework b.css and b.js.

Colors

Inside the style section, the colors for the html page can be defined, by overwriting the default color variables of the b.css library. The color variables are defined throughoutin the b.css file, e. g. --color-text, --color-bg-body. It is recommended to define all colors in one place, i. e. in the style secton of your html (here) or in a dedicated css file using the overwriting schema below

You can then define / overwrite the colors to your choice. Best practice is to choose colors form a harmonized color palette, so you page looks consistent. b.css provies the tailwind colors https://tailwindcss.com/docs/customizing-colors using the --color-*tailwindName* schema, e. g. --color-zinc-950 or --color-cyan-100, but there are many more.

By default it is recommened to use the colors defiend for the body.light and body.dark class. You can also create your custom theme.

Body

In the body we only define the theme, which is a dark theme. The main block contains the major content of the site

You can click on the options below to change the theme or the main width of THIS page, not how the HTML code updates.

Selection Pills

Selection Pills are used to select a value from a list. There are two types of selection pills supported radio and checkbox. They were already used in the form to select the theme and main width above.

You can click on the single pill (technically a html checkbox) or multi pill (technically a html radio). The color change is pure css. You can attach your own javascript on change event (here: dummy_I_DO_NOTHING)

To get the values of the pills you can use the getFormValueSimple and getFormValue functions or use the corresponding javascript code. Note, that getFormValue needs the form id and returns an object whereas getFormValueSimple needs the input name and returns a string.

Try it!. Click on the pills in this section, call one of the following functions and see how the result changes.