showVariables.mov
This repository contains a JavaScript for creating HTML cards with information extracted from CSS variables :root
Documentation.
- Creating HTML cards from CSS variables
- Handling various categories of CSS variables (color, font-family, font-weight, font-size, border, shadow)
- Adapting text and styles according to CSS variables
- Displaying cards within an HTML container
- Clone the repository
- Open the
index.html
file in your browser - Cards with the information from the CSS variables will be generated automatically
- Add your
:root
palette in root.css & modify root.json
The main file of this project is script.js. Here's an overview of what each function does in this file:
createCard(variable)
: Creates an HTML card with information extracted from a CSS variable.colorIsLight(color)
: Checks if a color is light or dark.fetch("root.json")
: Fetches JSON data containing categories and CSS variables from an external file.
The root.json
file contains information about categories and CSS variables. Here's an example structure for this file:
{
"categories": [
{
"title": "Colors",
"variables": [
{ "name": "--primary-color", "type": "color" }
]
}
]
}