Going to make a change...
Styling Assist VIA AngularJS

Reading time: 3 minutes
feature-ngclass-right-left-brain

You’re a designer, and consider yourself right-brained—you’re intuitive, creative, and thoughtful. You don’t understand right-brained thinkers, much less want to be one. CSS is as far as you’ll go when it comes to coding. You may or may not have already fallen in love with CSS preprocessors such as Sass, but you love CSS because it’s what brings your napkin sketches and comps to life. You know enough HTML to apply your CSS styles, but not much more.

In many environments, there’s absolutely nothing wrong with that. But if you’ve ever thought about taking a venture into that sometimes off-putting, strictly logical, left side of your mind, then let me make my case for AngularJS.

But it’s unfortunate, because the AngularJS framework can make our CSS so much smarter.

When we typically think about what’s changed the way we create and use CSS, at the forefront of the conversation recently are CSS preprocessors, such as Sass, LESS, or Stylus. If you’ve never dabbled in the dark art of CSS preprocessors, I must warn you, you’ll love it and never want to do CSS any other way once you learn it. It’s a good stepping stone toward bridging that gap between your fun-loving creative nature and that straight-laced analytical inner self, lurking deep inside.

However, as much as it pains some right-brained thinkers to acknowledge, if there was ever a time to get familiar with some JavaScript, it’s today. Now, I understand that many web designers and lovers of CSS have an aversion, if not an all out fear, of anything JavaScript. I get it, because I’ve been there. But it’s unfortunate, because the AngularJS framework can make our CSS so much smarter.

Allow me wet your appetite with a nice example that really enables your code to start becoming truly dynamic, including your CSS.

If you’ve never dabbled in the dark art of CSS preprocessors, I must warn you, you’ll love it and never want to do CSS any other way once you learn it.

If you’re not too familiar with AngularJS, it can be summed up simply as a framework for adding interactivity to HTML. Over the years, we’ve seen CSS3 modules take on some of that load with properties like @keyframes, animation, and, transition, but that only takes us so far.

AngularJS casts the line a bit further.

The angularJS directive, ng-class, adds the conditional to cascading style sheets. Directive? A directive is just a short snippet of code that triggers a JavaScript behavior, such as ng-class=”myClassName” which looks a lot like class=”myClassName” right?

Okay, so what’s the difference between ng-class and just the regular class selector I’m already used to?

You already know that normally, when you assign a class to an HTML element, it’s static—it is what it is:

<li class="myClassName">

But AngularJS’s ng-class directive, which replaces the class selector, empowers you to dynamically set a CSS class on an HTML element based on an expression. Think of an expression as a formula that can evaluate to true or false. In other words, you can apply certain classes to certain types of dynamic data or content from your database, and as that dynamic data changes, so do your styles.

For example, if you have an unordered list of items being dynamically populated from an external data source, like a database or simply a WordPress content management system (meaning you don’t always know ahead of time what is going to make up your content), and you wanted to add a conditional class to only certain kinds of dynamically populated content, AngularJS would give you an easy way to conditionally set specific styles only where you want them.

Here is an example that conditionally applies a couple of classes I created called “clearance” and “new” to only certain list items whose content has specific data-attributes:

The following example uses the same exact HTML and CSS code, but with different results. Only the data attributes are different. Thanks to AngularJS, our CSS is intelligent enough to know where and when to apply our styles.

How? In my HTML’s list-item element, I’ve declared an ng-class (you can see it by clicking the HTML tab of the Codepen), which here in layman’s terms reads “if the item’s clearance attribute is true, then apply the class that I’ve defined named ‘clearance’ to this list item, and also apply the class I’ve created called ‘new’ if this item has a salesStatus attribute equal to new.”

<li ng-class="{clearance: item.clearance, new: item.salesStatus === 'new'}" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>

I encourage  you to peruse the code, it’s not much—5 lines of HTML and 6 CSS selectors. I won’t break down the JavaScript, because it’s mostly only being used to simulate an external data-source. But if you do take a look, notice that it’s the data-attributes in the array of products in the JavaScript file that the AngularJS framework interprets in order to make your styles truly conditional.

This was only a very simple example to illustrate how it works at the simplest level. Imagine being able to reconfigure the layout of a section of your page, or even the entire page itself, conditionally dependent on what data your CMS is feeding in.

If this interested you, I’d also encourage you to read up on two other conditional AngularJS directives called ng-show and ng-hide, that similarly to the ng-class directive, conditionally show/hide your dynamically generated content.

  • Iris Vergara

    Why don’t you apply the class from your CMS directly instead of the data attribute? You would save time, effort, and your users’ bandwith by not downloading the entire angular framework and at least a controller…

    • http://maccg.com/ Jason McGovern

      Correct, you’d never download the AngularJS framework just to do this simple example. I should have explicitly called that out. This is assuming you already are using the AngularJS framework for other reasons, meaning if it was already in play. If your data source already has certain attributes that can be evaluated as booleans, AND you’re already using AngularJS, then this is a possible alternative to using your CMS to apply classes that could become deprecated over time by brand management.