Development Blog
Posted on by Courtney Meznarich

The Color System: SoCreate Sets Standards with CSS Custom Properties

Lauren Spence presents the color system

Our most recent Lunch Meet – a SoCreate team-led learning series – may have been the most colorful yet! UX Developer Lauren Spence took the floor to teach the team about cutting edge practices being used on the UX side of SoCreate projects. While the rest of us satisfied our appetites with catered lunch, Lauren satisfied our visual senses with her presentation on the SoCreate Color System.  

The Color System is an innovative approach that controls and themes the colors in all of the apps we build. The system adds layers and rules on top of plain CSS, giving us a system that is easy to use, easy to document, and easy to theme. It’s built on a library of global CSS Custom Properties, each with a unique name for its intended use. 

“With this library of unique color names, we can easily select the right color for any purpose and confidently change colors without unintended effects,” Lauren explained. “We have a comprehensive catalog of colors with the app, a sort of “styleguide” built into the code.”

Also, through the power of Custom Properties, Lauren explained that we could set themes in the app with almost no additional developer effort. A win-win!  

The main benefit of the color system is tri-fold since the colors system was created to solve several problems many UX developers face:

  • Easy decision making, achieved through our catalog of global colors. Any two developers creating a new component can now easily make the same decision about which color to use.

  • Effortless theming. Where before we needed to manually create a theme for each component in the app, now we get themes for free with the power of CSS Custom Properties.

  • Unbreakable text. The text will never become unreadable (and therefore your app unusable), due to lack of color contrast. We achieve this through tightly controlling background colors in the app, and through documentation of colors on top of every background so that when we introduce a new color, it's easy to see if it would break at any level.

Lauren said the SoCreate UX team is excited to explore CSS Custom Properties more. It’s a fairly new approach. Developers who need to worry about supporting older browsers haven’t been able to use and experiment with CSS Custom Properties for very long.

“This means we're on the cutting edge of exploring the power of this technology, and we believe we came up with a really cool way to harness their power.”

On the cutting edge … yep, that sounds like SoCreate!  I’m continually impressed with our team’s furious curiosity: how can we do this better, faster, or different?  

These are questions we should all ask ourselves in our quest to keep learning. 

Go, team, go!

Courtney Meznarich, Director of Community Outreach
Courtney Meznarich Director of Community Outreach
@courtonthecoast

You may also be interested in...

Jami Lurock gives a presentation on home automation

Lunch Meet: Jami Lurock's Journey to Home Automation

When you combine an engineer and his home security system, the result is something far more advanced than your typical alarm. Ever wish you could just tell your garage door to open, monitor the salinity of your saltwater pool from afar, or catch your kid or roommate who leaves the window open while the heater is on, all from a mobile device? It can be done, and our chief engineer Jami Lurock set out to prove it! At our second installment of “Lunch Meet,” a monthly team-led learning series on a variety of relevant topics, Jami took the floor to talk us through his “Journey to Home Automation...
Laura Graesser from Google Brain and Keng Wah Loon from Machine Zone presentation on machine learning

SoCreate Supports Local Tech: Deep Reinforcement Learning Workshop

SoCreate makes a tradition out of supporting tech in San Luis Obispo. One reason is that we’re lifelong learners, and there is so much to learn from each other, and we also want to see the tech industry grow in SLO because that only helps us develop a more talented team! So, when two experts in their field stepped up to teach a PyData SLO workshop on deep reinforcement learning, we stepped up to provide the pizza! We also hosted this March Meetup here at our SoCreate offices. SoCreate Software Engineer John Jenson attended and reported back. Laura Graesser from Google Brain and Keng Wah...
Madelyn Pape BCI presentation

Hardware, Software, Wetware: SoCreate Tackles the Topic of BCI

It’s 2019, and science fiction is no longer. We’re living in an age of science reality! Our March Lunch Meet (a monthly team-led learning series) tackled the topic of brain computer interfaces (BCI), which was just what our movie-minded team was craving. UX development intern Madalyn Pape delivered the impressive presentation, as the topic is a personal passion. Avatar, The Matrix, Star Trek and Marvel’s X-Men … now these are films about mind control that we can understand! But connecting our brain to a computer in real life? As Maddy explained, this very real technology allows our brain to...