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.
|Est. Time||30 Minutes|
|Published||June 13, 2018|
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
Things used in this project
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.
ADD STYLE TO YOUR UI WITH CSS
- 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