Bootstrap flexbox layout meets PrimeNG

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 bootstrap@4.0.0-alpha.6 --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:

Style class Description row This serves as a container for columns that go inside the row. Each column can take from 1 to 12 spaces. align-items-* This defines where flex columns inside the row are vertically positioned. The align-items-center class positions the column in the middle. no-gutters This removes the margin from rows and padding from columns. col This sets the auto-layout mode--a new feature of the Bootstrap 4 for equal width columns. The columns will automatically distribute the space in the row. col-<prefix>-<number> This indicates the number of columns you would like to use out of the possible 12 per row. The prefix defines the breakpoint. For example, the col-md-8 class means, the column will be 8 of 12 on medium, and larger screens and 12 of 12 (default) on screens smaller than medium size. flex-column This changes flex-direction of items (columns). Items are laid out either in the horizontal or vertical direction. The flex-column class changes the direction from left-to-right to top-to-bottom. flex-<prefix>-first This reorders the column as the first column in the layout. The prefix defines the breakpoint the reordering should be applied from. flex-<prefix>-last This reorders the column as last column in the layout. The prefix described as earlier. flex-<prefix>-unordered This displays the columns between first and last. The prefix described as earlier.

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;
  }
}