Styling the Ionic Progressive Web Applications
Ionic has been able to put forth a great framework for progressive web applications and hybrid applications, that makes styling your application as easy as changing a few css classes in your html. It comes with a wealth of documentation, allowing you to make your application look like default native applications on Android and iOS. A wide-range of css components are included so starting off is as easy as copying the code from the Ionic website.
This is fantastic and it allows you to get started quickly. But soon, you'll want to go beyond the default platform styles and make your apps look less generic. Ionic allows you to easily override their default variables and classes using the SASS preprocessor, but this information is not documented and there isn't a way to structure your app so that there's less overhead added as the app scales.
That's why we've been brought lessons from our own past projects and from other open source projects to make it easy for you as a developer to expand on Ionic's default styles in a scalable and maintainability friendly way.
This is where we import the Ionic library and you can import other partials before the library to override default Ionic variables.
This is where we import the main application styles.
By default we separate the files we import here into three categories:
- where we include utilities, such as:
- SASS functions
- Typography -- default styles for typography across the entire app. You can obviously override them in your components.
- Utility-classes -- are classes that help quickly style your design.
- where we include the default styles for components, such as the ones in Ionic's list of CSS Components e.g. Forms, Buttons, Toggles etc.
In our experience working with a handful of developers over the past months, this structure has enabled us to greatly improve how we write CSS and handle our stylesheets, and we hope it will do the same to you too.