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.
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:
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:
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.
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.
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.
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.
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.
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 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.
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.
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.