Optimized Styling Framework Setup for Angular

Part two of the opinionated guide for well structured applications using Bootstrap, SCSS and Angular Material.

Frame courtesy — Bhuvan Shome (1969)

Prerequisites

Before starting with this part of the guide, it will be necessary to complete the part(s) that precede it —

Introduction to optimized Angular codebase setup
Part 1 — Angular Component and Routing Setup

Styling Framework Setup

Before we start with the development of HTML markups and their associated styling, it will be required to prepare the codebase and integrate the tools needed for the same.

Preparing the SCSS structure

We will create a directory named “styles”, parallel to /app or /assets and add the following files in it. The reason for having these files is to have a clear separation of the styles based on their specificity.

1. _base_elements.scss— This file will have the base styles written globally for the different HTML elements. E.g. headings, p, button, a.
2. modules/<feature module name>.scss— These files will be included one for each of the feature modules in a directory named “modules”. These will have module specific styles that will not be used for components outside the particular module.
3. _module_importer.scss— This file will be used to import all module-specific SCSS files mentioned in the previous point. This helps in a neat styles.scss when the codebase starts having numerous modules.
4. _global_styles.scss— This file will have the styles written for application-specific utilities that are to be used across the application and are not limited to a given feature module. E.g. primary navigation, header, footer.
5. _variables.scss— This file will have the style variables (e.g. color codes) that will be needed across the application.

The above files will then be imported by the styles.scss file provided by Angular.

Adding the SCSS structure

Including application fonts

Usually fonts come specified with the UX style guide but in case we are the one deciding the fonts, I would suggest to pick a font family that has the following variations/styles :

1. Light — for default.
2. Regular — for headers, notifications and highlighted information.
3. Monospace (Regular) — for numbers that are to be aligned e.g. in a table column.
4. Bold — optional for certain headers.

For our sample application, I have selected Roboto and Roboto Mono.

Note: It is advisable to have the fonts in all web font file formats for the deepest level of support. In case we do not have all the formats (e.g. Google Fonts only provide TTF format), we can use an online service like Transfonter or Font Squirrel to get all the formats.

Once we have the font files, we will include them in a new directory /fonts inside the /assets directory.

Font files added to the codebase

We will integrate the font families by writing @font-face rules for each of them in a _font_families.scss file inside /styles directory and then include the same in styles.scss.

We can now use the font families in our stylesheets —

Including application icons as fonts

There can be a lot of cases where the default icons provided by Font Awesome (or any other icon library) are not enough. For such cases, we need to integrate and use the icons specially selected/made for our application.

Note: It is advisable to always use the icons as fonts and never as image files directly.

In order to generate fonts for the icons, the source icon files must be in SVG. We will need to have them handy and correctly named (these file names will end up being used in the class names) before starting the following process —

1. We will open up IcoMoon web application and import the SVG icons using the “Import Icons” option in the header.
2. We will select the just imported icons and click on “Generate Font”. The font will be generated and the icons will be displayed. We will check if the icons are correct before proceeding. If they are not, corrected SVG files need to be uploaded for the same.
3. We will open the download options by clicking on the gear icon next to the “Download” button, enter the preferred font name (<application name>-icons) and CSS class selector (<application name>-icon), close the window and download the package.

Preferred options for IcoMoon

4. We will extract the package and copy the contents of the /fonts directory to the /assets/fonts directory in our codebase.

Adding the icon fonts to the codebase

5. We will create a file _<application name>-icons.scss (in our case it was _modhyobitto_icons.scss) inside the /styles directory in our codebase and copy the contents of the style.css file in the downloaded package into this file. We will also adjust the URLs for the font files by adding “../assets/” as the prefix.

6. We will import the file created in the above step in the styles.scss file.

The icons have now been successfully included in the codebase.

To use them, we will have to add the span elements appropriately. We can add the span elements for all the four icons in the dashboard page.

Additionally, we can add a CSS style to increase the font size for all the icons.

Including application icons as fonts

Adding application color scheme

Picking a color scheme for a website is as difficult (if not more) as picking the colors for a painting. Usually the UX design has the color specifications for all the different elements.

However, as there is no UX design for the sample application, I would suggest breaking the application into the following color groups —

Theme colors :

1. Headings, header, footer, scrollbar.
2. Links, buttons
3. Hovered links

Standard colors across all themes :

1. Notification (Red) — #B00020
2. Subtle backgrounds for certain elements — #EEEEEE
3. Default text color — #000000

The next task of assigning the color codes to the above theme color groups will be as per our brand. We can always refer to Material theme guide for help.

For our sample application, I have selected the following color scheme using the Material Color Tool —

Material Color Scheme

1. Headings, header, footer, scrollbar. — Primary Dark
2. Links, buttons — Primary

Accordingly, we will have to set the colors in the _variables.scss file.

Storing the color scheme in _variables.scss

Including Bootstrap 5

We can now proceed towards adding the best features of Bootstrap into our sample application.

Firstly, we will install Bootstrap using the command —
ng add bootstrap

Next, we will add the following to styles.scss file to enable Bootstrap reboot, grid and utilities —

Development of static pages

With the styling framework ready in the previous step, we are now ready to create all the pages with all their components but without the service API integration. After these steps, the pages will have be fully designed and ready for the integration of related logical flows.

Semantic and accessible HTML markup

The first step towards designing a page is to first create the HTML markup which has the correct structure and uses the right tags for right elements.

E.g. A link/ anchor <a> tag should only be used for hyperlinks and never for elements that look and behave like a button <button> element.

Using the correct element not only saves us from a lot of hacky JavaScript, CSS and ARIA attributes, but also makes the page accessible by default.

After this step, the website will have the necessary outline.

Styling using modular SCSS

The application will finally start taking a shape visually in this step with the help of the CSS styling rules that will be written for the various components.

In our sample application, we have chosen to work with SCSS as it is a super efficient way of writing CSS styles. The indented and {scoped} syntax makes the code a lot more readable in addition to features like mixins which makes writing CSS easier by integrating logic into it. SCSS documentation will come handy in this step.

This is how the header footer and the dashboard look after styling —

Header and footer after styling

Dashboard after styling

Developing responsive design using Bootstrap grid

Bootstrap grids are based on universal breakpoints —
xs, sm, md, lg, xl, xxl.
We can directly use available Bootstrap utility classes in our template HTMLs for having breakpoint specific styles. Alternatively, we can also use Bootstrap grid mixins like the following, in our SCSS files instead of writing hardcoded media queries —

1. media-breakpoint-down(<grid-breakpoint>)
   E.g.
   @include media-breakpoint-down(sm) { … } is the same as
   @media (max-width: 575.98px) {…}
2. media-breakpoint-up(<grid-breakpoint>)
   E.g.
   @include media-breakpoint-up(sm) { … } is the same as
   @media (min-width: 576px) {…}

In our sample application, let us have the following requirements for small devices (<576px width/ ‘sm’) —

Existing alignment in small devices.

1. The logo needs to be center aligned.
2. The primary navigation menu needs to take full width and be center aligned.

For the first requirement, we can add grid specific classes in HTML to justify the flex items —

Adding grid specific utility classes.

For the second requirement, we need a combination of both.

First, we will use utility classes to assign full width to the navigation bar —

Adding grid specific utility classes.

Next, we will write styles for the mat-tab-links class using the Boostrap mixin —

The class for which responsive style has to be written.

The desired design achieved using Bootstrap classes and mixins.

Next Steps

With the styling framework ready, we can now proceed with the following tasks chronologically —

Part 3 — Including Angular Material
Part 4 — Service/ API Integration

P.S. You can refer to my Git repo for all the code and the latest updates on the sample application.

Working Example

You can visit https://angular.owrrpon.dev/ for the working sample Angular application that follows the optimized codebase setup outlined in the above guide.