Ionic 4 global CSS

Ionic 4 every component implementation and their styles are self-contained, in fact, native shadow-dom is used, so trully isolation in enforced.

However, in Ionic Apps there are global CSS (linked in <head>) that needs to be included in order for an Ionic app to properly work.

Some of this "global CSS" style html, normalizes,and configures the typography (font-family, font-size) of the whole page, so apps look like native.

CSS files

Basics

normalize.css
Normalizes the CSS differences between browsers, it's based in https://necolas.github.io/normalize.css/
structure.css
Applies styles to <html> and defaults box-sizing to border-box. It's used to ensure scrolling behaves like native in mobile devices.
typography.css
Changes the font-family of the whole page based in the mode selected (iOS or Material Design), it also applies global styles to <p>, <h1>, <h2>... so everything looks like a native app.
colors.css
Allows the color prop to work across all Ionic components,ie:

<ion-button color="primary">

Optional

The following set of CSS files are optional and can safely be commented out if the application is not using any of those features.

padding.css
Adds utils attributes to add a padding to any container ([padding], [padding-horizontal], `[padding-vertical]):

<ion-content padding></ion-content>

float-elements.css
text-alignment.css
text-transformation.css
flex-utils.css

Integrations

Official Ionic starters are already properly configured so the following steps are not needed.

Angular

src/app.css

/** Basic CSS for Ionic Apps */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/colors.css";

/** Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

Stencil

src/global.css

/** Basic CSS for Ionic Apps */
@import "~@ionic/core/css/normalize.css";
@import "~@ionic/core/css/structure.css";
@import "~@ionic/core/css/typography.css";
@import "~@ionic/core/css/colors.css";

/** Optional CSS utils that can be commented out */
@import "~@ionic/core/css/padding.css";
@import "~@ionic/core/css/float-elements.css";
@import "~@ionic/core/css/text-alignment.css";
@import "~@ionic/core/css/text-transformation.css";
@import "~@ionic/core/css/flex-utils.css";

stencil.config.js

exports.config = {
  // ...
  globalStyle: 'src/global.css'
  // ...
};

src/index.html

<!DOCTYPE html>
<html>
<head>
  <!-- ... -->
  <link href="/build/global.css" rel="stylesheet">
  <script src="/build/app.js"></script>
  <!-- ... -->
</head>

manucorporat/css.md

Select an option

No results found