Prathik S Shetty
Nov 26, 2017 · 5 min read

How to create bootstrap like library with minimal code.

Lets say you are given this task of creating the following buttons

.button {
padding: 10px;
border: 1px; solid;
border-radius: 5px;
....
....
}.button-primary {
background: blue;
color: white;
border-color: darkblue;
}
.button-secondary {
background: grey;
color: white;
border-color: darkgrey;
}
....
....
....

I have coded for two but you can do for all of the above buttons.

You complete it and show the output to your manager, he is happy. You show it to your UX guy, he is happy. But, Suddenly he realises there is no hover state, no active state, no disabled state. Now what? He gives you all those colors and you go back and write the css.

.button-primary:hover {
background: darkblue;
color: lightgrey;
border-color: blue;
}
.button-secondary:hover {
background: darkgrey;
color: lightgrey;
border-color: grey;
}
.....
.....
.button-primary:active {
background: navy;
}
.button-secondary:active {
background: slategray;
}
.....
.....

Similarly apply for disabled state and for all other buttons. How do you use it

<button type="button" class="button button-primary">Primary</button>

One component done. You realise that managing this is difficult. So you use a pre-processor like sass.

$primary-background-color: blue;
$primary-active-color: darkblue;
$primary-foreground-color: white;
$primary-active-color: navy;
.button-primary {
background: $primary-background-color;
color: $primary-foreground-color;
border-color: $primary-active-color;
}
.button-primary:active {
background: $primary-active-color;
}
....
....

You go back to the manager and the UX guy both are cool with it. You commit it and you are above to deploy. The dev ops guy asks so many Kb for just button. But he is the dev ops guy and your answer of ” its needed” shuts him up.

This is what we have been doing all this while. Any library you pick does this. But there is a better way to do it. Enter CSS Variables aka custom properties.

Till now there has been no support for this. Of-late all new web features have taken inspiration from popular libraries or tool. Like arrow functions from Coffeescript, document.querySelector() from jQuery. Similarly W3C authors noticed the use of variables from pre processors and thought it’s a good idea to add it.

To use Custom Properties in css just define it as a key : value

html {
primary-color: blue
}
.button-primary {
background: var(primary-color);
}

As simple as that no $ like sass. This could be confusing so as a good practice kindly use double dash before the variable.

html {
--primary-color: blue
}
.button-primary {
background: var(--primary-color);
}

Now the Custom Properties are separated from built in properties. Custom properties have several advantages.

1. You can define Custom Property in any CSS selector rule

You can define a custom property in any CSS selector rule.

.a:visited {
--color: red;
}
.btn.active.highight {
--color: red;
}

As you saw above, you can define a Custom Property literally anywhere and use it. Its important to remember the value of the variable is only applicable with-in the Selector rule and all applicable children. Also you can have multiple variables with same names.

2. Custom Properties cascade

It would have been a shame if these variables didn’t cascade. CSS stands for cascading stylesheet. Cascade means that the child or the most applicable rule replaces the previous one and gets applied.

html {
--color: red;
}
.sidebar {
--color: blue
}
.a {
color: var(--color);
}

Look at the above CSS and look at the html below. Tell me what will be the color of the links.

<body>
<a>Link 1</a>
<aside class="sidebar">
<a>Link 2</a>
</aside>
<body>

Link 1 is red and Link 2 is blue. Earlier you had to write extra selector rules for this.

3. Custom Properties are executed at run time

Unlike pre-processor variables custom properties are applied at run time. This helps us in so many ways. This is what helps us with the Theming, you have been waiting for.

4. Custom Properties are accessible via javascript.

Since SASS and other pre-processor are complied to CSS. They don't allow variables defined in SASS to be accessible to Javascript without a hack. That’s not the case with CSS variables.

getComputedStyle(element).getPropertyValue("--color");element.style.setProperty("--color", 'pink');

Enough of all the advantages what are the minuses. Biggest one being browser support. IE11 doesn’t support it. So does UC Browser which is big in India and China. Also Opera mini, which is decent in Africa and other emerging markets. If need to support India or China or IE 11 it’s out to bound

Theming with Custom Properties

Lets try to create the above buttons in CSS custom properties

.theme-primary {
--background-color: blue;
--foreground-color: white;
--foreground-muted-color: lightgrey;
--active-color: navy;
}
.theme-secondary {
--background-color: grey;
--foreground-color: white;
--foreground-muted-color: lightgrey;
--active-color: slategrey;
}
.button {
padding: 10px;
border: 1px; solid;
border-radius: 5px;
color : var(--foreground-color);
background: var(--background-color);
....
....
}.button:hover {
background: var(--active-color);
color: var(--foreground-muted-color);
}
.button:active {
background: var(--active-color);
}

That’s it, no need to define multiple CSS selector rules. How do you use them

<button type="button" class="theme-primary button">Primary</button>
<button type="reset" class="theme-secondary button">Secndry</button>

As simple as that, lot less code. 100 buttons means just 100 theme classes/variables.

This might not sound much but what if you need to create alerts, dropdown, swatches all with different themes. Thats where custom properties shine. Look at the alert example below.

.alert{
color : var(--foreground-color);
background: var(--background-color);
}

You can now use the same theme combos you defined above with alert class to get various alerts

<div class="theme-success alert">Wow Custom Properties Rocks</div>

As you saw with the above examples we have significantly reduced the the number of lines outputted. A big save in terms of KBs.

Call To Action

Follow us if you want to be a Pro Front-end dev. Show us your love by giving us claps. Reply to this with any issues / clarifications and we will get back to you.

AWebDeveloper

A Web Dev’s Guide to Web, Mobile , Server & Tech

Prathik S Shetty

Written by

AWebDeveloper

A Web Dev’s Guide to Web, Mobile , Server & Tech

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade