Add Style to Your UI with CSS

Modernize your Mashups with CSS to enhance the presentation of your application.

Project Concept

This project will introduce you utilizing CSS to create a customized look and feel for your IoT application.

Following the steps in this guide, you will create a custom CSS utility and bind these classes to a Mashup.

We will teach you how to present a professional-looking user interface and ensure consistency of style treatments within your application by implementing Cascading Style Sheets (CSS) in Mashups.

Project Info

Type Quickstart
Level Intermediate
Est. Time 30 Minutes
Published June 13, 2018
Author Brian Gramling
Experience

You'll learn how to

    • Create custom CSS classes using the integrated CSS editor
    • Bind CSS classes to a Mashup and to individual Widgets
    • Use Media queries to dynamically apply styling
Register to Start Project

Things used in this project

Environment:

This guide requires a connection to the ThingWorx Foundation.

It assumes that you are utilizing the 120-day downloaded trial. Directions for the hosted 30-day instance might be different.

Software components:
Previous knowledge:
Create Your Application UI

ADD STYLE TO YOUR UI WITH CSS

Outline
  • Step 1: Custom CSS Benefits
  • Step 2: Access Sample Files
  • Step 3: Create CSS Rule Block
  • Step 4: Apply Custom Class to Mashup
  • Step 5: Apply Custom Class to Widget
  • Step 6: Bind Custom Class
  • Step 7: Use Media Queries
  • Step 8: Troubleshooting
  • Step 9: Next Steps