CSS Variable With IE Fallback

CSS Variables Demo using css-vars-ponyfill library for IE fallback.

Github

Using CSS Variables to help us theme our sites.

Notes: --event-primary-alt and --event-secondary-alt update the hover states on the buttons



h1 --event-primary

h2 --event-primary

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est facilis ut ipsam esse similique officiis! --event-primary-alt

--bg-primary



h1 --event-secondary

h2 --event-secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur debitis consequatur, unde aliquam iste dolores? --event-secondary-alt

--bg-secondary

How Does it Work?

Create your Variables on the :root pseudo-class 

						
:root {
	/* Brand Colors */
	--event-primary: #ff495a;
	--event-primary-alt: #4597db;

	--event-secondary: #618b4a;
	--event-secondary-alt: #451f55;

	/* background-images */
	--bg-primary: url('https://picsum.photos/id/100/200/300/?blur=10');
	--bg-secondary: url('https://picsum.photos/id/800/200/300/?blur=10');
}

Add Your Variables to your CSS classes like the examples below 


/* Updating Backgroung Images */
.bg-primary {
	background-image: var(--bg-primary);
}

.bg-secondary {
	background-image: var(--bg-secondary);
}

/* Styling Border Classes */
.border-event-primary {
	border: 2px solid var(--event-primary);
}
.border-event-secondary {
	border: 2px solid var(--event-secondary);
}

/* Styling Text Event Colors */
.text-event-primary {
	color: var(--event-primary);
}
.text-event-primary-alt {
	color: var(--event-primary-alt);
}
.text-event-secondary {
	color: var(--event-secondary);
}
.text-event-secondary-alt {
	color: var(--event-secondary-alt);
}

/* Style Primary Event CTAs */
.btn-event-primary {
	background-color: var(--event-primary);
}
.btn-event-primary:hover {
	background-color: var(--event-primary-alt);
}

/* Style Secondary Event CTAs */
.btn-event-secondary {
	background-color: var(--event-secondary);
}
.btn-event-secondary:hover {
	background-color: var(--event-secondary-alt);
}