Mascot
Almond.CSS' mascot: Al, the Chipmunk.
Almond.CSS can be customized by indicating some values for color, lightness, font sizes and weights, etc.
Update the table below to see live how each of the properties affect the site, and make it your own (for example, change the hue value). Then, you can copy the resulting code and place it on top of your CSS or HTML file and it will apply automatically to your site!
Important: this demo requires JavaScript enabled.
| Property | Description | Default value | Current value |
|---|---|---|---|
--primaryH |
Primary color hue value. This value should be between 0 and 360. Primary is the color of the main elements (e.g. buttons, titles, etc.) | 210 | |
--primaryS |
Primary color saturation value (how vibrant the color wil be). This value should be a percentage 0-100. | 50% | |
--primaryL |
Primary color lightness value (how light/dark it will be). This value should be a percentage 0-100. | 40% | |
--primary-bg |
Primary color background (used as background in certain elements like secondary buttons). This value should be a color. | white | |
--secondaryH |
Secondary color hue value. This value should be between 0 and 360. Secondary is the color of the text and other elements. | 0 | |
--secondaryS |
Secondary color saturation value (how vibrant the color wil be). This value should be a percentage 0-100. | 0% | |
--secondaryL |
Secondary color lightness value (how light/dark it will be). This value should be a percentage 0-100. | 13% | |
--secondary-bg |
Secondary color background (used as background in certain elements). This value should be a color. | white | |
--font-family |
Font family to be used. The value should be a list of font names. | Helvetica, Arial, sans-serif | |
--font-size-root |
The size of the font at the root level. | 16px | |
--font-weight-thin |
The font weight for thin text (and for some elements). This should be a value 100-900. | 100 | |
--font-weight-normal |
The font weight for regular text (and other elements). This should be a value 100-900. | 200 | |
--font-weight-bold |
The font weight for bold text (and for some elements). This should be a value 100-900. | 400 | |
--font-weight-bolder |
The font weight for bolder text (and for some elements). This should be a value 100-900. | 700 | |
--line-height |
The size for the line-height. This is an important value for accessibility. | 1.75rem | |
--heading-margin |
The margins applied to the headings (h1-6). This value should be a set of margins. | 1.5rem 0 1rem | |
--border-radius |
The amount of radius (roundness) applied to the border of some elements (e.g. buttons) | 2px |
Copy the following code at the top of your CSS, or in a style on the site's <head>:
Almond.CSS' mascot: Al, the Chipmunk.