2. Building pages

A preview of what you’ll build:

This tutorial has an accompanying GitHub repository called carbon-tutorial-angular that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

In our last step we added our styles, components and icon packages. Now we are going to build the pages with the grid component.

In styles.scss, we need to configure our grid to use 16 columns instead of the default 12 columns. We do this by adding grid-columns-16: true in our $feature-flags. $feature-flags must be set before importing from carbon-components, otherwise they won’t take affect.

Next we’ll import our Carbon grid component into home.module.ts and landing-page.component.spec.ts.

Let’s add our grid elements to landing-page.component.html.

In order to use the grid, we need to wrap everything in a <div ibmGrid>. We can continue to make rows by adding a <div ibmRow> inside the grid, as well as make columns within those rows by adding <div ibmCol [columnNumbers]="{'[breakpoint]': [size]}".

Our column sizes are specified by the number of columns they’ll be spanning. If we use [columnNumbers]="{'lg': 4}", it means it’ll span 4 of the 16 columns. If we use [columnNumbers]="{'lg': 8}" it means it’ll span 8 of the 16 columns, and so on.

We’ve included the designs for this tutorial app in the design.sketch file found as a top-level file in the carbon-tutorial-angular repository. But, if you don’t have Sketch installed and available to inspect the design, we provide screenshots.

We’ll break this down into three rows. The first row with the gray background doesn’t appear to need any columns. The second row with the white background looks like it has two columns of different widths. The third row with the gray background looks like it has four columns of equal width.

We’ll make rows like so:

We added a class of bx--grid--full-width to the grid container since our rows need to expand the whole page without any margins. We also added some custom classes like landing-page, landing-page__banner, landing-page__r2, etc., which we will use later.

Also, take notice of the second row. The tab content only covers 7 columns at this large viewport to prevent overly-large line lengths, so we needed to add a 1 column offset bx--offset-lg-1 to the second column to fill the full 16 columns in the grid. Then, both of those columns have 'md': 4 so they are of equal width at medium-sized viewports.

We’ll start adding HTML elements and components by row.

In our first row we’ll need a Breadcrumb component. First, let’s import the components we need in home.module.ts and landing-page.component.spec.ts.

We can now add our component to the first row, along with a header, like so:

You may notice that the styles look off. Don’t worry, we’ll fix these later.

In our second row we’ll need Tabs and Button components also in home.module.ts and landing-page.component.spec.ts. We’ll update the carbon-components-angular import to:

Now we need to modify the second row to use the Tab component.