In this section, we will reimplement the graphic editor introduced in the Organizing your project structure with Sass section with Bootstrap 4 (https://v4-alpha.getbootstrap.com) and PrimeNG components. Starting with the version v4.0.0-alpha.6, Bootstrap only has a flexbox-based layout by default, with no fallback.

Flexbox is a new layout model, which is widely supported in all modern browsers (http://caniuse.com/#search=flexbox). There are many tutorials on the Internet. You can, for example, read a comprehensive guide to the CSS flexbox layout at https://css-tricks.com/snippets/css/a-guide-to-flexbox. Flexbox tackles many layout problems. One of the main advantages of flexbox is the ability to fill extra space. All columns in the flexbox layout have the same height irrespective of their content. Let's show final screens of the graphic editor for two device resolutions.

For desktop:

For mobile:

Beside PrimeNG, we need to install the latest Bootstrap 4. This is 4.0.0-alpha.6 at the time of writing:

npm install [email protected] --save

After installation, you need to import the CSS file with flexbox layout rules into the main.scss file:

@import "~bootstrap/dist/css/bootstrap-grid.css";

In the prior Bootstrap versions, you had to enable the flexbox layout explicitly:

$enable-flex: true;
@import "~bootstrap/scss/bootstrap-grid.scss";

If you intend to use the styles for additional flex alignment options, you have to import bootstrap-grid.scss and _flex.scss:

@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/utilities/flex";

_flex.scss is a set of utilities for vertically and horizontally alignment of columns, for controlling the visual order of your content, and so on. The file contains various CSS rules such as justify-content-start, align-items-end, align-self-auto, flex-first, flex-last, and so on. Some of the rules are explained here. Refer to the official Bootstrap documentation to learn more details (https://v4-alpha.getbootstrap.com/layout/grid).

The skeleton of the whole application resides in two files: app.component.html and layout.component.html. The first file contains a PrimeNG's tabbed menu with two menu items:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <p-tabMenu [model]="items"></p-tabMenu>
    </div>
  </div>
</div>

<router-outlet></router-outlet>

Each item defines routerLink:

items: MenuItem[];
...
this.items = [
  {label: 'SVG Graphic-Engine', icon: 'fa-paint-brush',
    routerLink: '/svg'},
  {label: 'Canvas Graphic-Engine', icon: 'fa-paint-brush',
    routerLink: '/canvas'}
];

A click on a tab in the tabbed menu loads layout.component.html into router-outlet:

<div class="container-fluid">
  <div class="row align-items-center ge-toolbar">
    <div class="col">
      <ge-toolbar></ge-toolbar>
    </div>
  </div>
  <div class="row no-gutters">
    <div class="col-md-8 flex-md-unordered col-drawing-area">
      <div class="drawing-area">
        <ng-content select=".ge-drawing-area"></ng-content>
      </div>
    </div>
    <div class="col-md-2 flex-md-last">
      <div class="flex-column no-gutters">
        <div class="col ge-palette">
          <ge-palette></ge-palette>
        </div>
        <div class="col ge-shapes">
          <ge-shapes></ge-shapes>
        </div>
      </div>
    </div>
    <div class="col-md-2 flex-md-first">
      <ge-properties></ge-properties>
    </div>
  </div>
</div>

The ng-content area gets replaced by SVG or Canvas surface where the user can draw shapes. The ge-toolbar component contains PrimeNG's <p-toolbar>. The other ge-* components contain panels, for example, <p-panel header="Palette">.

The most interesting part is the style classes. The short description of the style classes used in the preceding code snippet is as follows:

Note that, on small devices, we have decreased the font size. This can be achieved with breakpoint mixins provided by Bootstrap:

@import "~bootstrap/scss/mixins/breakpoints";

@include media-breakpoint-down(md) {
  body {
    font-size: 0.9em;
  }
}

There are various breakpoint mixins, which expect one of the following parameters:

• xs: Extra small screens < 576px
• sm: Small screens >= 576px
• md: Medium screens >= 768px
• lg: Large screens >= 992px
• xl: Extra large screens >= 1200px

For example, the element with the ge-palette style class gets margin-top: 0 on screens over 768px, and margin-top: 0.5em on screens less than 768px:

.ge-palette {
  margin-top: 0.5em;
}

@include media-breakpoint-up(md) {
  .ge-palette {
    margin-top: 0;
  }
}