Styles

Global styles

The entry point of the global styles is as usual for an Angular application: client/src/styles.scss

// ----- Base -----

@import './styles/fonts';
@import './styles/tailwind.css';
@import './styles/material';
@import './styles/base';

// ----- Special `.gbl-*` styles -----

@import './styles/common';
@import './styles/info';
@import './styles/landing';
@import './styles/forms';

All special global styles starts with .gbl-* prefix.

Component styles

All component styles starts with .app-* prefix.

Component styles are encapsulated manually following the BEM convention (Block-Element-Modifier).

Here's an example with the header component:

client/src/app/header/header.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-header',
  host: { class: 'app-header' }, // Component root css class
  standalone: true,
  templateUrl: './header.component.html',
  styleUrl: './header.component.scss',
  encapsulation: ViewEncapsulation.None, // No framework encapsulation
})
export class HeaderComponent {}

This is what the final markup looks like when rendered in the browser:

<!-- Block -->
<app-header class="app-header">
  <!-- Element -->
  <div class="app-header__logo">...</div>
  <!-- Element and Modifier -->
  <nav class="app-header__menu app-header__menu--visible">...</nav>
  ...
</app-header>

And the Sass styles should looks like this:

client/src/app/header/header.component.scss

@use '../app.scss' as app;

.app-header {
  &__logo {
    // ...
  }
  &__menu {
    // ...
    &--visible {
      // ...
    }
  }
}

info

The src/app/app.scss file gives you access to the global Sass variables and mixins in the component styles.

Material

Material design typography is enabled for the entire HTML page using the .mat-typography css class on the body tag:

client/src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FeedZback</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  </head>
  <body class="mat-app-background mat-typography">
    <app-root></app-root>
  </body>
</html>

Only the styles of the Material components that are used in the application are included. See here for more infos.

Tailwindcss

Tailwind is only used in Angular component templates for utility classes like: ms-4, me-4, mb-4, flex, items-center, justify-center, ... The main styles are written in Angular component styles following the BEM convention.

Currently, Tailwind "Preflight" breaks some Angular material components. It also conflicts with the global .mat-typography. Therefore it has been disabled:

client/tailwind.config.ts

import type { Config } from 'tailwindcss';

export default {
  corePlugins: {
    // Warning: Tailwind "Preflight" breaks some Angular material components
    //
    // Learn more about this issue and a hack to solve it:
    //    https://github.com/tailwindlabs/tailwindcss/discussions/9993
    preflight: false,
  },
} satisfies Config;