2.6: Using custom variables in your CSS

Custom variables in CSS is a special feature built in to 23 Video. Using this feature, developers can turn simple designs into customizable themes where ordinary users can modify logos, colours, fonts, sizes a much more in a structured fashion.

Custom variables in CSS

The purpose of custom variables is best described with an example: When styling a 23 Video site (or any web site in fact) designers will usually hard-code colors, fonts, graphics etc. directly in to the stylesheet:

body {background-color:#a1ca9c; font-family:Helvetica,Arial,sans-serif;}
a {color:#214b1c;}

This works well when a theme is used only once; but whenever you want a design to be reused, you will want users to change the colors and font without writing CSS themselves. For example by selecting a color with a color picker and a font from a list. This is the purpose of custom variables.

The syntax of a variable declaration is similar to standard CSS, but includes % around variable names:

%primary-color% {
  type: color;
  name: 'Main color';
  description: 'Select the color that best matches your brand';
  default: #439639;
}
%font% {
  type: font;
  name: 'Font';
  default: Helvetica,Arial,sans-serif;
}

The same natation with % is used to insert the value of a variable:

body {background-color:%primary-color+50%; font-family:%font%;}
a {color:%primary-color-50%;}

This creates a new customization options under Design → Customize:

And finally, it creates a dynamic piece of CSS which is used whenever the 23 Video site is loaded:

body {background-color:#87abce; font-family:"Comic Sans MS", cursive;}
a {color:#82b4f;}

In this example, we're letting the users select a color and a font − but the same approach is used to let users upload their own images files, select from predefined lists or input their own free-form text.

Types of variables

Every variable has a type which controls how it is configured and used in the CSS.

Type	Decription	Required properties
color	Let the user select a color width a color picker − or input a RGB or hex color. Example: %background-color% { name: 'Site background color'; type: color; default: #fafafa; } body {background-color:%background-color%;} Result:
graphic	Let the user upload an image file which is then rescaled, converted and made available as a ressource file. Example: %logo-image% { name: 'Logo'; type: graphic; filename: logo.png; min-width: 30px; max-width: 200px; } a#logo {background-image:%logo-image%;} /* or the equivalent...*/ a#logo {background-image:url('/files/logo.png');} Result:	filename
font	Let the user select a font to use. Example: %font% { name: 'Site font'; type: font; default: Helvetica, Arial, sans-serif; } body {font-family:%font%;} Result:
option	Let the user select from a list of specified options. Example: %footer-text-align% { name: 'Text alignment in footer'; type: option; default: left; options: left, right, center; } #footer {text-align:%footer-text-align%;} Result:	options
text	Let the user input a piece of text. Example: %import-stylesheet% { name: 'External stylesheet'; description: "Full URL to external stylesheet"; type: text; } %paragraph-margin% { type: text; name: 'Margin on paragraphs'; description: "Set the margin with pixel, i.e. '6px'."; default: 10px; } @import url('%import-stylesheet%'); p {margin:%paragraph-margin% 0px;} Result:

Variable properties

Each variable is set up with a number of properties controlling how a variable behaves and how it is configured. For example, any variable can have a name, a description and a default value − and developers can specify its type, i.e. if it's a graphic file or a color.

Including colour variation

You might have noticed how the first example included a strange notation for the page's background color, %primary-color+50%. This statement lets you use different shades of the same color:

%my-color% {
  type: color;
  name: 'A color';
  default: red;
}
a {color: %my-color+12%;}   /* the chosen color blended with 12% white */
a {color: %my-color+50%;}   /* the chosen color blended with 50% white */
a {color: %my-color-20%;}   /* the chosen color blended with 20% black */
a {color: %my-color-100%;}  /* 100% black */
a {color: %my-color+100%;}  /* 100% white */

You can use any integer value from -100 to +100 and the shading will look like this: