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.

If you haven't used SASS before here's a great resource to get you started. Here's a brief overview of the main files that you'll be receiving when purchasing one of the progressive web app themes:

    This is where we import the Ionic library and you can import other partials before the library to override default Ionic variables.

  • Main.scss
    This is where we import the main application styles.

By default we separate the files we import here into three categories:

  • BASE
    • where we include utilities, such as:
    • SASS functions
    • Variables
    • Mixins
    • 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.
    • This is where we include styles specific to each module in your application. The module is an independent unit that contains Javascript, HTML and a .scss stylesheet partial.

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.

results matching ""

    No results matching ""