mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
38 lines
1.6 KiB
HTML
38 lines
1.6 KiB
HTML
---
|
|
title: Customize with CSS Variables
|
|
layout: docs
|
|
theme: customize
|
|
doc-tab: customize
|
|
doc-subtab: with-css-variables
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- customize
|
|
- customize-with-css-variables
|
|
---
|
|
|
|
{% capture markdown %}
|
|
Bulma makes wide use of **CSS Variables** (also called CSS custom properties). Read more about them on the [dedicated page]({{ site.data.links.by_id['features-css-variables'].path }}).
|
|
{% endcapture %}
|
|
|
|
{% include markdown.html content=markdown %}
|
|
|
|
{% capture markdown %}
|
|
You can change the current Bulma simply by **opening your developer console** and changing a CSS variable's value.
|
|
|
|
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
|
|
|
|
To test out this CSS method, simply follow these steps:
|
|
|
|
<table class="table is-bordered">
|
|
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
|
|
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
|
|
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
|
|
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}
|
|
</table>
|
|
{% endcapture %}
|
|
|
|
{% include docs/elements/anchor.html name="Customizing in the browser" %}
|
|
|
|
{% include markdown.html content=markdown %}
|