Ionic CSS classes assignment

Question

I’m styling my app. Familiar with the basic theming components, SASS etc... But one thing that stands out and it not making sense is why when I preview the source in a running a

Answer 1

ion-header is an angular directive (as is ion-toolbar). Directives can have an associated HTML template and javascript. The extra classes are added by the javascript that belongs to each directive. The code below demonstrates an angular directive where a class is added to the original element. If you inspect the results you can also see an extra div being added - that is the result of the directive's template being added to the DOM.

(function() {
  var app = angular.module("soDemo", []);
  app.directive("soDirective", SoDirective);

  function SoDirective() {
    var directive = {
      restrict: 'E',
      scope: {},
      link: link,
      template: '<div class="content">My directive contents</div>'
    };
    return directive;
    ///////////////////
    function link(scope, element) {
      element.addClass('sample-class');
      
      console.log(element.html());
    }
  }
})();

.sample-class {
  display: block;
  border: 1px solid red;
}

.content {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="sample" ng-app="soDemo">
  <so-directive></so-directive>
</div>

Answer 2

If you look at the Header Ionic API Docs, for <ion-header> you'll see there are Sass variables for 3 platforms - the abbreviation to right of colon is used to target platform specific styling rules:

• iOS : ios
• Material Design (default if in browser like Chrome) :md
• Windows Platform : wp

Plaform specific styles confirm that here

When you do ionic serve --lab you have the option to choose platform and get a feel for the default files render.

When you want to target CSS for specific platforms, then the nomenclature is:
[<elementname>-<platform-abbreviation>]

Here's a more complete list of SASS variables for the different Ionic Components.
In your project there is a themes/variables.scss where you can use those values. You can define your own SCSS variables like $my-padding:5px; in here and then use that in your custom component CSS, and consequently have that constant declared once and you can globally apply. So my-component.scss has

[ion-item] {
   padding: $my-padding;
}

The toolbar source folder is here.

toolbar-header.ts contains the @Directive selector 'ion-header' for <ion-header> Typescipt class name: Header

toolbar.ts contains the @Directive selector 'ion-toolbar' for <ion-toolbar> Typescript class name: Toolbar

There are scss files for the platforms..

• toolbar.ios.scss
• toolbar.md.scss
• toolbar.wp.scss

They seem to import:

• ionic.globals.scss

Furthermore you can configure things in your app-module.ts.

@ngModule({
 ....
 imports: [
   IonicModule.forRoot(MyApp, { // settings object
     iconMode: 'ios', // all platforms globally use ios icons
     tabsHighlight: true, // seems to work only on android
     platforms: {
        android: { tabsPlacement: 'top' // platform specific
        }
                }
   })

This should give you an insight