Skip to main content

CSS in Perspective

Course Overview​

Bring CSS to life in your projects. This class covers styling a project in Perspective using basic CSS and common design principles, as well as more advanced concepts like using the Advanced Stylesheet and Themes. This class takes an existing project and applies CSS to increase its visual appeal and functionality. By the end of this class, students will be able to use CSS, Advanced Stylesheets, standardize fonts and component transforms (resizing) to greatly improve an existing project.

Length: 2 days

Who is This Class For? What are the Class Expectations?​

This class is designed as Level 2 class in our curriculum. It has been designed with intermediate-level users in mind.

Important

This is a Level 2 class, prior experience with Ignition is required and Core Certification is recommended.

Suggested Class Pre-Requisites:​

  • Some familiarity with CSS.

Topics Covered​

Class Setup​

  • Restoring the Database Backup
  • Restoring the Class Gateway
  • Activating the Gateway License

Introduction to the Solar Farm Project​

  • Reviewing the Project Specs
  • Reviewing the Acme Solar Farm Branding Guidelines

Basic Styles and Classes​

  • Applying Local CSS
  • Applying Styles via Classes
  • Understanding Style vs Text Style
  • Styling Parts of Components
  • Applying Multiple Classes

Building Styles​

  • Formatting Text
  • Working with Colors
  • Adding Spacing and Alignment
  • Adding Borders
  • Adding Images
  • Fixing Contrast Issues
  • Adding Additional Classes

Element States​

  • Working With the Hover State
  • Adding the Focus State

Conditional Styling & Animation​

  • Applying Styling via Scripting
  • Fixing Naming Issues Through Scripting
  • Adding CSS Animation

The Advanced Stylesheet​

  • Enabling the Advanced Stylesheet
  • Reviewing Basic CSS Syntax
  • Applying Hand-Coded Styles
  • Inspecting Styles
  • Overriding Default Styles
  • Digging Into Components
  • Styling LEDs

Accessing Web Fonts​

  • Adding New Fonts
  • Using Web Fonts
  • Overriding Fonts in Components

Using the CSS Grid​

  • Refactoring a View in Grid
  • Applying CSS Grid to the Markdown Component