**Course Title:** Building Cross-Platform Mobile Applications with Ionic **Section Title:** Styling and Theming in Ionic **Topic:** Design a mobile application with custom themes and responsive layouts. **Objective:** By the end of this lab, you will be able to design a mobile application with custom themes and responsive layouts using Ionic. **Overview:** In this lab, we will explore how to create custom themes and responsive layouts for our mobile application using Ionic. We will cover the following topics: * Creating a custom theme using CSS variables * Customizing Ionic components using CSS and SCSS * Creating a responsive layout using Ionic Grid and Flexbox * Using media queries to handle different screen sizes and devices **Step 1: Creating a Custom Theme** In this step, we will create a custom theme using CSS variables. CSS variables are used to store values that can be reused throughout the application. * Open the `variables.css` file in your project directory. * Create a new CSS variable for the primary color: ```css :root { --ion-color-primary: #3498db; } ``` * Update the `app.component.css` file to use the new CSS variable: ```css .app { background-color: var(--ion-color-primary); } ``` * Save the changes and run the application using `ionic serve`. **Step 2: Customizing Ionic Components** In this step, we will customize the Ionic components using CSS and SCSS. * Open the `ionic.css` file in your project directory. * Create a new SCSS variable for the button background color: ```scss $button-background-color: #2ecc71; ``` * Update the `button` component to use the new SCSS variable: ```scss button { background-color: $button-background-color; } ``` * Save the changes and run the application using `ionic serve`. **Step 3: Creating a Responsive Layout** In this step, we will create a responsive layout using Ionic Grid and Flexbox. * Open the `home.page.html` file in your project directory. * Create a new grid container: ```html <ion-grid> <ion-row> <ion-col size-sm="6"> <h1>Welcome to our app!</h1> </ion-col> <ion-col size-sm="6"> <p>This is our app.</p> </ion-col> </ion-row> </ion-grid> ``` * Update the `home.page.css` file to use Flexbox: ```css ion-grid { display: flex; flex-direction: column; } ion-row { display: flex; flex-direction: row; } ion-col { display: flex; flex-direction: column; } ``` * Save the changes and run the application using `ionic serve`. **Step 4: Using Media Queries** In this step, we will use media queries to handle different screen sizes and devices. * Open the `global.css` file in your project directory. * Create a new media query for small screens: ```css @media (max-width: 480px) { ion-row { flex-direction: column; } } ``` * Save the changes and run the application using `ionic serve`. **Conclusion:** In this lab, we learned how to create a custom theme, customize Ionic components, create a responsive layout, and use media queries to handle different screen sizes and devices. This knowledge will help you design mobile applications that are visually appealing and user-friendly. **Further Reading:** * [Ionic Documentation: Theming](https://ionicframework.com/docs/theming/) * [Ionic Documentation: Grid System](https://ionicframework.com/docs/grid) * [W3Schools: CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries.asp) **Leave a Comment/Ask for Help:** If you have any questions or need help with this lab, please leave a comment below.