Look Great With Ignite UI Themes

As a developer, you want to ensure that your application looks good and works on all types of devices, including desktops, tablets, and mobile devices. Modern web applications should be responsive and touch-enabled, but will require a lot of CSS/SASS /LESS in your application. As a developer, you may not be skilled in CSS or have the time to learn it for use in your application. IgniteUI can help by providing various themes, which can be used as they are in your application or you can use the IgniteUI Theme Generator to create themes as required by your application.

In addition to these themes, you can use the IgniteUI Bootstrap Theme Generator to create your own theme. To learn more, see Using the Ignite UI Bootstrap Theme Generator. You can also learn more about Angular in Angular Essentials, a free eBook published by Infragistics.

Provided themes:

  1. Infragistics theme
  2. Metro theme
  3. iOS theme
  4. Default bootstrap theme
  5. Superhero bootstrap theme
  6. Yeti bootstrap theme
  7. Flatly bootstrap theme

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

  1. npm install
  2. npm start

You have executed the npm install command to install all dependencies and have used the npm start command to run the Angular application. If the project setup is correct, you will have a running Angular application as shown in the image below:

Setting up the Project

The application is currently using the IgniteUI metro theme. In the project, open the index.html file, navigate to line number 9 to 10, or look for the CSS references in the head section. You will find that the application is referring to the metro theme from the IgniteUI CDN as shown in the listing below.

<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/structure/infragistics.css" rel="stylesheet" />

To work with any theme, you need a reference of Infragistics.css besides the theme reference.

Step 1 Changing to iOS Theme

Change the existing IgniteUI themes easily by switching to the desired theme reference. To change the theme from the metro theme to the iOS theme, leave the reference of infragitics.css as it is and modify the IgniteUI theme reference in the index.html head section as shown in the listing below.

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/ios/infragistics.theme.css" rel="stylesheet" />

Navigate to the application and you will find that all of the controls have been changed to the iOS theme. You may notice that the grid’s look and the navigation button's design have been changed.

Changing to iOS Theme

Step 2 Changing to Default Bootstrap Theme

IgniteUI provides a default bootstrap theme. To change the theme to the bootstrap theme, leave the reference of infragitics.css as it is and modify the IgniteUI theme reference in the index.html head section as shown in the listing below.

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/bootstrap/infragistics.theme.css" rel="stylesheet" />

Navigate to the application and you will find that all of the controls have been changed to the default basic bootstrap theme. The grid’s look and the navigation button's design have been changed to the bootstrap theme.

Changing to Default Bootstrap Theme

Step 3 Using Your Own Bootstrap Theme

IgniteUI helps you to create your own bootstrap-based theme. Simply upload a variables.less file in the Ignite UI Bootstrap Theme Generator and download the theme (combination of LESS, Complied CSS and images) to use in your application.

To learn more, see Using the Ignite UI Bootstrap Theme GeneratorThe Ignite UI Bootstrap Theme Generator helps you in two possible ways:

  1. To customize existing Ignite UI themes
  2. To create new bootstrap theme using the variables.less file.

In previous steps you have used themes provided by IgniteUI. To use your own bootstrap theme, follow the steps as below. Note that, for this lesson, you do not have to perform these steps, as a bootstrap-based theme has been added in the project.

  1. You can create your own variables.less file or use one of the bootstrap themes from Bootswatch. To use a theme from bootswatch, select the theme and download the variables.less file.
  2. Upload variables.less file to the Ignite UI Theme Generator.
  3. Download the theme and unzip it.
  4. Save the downloaded theme in your application project.

The project contains a CSS folder, which contains a theme generated by the IgniteUI theme builder. To use this theme: in the head section of index.html add a reference of the theme and bootstrap as shown in the listing below. Delete reference of metro theme (line number 9) and add the below references just before the ./css/structure/infragistics.css reference.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/themes/infragistics.theme.css" rel="stylesheet" type="text/css" />

Navigate to the application and you will find that application is using new theme.

Step 3: Using Your Own Bootstrap Theme

Conclusion

In addition to the themes provided by Ignite UI for JavaScript, you can use your own themes or jQueryUI Theme Roller. To learn more, see Styling and Theming Ignite UI.

IgniteUI supports the latest designs available in the modern web development and allows you to write web applications faster.