Skip to main content

Truly Dynamic CSS

While creating a SaaS (Software as a Service) software, a major goal is to allow users to have their own branding on the SaaS software. This specifically means, allowing the users to customize colors and images of the software.

Whenever faced with this problem, we start hunting for 'dynamic CSS'. We look for options where we can set values in our CSS stylesheets like colors and image at run-time. However, native CSS technology does not support setting values dynamically. So we come across pre-compilers like SASS and LESS. These pre-compilers support features like variables and rules, but again they do not allow you to change these values at run-time. These pre-compilers are mostly meant to improve organization of your stylesheets and make them easy to maintain.

A software that could allow us to set CSS values from database and reflect those changes in real time (of course without any website downtime or re-compilation) would be an ideal solution.

This is the specific problem that GrooveUI solves. GrooveUI is a hosted service that allows you to create multiple themes and control them in real time. So you can create multiple themes for your website, specify different CSS values and view changes in real time. Also, all this happens without you having to make any changes to your website, after first setup.

How does GrooveUI work?

The developers of GrooveUI have done the heavy lifting for you, and created a service that allows you to store your CSS variables in database and use them to recreate stylessheets at run time, while taking care of performance issues.

GrooveUI uses industry approved SASS format for stylesheets. All you have to do is upload your SASS files to GrooveUI CDN (only SASS files, other files like HTML and JS are not required) and connect to GrooveUI CDN to access compiled CSS. That's it, now you can use GrooveUI website to create new themes and manage them individually.

You can access different themes by specify theme name in 'theme' parameter on your website URL or adding different domains or sub-domains to you GrooveUI account and configuring default theme for them.

GrooveUI gives you truly dynamic CSS and allows you to convert your SaaS software to while labelled offering in minutes.

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…

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.

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.Showing customer branding (Dynamic Themes). This case generally happens with SaaS (Software as a Service) applic…

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; }