CSS Custom variables and the Web Storage API to change a webpage’s format and hues. CSS variables, regularly known as CSS factors, have been relentlessly advancing into programs for quite a while. With the arrival of Microsoft Edge 15 back in March, they are currently upheld by all significant present day programs.

This implies for ventures that aren’t troubled by supporting heritage programs, for example, Internet Explorer, CSS variables can be considered in every practical sense safe to utilize.

A manual for composing better CSS

Numerous designers as of now utilize factors with preprocessors, for example, Sass or Less as a methods for decreasing code redundancy. Local CSS factors work in to a great extent a similar way, yet don’t require any extra form step, course like a general CSS variables, and above all, are accessible at runtime.

These advantages give local CSS variables an edge over their preprocessor kin, and opens the entryway for designers to do a considerable measure of fascinating things with significantly less code.

In this instructional exercise, we’ll be investigating how we can utilize CSS variables to actualize site theming into a taunt web application called NoteApp. This will include composing CSS and JavaScript to enable the client to change the shading plan and flip the measure of segments appeared. We’ll at that point use the Web Storage API to ensure any progressions are put something aside for future sessions.

Get the instructional exercise records

In the first place things in the first place, download the task records from Web Designer’s FileSilo. To do this, go to FileSilo, select Free Stuff and Free Content by the instructional exercise. Note: First time clients should enlist to utilize FileSilo.

Set up the workspace

In the ‘/site layout’ index you’ll locate the static NoteApp page in which we’ll be actualizing site theming utilizing CSS factors and the Web Storage API. Open the registry in your favored word processor.

Set up our CSS factors

In ‘main.css’, you’ll discover a great part of the undertaking’s CSS. At the best, make a piece focusing on the “root” pseudo-class. Inside it characterize factors like in the piece beneath. This root piece contains worldwide factors that will course down through our template like any customary CSS property.

 

:root {
  --primary: #2F353E;
  --secondary: #2B9BCA;
  --tertiary: #F3583F;
  --quaternary: #E0E1E2;
  --quinary: #FFFFFF;
}

Replace colours with variables

Go through the stylesheet, either manually or using find/replace, and swap any static colour hex codes with their corresponding variable from the root block. To do this, use the var function and pass the variable’s name. This tells the browser to reference that variable’s value. For example:

.c-header {
  background-color:var(--primary);
  color:var(--quinary);
}

Locate inline SVG for icons

Open ‘index.html‘ and one of the first things you notice is a large SVG element. This contains the paths for all the page’s icons, each wrapped in a symbol element, and given a unique ID. These symbols are then referenced where needed with the ‘use‘ element, allowing for the reuse of icons without any duplication of SVG code.

Add CSS variables to the SVG

One benefit of using inline SVG instead of a .SVG file is that CSS can access its internal structure. This means so can our CSS variables (Except Edge, at the time of writing). In ‘index.html‘, replace the SVG’s style block with the snippet below. Now each of the SVG’s colours are linked to the values of our CSS variables.

<style>
  .primary {
  fill:var(—primary, #2F353E);
  }
  .secondary {
  fill:var(—secondary, #2B9BCA);
  }
</style>

Create a columns variable

Create a new variable in the root block, call it ‘columns‘, and give it a value of 3. This should match the default value of the ‘Columns‘ UI component on the page. When functional, this component will toggle the number of columns.

10 Microsoft tools That Change AI 2018

:root {
  --primary: #2F353E;
  --secondary: #2B9BCA;
  --tertiary: #F3583F;
  --quaternary: #E0E1E2;
  --quinary: #FFFFFF;
  --columns: 3;
}

Implement a columns toggle

Using our new columns variable and the calc() function, we’ll now calculate how wide each note component should be in order to create the correct number of columns. For example, if columns is set to 4, each note should have a width of 25%.

.c-note {
  width:calc(100% / var(--columns));
}

Add JS classes and data attributes

When applying JS behaviour to a DOM element, hook into it via a class with a JS prefix. This decouples the functional aspects of an element from CSS ones. Let’s add a ‘js-update-variable‘ class to all colour and radio inputs as well as a ‘data-attribute‘ referencing the corresponding variable to update.

<input type="color" value="#2F353E" 
class="js-update-variable u-hidden-visually" 
data-variable="primary">

Add JS to update CSS variables

Open ‘main.js‘ and add the snippet below. This loops through all our ‘js-update-variable‘ inputs and adds logic, so on change, the variable referenced in its data-variable attribute is updated with the inputs value. The colour swatches and column toggle should now be working!

var varTrig = document
.querySelectorAll(".js-update-variable");
for(var i = 0; i < varTrig.length; i++){
varTrig[i]
.addEventListener("change", function(){
document.documentElement.style
.setProperty("--" + this.dataset.variable, 
this.value);
});
}

Attach a JS class to the Save button

It makes sense to only save the user’s colour scheme when they click the save button, as that allows them to experiment with themes as much as they’d like without automatically overriding the current one. To start, add ‘.js-save-colours‘ to the ‘Save‘ button to function as our JS hook.

<button class="c-button js-save-colours"
data-modal="js-modal" data-modal
-content="js-colours-modal-content">
Save</button>

Create colours array

Back in ‘main.js‘, declare a new variable called ‘colours‘ and assign to it a new array containing all the colour variables we want to be saved once the save button has been clicked.

var colours = [
  "primary",
  "secondary",
  "tertiary",
  "quaternary",
  "quinary"
];

Build Save button event listener

Below the colours array, create a click event listener for the ‘js-save-colours‘ class which we previously added to the Save button. Inside it create a new variable called ‘htmlStyles‘ and assign it the computed properties of the root HTML element. We will use this to access our CSS variables.

document.querySelector(".js-save-colours")
.addEventListener("click", function() {
var htmlStyles = window
.getComputedStyle(document
.querySelector("html")),
}),

Record CSS colour variables

Next, within the event listener, create a new variable called ‘coloursToSave‘ and assign it an empty object. Next, create a FOR loop using the ‘colours‘ array from step 11. Within it, we’ll add a complete key/value record of the variables mentioned in the ‘colours‘ array to the ‘coloursToSave‘ object.

array to the 'coloursToSave' object.
coloursToSave = new Object;
for(var i = 0; i < colours.length; i++) {
coloursToSave[colours[i]] = htmlStyles
.getPropertyValue("--" + colours[i]);
}

Send coloursToSave to localStorage

Now we have all the colour variables saved in ‘coloursToSave‘, we’ll send it to a component of the Web Storage API called localStorage. This is essentially an object that persists across sessions. We can store other objects within it using its ‘setItem()‘ method. Let’s send it our ‘coloursToSave‘ object.

localStorage.setItem("colours",
JSON.stringify(coloursToSave));

Add a JS class to Columns

In addition to colours, we also want to make sure that our chosen columns number also persists across sessions. The first step towards this would be to add ‘js-update-columns‘ to all radio inputs within the columns component.

<input type="radio" name="columns" class
="js-update-variable js-update-columns
u-hidden-visually" value="1"
data-variable="columns">

Send columns to localStorage

For each ‘js-update-columns‘, we’ll next assign event listeners to watch for changes. On detection, we’ll then send the current value of the ‘columns‘ variable to localStorage, again using its ‘setItem()‘ method. Unlike with colours, we don’t need to stringify this value as it’s not an object.

var colInputs = document
.querySelectorAll(".js-update-columns");
for(var i = 0; i < colInputs; i++) {
colInputs[i].addEventListener("change",
function(){ var htmlStyles = window
.getComputedStyle(document
.querySelector("html"));
localStorage.setItem("columns", 
htmlStyles.getPropertyValue("--columns"));
});}

Handle new sessions

If the user returns after previously choosing a colour and column preference, we need to build logic so this saved data is turned back into CSS variables. The first step is to define a ‘DOMContentLoaded‘ event listener, and then an ‘if‘ statement to check for any saved data in localStorage using its ‘getItem()‘ method.

document.addEventListener
("DOMContentLoaded",function() {
if(localStorage.getItem("colours")) {
}
if(localStorage.getItem("columns")) {
}
});

Amending colour variables

In the colours ‘if‘ statement, create a new variable called ‘savedColours‘ and assign it the value of a parsed colours object from localStorage. Using a FOR IN loop with ‘savedColours‘, grab each colour key/value pair and append it to the root HTML element as a CSS variable.

var savedColours = JSON.parse
(localStorage.getItem("colours"));
for(colour in savedColours){
document.documentElement.style.setProperty
("--" + colour, savedColours[colour]); }

Gather column variables data

Before we can amend the columns variable, we have to first grab references to the saved data in localStorage and also the radio inputs within the ‘Columns‘ component. The latter is so we can updates its state to make sure the correct number is pre-selected.

var columns = localStorage
.getItem("columns"),
columnTriggers = document.
querySelectorAll(".js-update-columns");

Amend variable and state

Finally, we’ll update the columns CSS variable with its saved localStorage counterpart and set the checked attribute of the relevant radio input within the ‘Columns‘ component to true. The ‘columns – 1‘ is to compensate for the fact that the columns NodeList is zero-based.

document.documentElement.style
.setProperty("--columns", columns);
columnTriggers[columns - 1].checked = true