Skip to main contentCarbon Design System

2. Building pages

Now that we have a React app using the UI Shell, it’s time to build a few static pages. In this step, we’ll become comfortable with the Carbon grid and various Carbon components.

Preview

A preview of what you’ll build:

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial 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.

Branch

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

git fetch upstream
git checkout -b v11-react-step-2 upstream/v11-react-step-2

Note: This builds on top of step 1, but be sure to check out the upstream step 2 branch because it includes the static assets required to get through this step.

Build and start app

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

yarn

Then, start the app:

yarn start

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

IE11 polyfills

Before we get started with this step, we’ll be adding some components that require IE11 polyfills. As shown in the Carbon React documentation, go ahead and add these imports to the top of the root index.js. They aren’t all needed, but we’ll add them all to play it safe for the duration of the tutorial.

src/index.js
import 'core-js/modules/es7.array.includes';
import 'core-js/modules/es6.array.fill';
import 'core-js/modules/es6.string.includes';
import 'core-js/modules/es6.string.trim';
import 'core-js/modules/es7.object.values';

Note: You may be wondering where core-jscame from because it’s not a Carbon package and we haven’t explicitly installed it. Run yarn why core-js and you’ll see there are a number of packages that have brought it in as a dependency.

Add landing page grid

Let’s add our grid elements to LandingPage.js.

In order to use the grid, we need to wrap everything in a <Grid>. Because we’re building with the new CSS Grid, we won’t be using typical rows. We’ll use a combination of <Column> and nested subgrids to create our layout.

The CSS Grid is a 16 column grid. We will specify the span of a <Column> using the sm, md, and lg props. For example, <Column sm={2} md={8} lg={8}/> means the column will span 2/4 columns at the small breakpoint, 8/8 columns at the medium breakpoint, 8/16 columns at the large breakpoint.

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

Landing page grid

Landing page grid

Pro tip: CTRL-L toggles the layout in Sketch.

First, we need to import our grid components at the top of LandingPage.js:

src/content/LandingPage/LandingPage.js
import { Grid, Column } from '@carbon/react';

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:

src/content/LandingPage/LandingPage.js
return (
  <Grid className="landing-page" fullWidth>
    <Column lg={16} md={8} sm={4} className="landing-page__banner">
      1
    </Column>
    <Column lg={16} md={8} sm={4} className="landing-page__r2">
      <Grid