We have been made aware that there are nefarious individuals making job offers at Konverge that do not exist. The goal of this scam is to attain personal information from job seekers. Click below for some telltale signs that a job offer is a scam.


Learn More Dismiss

menu

Simple Tips for Website Theming


  • Author: The Konverge Team
  • Published: 5/31/2022 1:17:53 PM
  • 6 minute read

Simple Website theming tips blog image

Today we want to share a few easy coding tricks to keep your theming consistent throughout your web app and consistent with your brand. Close your eyes and imagine a bank that associates with the color red, or how about green? This consistency provides a strong brand identity and strongly influences decisions that affect designing the final product.

Most of the time developers will be working with designers who already have a library of their own assets built out. Typically designers will maintain an aesthetic style between web, mobile, print, and real world mediums.

But what if there are no designs? Fear not. As a developer it’s possible to maintain consistency by putting a little thought into it up front. This won’t only help with consistency, it will also improve our developer experience as the project grows and keep the codebase maintainable over time. We are going to go over some simple ways of doing this very soon. Let’s just quickly remind ourselves what we’re talking about here.

Typography

Typography is an essential way to provide a feeling behind the letters on the page (or the screen). In the two websites shown in the picture below you can feel which one is helping you plan a vacation, and which one is giving you the news.

Using multiple fonts is great but it’s important to keep them consistent with your brand.

Colour

This is probably what most people think of when they think of a website’s aesthetic. If your company relates closely with a colour, then use it. There are plenty of applications that do fine with only black, white, and a brand colour.

Spacing

Consistent spacing is less of a branding decision and more of a good practice when it comes to styles on a page. Here’s a great learning resource from Material Design that goes over how important it is to think about spacing in a website layout.

https://material.io/design/layout/understanding-layout.html#principles

Examples

Simple Website theming tips

Source: www.ca.kayak.com and www.newyorker.com

Consistency in Code

So how can we take advantage of this repetition? Like I mentioned earlier, consistency should actually make our lives easier when coding. The goal is to have as many style choices made before coding such that we can reach for these styles whenever necessary. That way we won’t have to decide what font size to use for every new section of our site.

Before writing HTML for a project, we should be writing code for our repetitive style assets. Most of this will exist as some form of CSS variable. For example, we should have access to all of these text styles with ease:

Simple Website theming tips

When it comes to the header, it’s easy enough to use <h1>Your Header</h1> and style it through the CSS header selector like so:

h1 {
    color: black;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 96px;
    font-weight: 300;
    margin-bottom: 33px;
}

 
  /* And your secondary header */
h2 {
    color: black;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 60px;
    font-weight: 300;
    margin-bottom: 28px;
}
 
  /* And so on... */
h3 { ... }

So now whenever we use a header we will have these styles applied. No problem. Except, I see some duplicate code inside our CSS above. It appears the only properties that actually change between the ‘h1’ and ‘h2’ are ‘font-size’ and ‘margin-bottom’. The other 3 properties are the same.

Now you may be wondering why this is such a big deal, aren’t we trying to maintain consistency? Yes, but duplicate code is never a good sign. Imagine we had to change the ‘font-family’ in the future. In a perfect world we would only need to change one variable.

This is where CSS variables come in. CSS variables let us reuse style definitions throughout our CSS code.

Note: A better solution for consistent ‘font-family’ could be to set it in the body { } styles and take advantage of inheritance. But for now we’ll continue learning about CSS variables.

/* Variable must be set in :root */
:root {
    --header-font-color: black;
    --header-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    --header-font-weight: 300;
}

h1 {
    color: var(--header-font-color);
    font-family: var(--header-font);
    font-size: 96px;
    font-weight: var(--header-font-weight);
    margin-bottom: 33px;
}

/* And your secondary header */
h2 {
    color: var(--header-font-color);
    font-family:
var(--header-font);
    font-size: 60px;
    font-weight: var(--header-font-weight);
    margin-bottom: 28px;
}

/* And so on... */
h3 { ... }

See: https://developer.mozilla.org/en-US/docs/Web/CSS/--*

That looks pretty good. We can easily see what the consistent styles are that apply to all headers and we can change them all at once if we need to.

Let’s try one more example with some colours based on semantic names:

:root {
    --success: green;
    --info: lightgray;
    --warning: yellow; --danger: red;
}

.saved {
    background-color: var(--success);
}

Now we can style an element's background with one of our saved colours. Such as this div which lets the user know they saved something.

<div class="saved">Saved Successfully!</div>

Conclusion

A brand should have an identity throughout its design patterns. Elements such as colour palettes and typography are essential to the feel of an application should be chosen thoughtfully. Styles that represent the company should be stored for consistency and ease of use.

Remember to use variables for anything you’ll be using over and over again in your codebase. This will create consistency throughout the app, and make your life easier when building or updating styles in the future.

If you want to have a great looking website or web app, and don't know where to start implementing these tips, don't worry. Konverge is here to help. With over 28 years of experience we know all of these tricks and more! Fill out the form below or request a consultation today!

Subscribe and stay updated with our FREE newsletter.

Recent Posts

Let's Talk

To learn more about Konverge’s ultimate custom software solutions, please contact us for your free consultation.


We take your privacy seriously and will never share your information. For details see our Privacy Policy.

Busy Office Banner