css_variables() — Thesis Skin API Method

The final step of adding Design Options to your Skin is to modify the Skin CSS based on the currently-selected Design Options. While there are various ways to do this, we recommend the following two-part approach:

1. Use CSS Variables in your Thesis Skin CSS
2. Use the css_variables() method to modify CSS Variables based on the currently-selected Design Options (accessible via the $design parameter)

The premise behind the css_variables() method is simple—just return an associative array of CSS Variable references and their new values, and then Thesis will generate a stylesheet with this new data whenever Design Options are saved:

public function css_variables() {
	return array(
		'variable_reference_1' => 'new value_1',
		'variable_reference_2' => 'new value_2',
		'variable_reference_3' => 'new value_3');
}

Using Thesis Skin API Objects to Manipulate CSS Variables

To make life easier, you’ll want to reference parts of the Thesis Skin API when manipulating CSS Variables inside your css_variables() method.

Whether you’re substituting font stacks, calculating typography and spacing, or setting CSS properties, the Thesis Skin API will reduce both mistakes and the amount of code needed to get the results you want.

For example, the Classic Responsive Skin uses the following parts of the Thesis Skin API:

• $color — color tools
• $css_tools — CSS tools
• $fonts — fonts controller
• $typography — typography and spacing tools

Go deeper! For an in-depth look at CSS Variable manipulation, check out the Classic Responsive Skin’s skin.php file and, specifically, the css_variables() method.