Skip to main content

CSS Variables with PHP vs GrooveUI

Whenever we want to control CSS stylesheets dynamically, we think about CSS variables. However, CSS does not have native support for variables. Hence we are tempted to inject variables using server side programming languages.

Why CSS Variables?

First let's understand why we would want to use variables in CSS.

  1. Managing values across large CSS files. If we have a large CSS file, where we are using same value again and again in various definitions, wouldn't it be nice to define the value as a variable (constant) and use that variable in our CSS classes. For example, we have a primary color, say Orange, and we are hard coding it's value across our entire CSS file for buttons, text, background etc. This could easily turn into maintenance nightmare for large CSS files. A better approach would be to define the primary color as a variable and use that across our CSS file.
  2. Showing customer branding (Dynamic Themes). This case generally happens with SaaS (Software as a Service) applications, where we want to allow our customers to apply their branding on our SaaS platform. The standard approach would be to store customer preferences in database (or some permanent storage) and then inject those preferences into our CSS definition using variables. 

How to implement CSS variables?

If we are only looking to organize our CSS files in a better way and are not interested in updating CSS files dynamically, using one of the CSS pre-processors like SASS or LESS would be a better solution. These pre-processors provide much enhanced features to manage your CSS files.

However, if we are interested in configuring our CSS values dynamically, CSS pre-processors might not be a good solution. Current, pre-processors do not allow values to be set dynamically through external sources.

One solution is to use server side scripts to inject values into our CSS files dynamically. There are many articles online, that show you how to achieve that, we are not going to dwell into implementation details here. 

Using server side scripts to inject CSS variables suffers from following drawbacks.
  1. Large CSS files easily become unmanageable.
  2. Front-end team becomes dependent on back-end team.
  3. Difficult to modify and add new variables due to coordination between two teams.
  4. No standard format.
  5. High initial investment in implementing entire solution.
  6. No user interface to manage configurations.
  7. High performance optimization is required.

GrooveUI as a solution

GrooveUI comes as a solution to all the problems related to CSS variables using server-side scripts. 

GrooveUI gives double advantage of CSS pre-processors and CSS variables from database. GrooveUI is build over SASS pre-processor. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It provides several advanced features to organize your CSS files.

GrooveUI takes SASS a step further and allows you to create and manage new configurations on the fly. You simple design your website using SASS language and once done, upload your SASS files to GrooveUI account. That's it now you can use GrooveUI interface to create new themes and set values of each SASS variable on the fly. There is no code change, compilation or deployment required, to add new themes.

Using GrooveUI in your project provides following advantages.
  1. Clean separation between front-end and back-end team.
  2. Create new themes on the fly.
  3. Real time update of changes.
  4. Elegant user interface to manage themes.
  5. Control which theme to show based on URL parameters or using separate domains.
  6. No initial cost in development.
  7. Highly organized CSS files using SASS.
  8. Performance optimized for real world use cases.
GrooveUI is a better alternative to using PHP or other server-side languages to generate CSS variables. 

We welcome you to try GrooveUI. Please leave your feedback in comments section.


Comments

Popular posts from this blog

Improving your SaaS product demo

In any considered B2B SaaS purchase, the product demo is often a key part of the sales process. A product demo is a valuable tool for getting new customers interested in your SaaS product. It's also a tool to establish your credibility and industry knowledge.

However, in a large number of cases, potentially lucrative demos quickly turn into a sinkhole of wasted opportunity, not to mention waste of effort and resources.

Let's try to understand how to prepare for a good SaaS product demo.
Goals of the demo A product demo is never about showcasing the long list of features of your product.
It's more about, Understanding the prospect's pain points.Showcasing how your product is a good fit to solve that pain.Leaving your prospect believing that your product is a great solution to their pain.Establishing confidence with the prospect about your team.Showcasing your product as a stable and matured solution.Failure Reasons Most of the demos fail because:
1. Failure to understand…

What is SASS Mixin?

If you find yourself writing same piece of CSS code over and over again, you might be able to use SASS Mixin to your advantage.

A Mixin is a block of code that let's us group CSS declarations that we can reuse throughout our stylesheet.

For example, if we want to display HTML element as a flex element, we might end up repeating below lines of code for each element.
.row {display: -webkit-flex;display: flex; } You can define a Mixin as below,
@mixin flex {display: -webkit-flex;display: flex; } And include it in other definitions.
.row { @include flex; } After compilation, all Mixin references will be replaces by Mixin definition.
.row {display: -webkit-flex;display: flex; }

What is White Label Software?

A white label software is a product or service produced by one company (the producer) that other companies (the Customers) can re-brand to make it appear as if they had made it.

Websites use white labels to enable their customers to offer a service without having to invest in creating the technology and infrastructure themselves. Many IT and Software companies use white-label software and services to provide specialized services without having to invest in developing their own product.

One of the biggest requirement for a white label software provider is, that it's customers should be able to apply their branding to the product. That means applying their logo, colors, fonts etc to the software so that the software looks part of Customers existing product offerings.

To apply customer branding the white label software provider will have to tackle following challenges:

Make branding components configurable.Store customer preferences.Devise ways to identify customer and apply their br…