Introducing TabCSS, Your Shortcut to Styled Backgrounds in Tableau
TabCSS is a new extension I wrote to help Tableau developers create awesome dashboard designs quickly and easily by adding styled backgrounds to dashboard objects and containers without having to use external tools and background images.
The extension is simple to use — but there is still a learning curve, so, based on the feedback I get, I’ll be providing documentation, writing blog posts, attending TUG events and helping in any way I can.
Consider this extension an interactive tutorial to help with design (and hopefully) start your own coding adventure!
· You can now get TabCSS in the Tableau Exchange here: https://exchange.tableau.com/products/676
· Meanwhile, the source code is available here:
https://github.com/FsuLauncherComp/BootstrapTableau
I’m currently working on getting this in the Sandbox to make it usable on Tableau Public and inside your organization. Until then, I wanted to share it, tell you why I wrote it, how it works and why I wrote it the way I did.
Why You’ll Like TabCSS
If you’re a data- and insights-first-driven analyst like me, no amount of flair or gimmicks beat well-designed charts that answer questions efficiently and effectively.
That said, there is no reason why we can’t take those charts which provide invaluable insights and present them in a more aesthetically pleasing way on a dashboard. We should take advantage of everything we know about data visualization and combine that with UI/UX best practices to ensure our users are engaged with and excited about the data we’re presenting.
For anyone who’s worked with Tableau before, this is a task easier said than done. While we have inner/outer paddings and can use built-in features to make a dashboard attractive, there is often lacking features — effective designs often require styles like gradients, rounded borders, drop shadows, animation, custom color palates, etc.
Until now, people have solved the issue in a very creative and unique way: via background images. The community has used tools like PowerPoint, Photoshop and — most notably — Figma.
I personally love this creative drive and the community’s willingness to go above and beyond to make awesome dashboards — but I also know how much additional effort this necessitates. On top of that, any changes designers get from clients requires a whole new design in a tool that is not Tableau-native.
Worst of all, all these images we add to dashboards increase the size of the workbook. Those images need to be loaded into the browser, which can cause slower render times — and frustrated customers.
This isn’t how we should be using Tableau. So, my goal for TabCSS was simple: to create something that’s easy to use, lightweight and can solve all of the issues listed above.
How It Works
1. Drag/drop the extension onto your Dashboard.
2. Set the extension to fit the entire dashboard. Set extension outer padding to zero if needed.
3. Send the extension to the back so it becomes the bottom layer.
4. Design your Dashboard by dragging/dropping your objects (worksheets, text, etc.) on top of the extension.
You can float your objects or use containers. TabCSS supports both!
5. In the Item hierarchy, rename the objects/containers you want to style.
The Patten is the following:
(Object Name)|(Bootstrap 5 Classes).
IMPORTANT: use the Pipe | delineator:
Sheet 2|z-3 bg-zinc-900 bg-gradient-sm rounded-10
6. Set the inner padding for the objects (optional).
Since the Extension draws the divs with the same height/width and position, adding inner padding makes things look nicer.
7. Repeat this process for any objects/containers you want to style.
8. (Tip/Optional) Use Blank objects to create spacing — the extension doesn’t know “Outer Padding.”
9. Experiment with styles! Look through the docs and try different combinations.
Since our styles are tied to our objects in the Dashboard, moving items around, resizing, etc. just became so much easier.
Supported CSS Classes
While all Bootstrap 5 classes are supported, below is a list of common classes/documentation you can reference for your dashboards.
Borders
For adding various border widths, styles, and colors
· Bootstrap Docs: Bootstrap Border Classes
Corner Radius
Control how rounded your containers’ corners are.
· Bootstrap Docs: Bootstrap Radius Classes
Extended border radius classes:
· rounded-4, rounded-5, rounded-10, rounded-20, rounded-30, rounded-40, rounded-50
Drop Shadows
Add drop shadows of different sizes and directions to give your containers depth.
· Bootstrap Docs: Bootstrap Shadow Classes
Extended drop shadow classes:
· shadow-top, shadow-top-lg, shadow-bottom, shadow-bottom-lg, shadow-start, shadow-start-lg, shadow-end, shadow-end-lg
Background Colors
Add background colors to your containers. Works in combination with gradients.
· Bootstrap Docs: Bootstrap Background Classes
Also supports Tailwind CSS Background Classes.
· Tailwind Docs: Tailwind Color Classes
Background Gradient
Add gradients with the above background colors, and control their intensity and direction.
· Bootstrap Docs: Bootstrap Gradients
Extended gradient classes allow you to adjust the hue of the gradient and the direction:
· Directional
· bg-gradient-end, bg-gradient-start, bg-gradient-top
· Small
· bg-gradient-sm, bg-gradient-end-sm, bg-gradient-start-sm, bg-gradient-top-sm
· Very small
· bg-gradient-vsm, bg-gradient-end-vsm, bg-gradient-start-vsm, bg-gradient-top-vsm
You can make any background color a gradient simply by adding bg-gradient to your container class names.
Why TabCSS Was Written This Way
If you look at the code base, it might seem very odd that I started writing TabCSS almost 3 years ago — so, let me explain.
When I came up with the idea for the extension and how I would execute it, my initial thought was “If it is possible, we can do it.” That loosely translates to “Recreate Photoshop/Figma/etc. as a Tableau extension.”
Development started out smooth enough. I was writing the extension with React and Typescript, building a fully customizable styled extension. Every new idea that came to mind I was able to add, gradually building the code base. It was going to be my greatest work.
What I failed to realize at that time was the simple fact that this community is about helping people. My extension was cool, new, fancy… and over-developed. It was going to help people with their designs, but it wasn’t going to teach anything. It wasn’t going to help people get better and lift us all up as a community.
So, I scrapped everything I wrote and started over, this time asking myself “How can I write an extension that is helpful while also making it simple to understand? How I can I use this an opportunity to help new developers? How can I use this to inspire people to get into coding and making extensions?”
Once I asked myself the above questions, it all became simple — as it should be.
The entire TabCSS extension runs off 59 lines of JavaScript (including comments and the help of jQuery). That’s it. No giant library like React/Angular/Vue. No super advanced techniques or groundbreaking code. Just simple JavaScript that works.
So why is the extension written the way it is? Because I want to show all of you reading this blog post that, while coding can be hard and difficult to get started with, you don’t have to be an expert to build something useful and cool.
You don’t have to be a senior developer to build something that gets things done.
In addition, I also wanted to show that we can release something to people without it being perfect. There are so many things about this extension that could be done better. I could’ve made it easier to use by adding a config modal with dropdowns to select the styles. I could’ve allowed users to drag/drop the order of objects for how they render. I could’ve done a lot more, but that didn’t stop me from releasing a solution that already works. And sometimes that is the most impactful thing we can do. Release something that helps people, inspires people and helps them on their journey to get better.
I hope this extension helps your designs. And if you want to get into coding, building extensions, etc., I hope this extension and the story behind it shows that you can do cool things without being an expert dev. I can’t wait to see what you all do next!
It’s All Open-source
Everything about TabCSS is open-sourced. I want this extension to be completely transparent and available for everyone. If you have a cool idea to make it better, put in a Pull Request. If you want to use this as a starting point to learn and/or build your own extension, download it and give it a try:
https://github.com/FsuLauncherComp/BootstrapTableau
There are no paywalls, no extended features you have to pay for. This is by the community, for the community.
ABOUT THE AUTHOR
Rody Zakovich is Senior Sales Consultant at Starschema. He works extensively in full-stack data analytics, driving innovating solutions for major enterprises.
Follow Rody on Twitter and drop him a line at zakovichr@starschema.net.
REACH OUT TO STARSCHEMA HERE:
READ MORE FROM STARSCHEMA:
