Devia Blogs

Ecommerce

August 1st, 2022

B2B Website Styling: How to Use CSS Variables

By Xan Poulsen, Marketing

August 1st, 2022

B2B Website Styling: How to Use CSS Variables

By Xan Poulsen, Marketing

If you're a web designer, you probably love the artistic side of your work but hate the repetitive tasks like copying and pasting hexcodes, rgb values, and font names over and over. And of course, as soon as you finish, your clients' feedback is “can you use a new color scheme and fonts?” Facepalm.

This is the main reason why I switched up my B2B website-building workflow to include CSS variables.

Using variables allows you to easily change a brand's fonts and colors across the website by editing only one line of code at the top of the document. B2B stores built with variables have a huge advantage when the inevitable re-branding comes around. Stores can transform with brand new branding in the blink of an eye.

A few months ago, I was working on a B2B website for a client that needed it finished that week. Once I sent over the link, the client decided they needed to switch the site to a new logo, color scheme, and fonts. Because I used variables, I could change everything for them in less than two minutes.

How It Works:

The workflow is simple. At the top of your css document, you'll need a “root” section. Within this section, write down different variable names and what they represent. For example: “primary” could represent the hexcode “#35476c” and “secondary” could represent #f2f2f2 You'd set that up like this:

root: {
 --primary: '#35476c';
 --secondary: '#f2f2f2';
}

You can even put variables within variables. For example, I could also add the variable “maindropshadow” like this:

root: {
 --primary: '#35476c';
 --secondary: '#f2f2f2';
 --maindropshadow: 'drop-shadow(0px 1px 4px var(--primary))';
}

When you use these variables in the document, your css will look something like this:

.thing1 {
 background-color: var(--primary);
 color: var(--secondary);
 filter: var(--maindropshadow);
}

If you ever decide that “primary” needs a new hex code or rgb value, you can change it in the root section, and the color will update every element that uses the variable. Variables can be used for fonts, colors, border radius, or any other value.

I like to name my variables with very broad titles, like “primary” instead of specific ones like “brightorange”. That way, if I need to change the color to something wildly different, everything still makes sense and is easy to remember.

Typically I like to use these variables in my projects:

Colors:

-primary
-secondary
-complementary

Fonts:

-body
-display
-title

What about Search and Replace?

VSCode enthusiasts might be internally screaming right now because they're thinking that the simplest way to change a repeated value across a CSS file is to just use the Search and Replace Feature. However, there may be some cases where this method wouldn't work as effectively as CSS Variables.

For example, Search and Replace won't work well if you're editing a client site on Infigo's Web to Print Platform, a popular hosting platform for B2B websites. In Infigo, there are several places to add CSS to your website: CSS Override, Get Skin, Editable Content, or even with a git repository connected to the Page Head. With so many places potentially storing CSS, you'd have to cross examine each one for changes to swap out with Search and Replace. In contrast, if you have a root section in one of these several CSS files, the variables will work across any place you store CSS in Infigo. That way, you only have to change one line of code.

Browser Support

Variables have only been supported by browsers since 2016. So far, I haven't come across any issues with CSS variable support across browsers. The only browser that doesn't support variables is (dun-dun-DUNNN!) Internet Explorer. I personally know more people that use Tor than Internet Explorer, so I really dont see this as a reason to scrap the variable method. It's up to you whether it's worth your time to research and avoid every gaping hole in Internet Explorer's CSS support. But before you get yourself too far into that headache, keep in mind that Internet Explorer lacks support for some pretty basic features of CSS, including the outline property, inherit as a value, inline block display, and more. Then there's the fact that less than 2% of website visitors are using Internet Explorer.

That being said, 98% of users are on browsers that support CSS variables, so I still choose to use them because of how much time I save when I work this way. Incorporating variables into my documents has sped up my workflow and allowed me to think less about things like “what was that hexcode again” so I can spend more time getting deep into creative problem solving. It's these types of small improvements to your workflow that can make your services more adaptable and in the end, more irresistible to clients.

About Devia's Web to Print Solutions

Your printing service needs an online platform that will connect your clients to the products they need to order. Printing clients need a simple, easy to navigate webpage that lets them upload a PDF or a photo and order marketing materials and custom products, including business cards, stationery, letterhead, envelopes, flyers, pocket folders, brochures, signage, calendars, sell sheets, buckslips, note pads, and more.

Devia provides support to your team of printing professionals by helping manage and create individual eCommerce stores for each of your clients, tailored specifically to their brand. Using Infigo's software, Devia will develop and manage these branded storefronts for you, so that you can get back to what's truly important: running a fantastic printing service.

Devia's partnership with Infigo lets us provide unmatched support for Infigo users. Our direct collaboration with Infigo's team gives us insider information on new updates and features of their software. Devia also specializes in the management and development of online stores hosted by other various eCommerce platforms, such as Shopify, Pageflex, Squarespace, and Magento.

Devia's years of experience building customized storefront solutions allows us to create the best solutions for connecting commercial printers and their clients. Schedule a meeting with our team using the button below to start a conversation with Devia. Our team is always happy to give your business a free demo of our software and provide consultation as to the best possible solution for your printing business.

© Copyright Devia 2022