Tutorial for Columns

Let's look at the interface layout

What you will be learning

  • How to have more than one column of content
  • How to setup the responsive behaviour
  • How to design more complex layouts with ratios

Using columns

So far, we've used one layout option: putting our components in a ns-panel and getting a simple central column of content responding to all viewports.

We can do more with our panels using a component called ns-column.

With this component we can start looking at more complex layouts:

  • 2, 3, 4 columns
  • 2:1, 1:2, 1:3, 3:1 ratios
  • choose the specific options for each viewport

These options give a wider range of possibilities.

Exercise

Let's try to play with columns.

Let's write some markup for that.

Add a ns-panel. Inside the panel, add a ns-column. And inside the column component, add three ns-card components (with their heading/paragraph and call to action).

👀 Hint

Try this piece of code:

<ns-panel>
  <ns-column>
    <ns-card>
      <h2 slot="heading">Card #1</h2>
      <p slot="paragraph">This is the first card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #2</h2>
      <p slot="paragraph">This is the second card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #3</h2>
      <p slot="paragraph">This is the third card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>        
  </ns-column>
</ns-panel>

Right now, it doesn't seem to make much of a difference. But let's look at the column component documentation, and see what attributes we have at our disposal.

We can set an number of columns for specific viewports. Each viewport will have a maximum amount of columns that are best suited to their maximum width.

Let's try and set the basketballcourt viewport to 2 columns.

Add the basketballcourt attribute to ns-column and set its value to "2".

👀 Hint

Try this piece of code:

<ns-panel>
  <ns-column basketballcourt="2">
    <ns-card>
      <h2 slot="heading">Card #1</h2>
      <p slot="paragraph">This is the first card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #2</h2>
      <p slot="paragraph">This is the second card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #3</h2>
      <p slot="paragraph">This is the third card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>        
  </ns-column>
</ns-panel>

We now have 2 columns (hopefully your screen is big enough for the preview to hit that viewport), and cards are being placed in those as they come: card #1 in the first column, card #2 in the second column, and card #3 in the first column. And if we had more, it would carry on like that.

As you can see, the column component distributes its direct children components in the columns as they come in the markup.

Bigger viewports will inherit the number of columns you declared for the previous one unless you decide otherwise and set a different amount of columns using the bigger viewport attribute.

If your screen allows for it (if not, maybe do it in the Nucleus Playground), try and add other attributes for other viewports.

In the same way, you can play with ratios (thirds and quarters). This will allow you to create wider columns for the main content, with a supporting narrower column.

If the size of your screen allows it, try and create a 2:1 by changing the attribute for the hockeypitch layout and see how your cards react.

👀 Hint

Try this piece of code:

<ns-panel>
  <ns-column basketballcourt="2" hockeypitch="2:1">
    <ns-card>
      <h2 slot="heading">Card #1</h2>
      <p slot="paragraph">This is the first card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #2</h2>
      <p slot="paragraph">This is the second card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>
    <ns-card>
      <h2 slot="heading">Card #3</h2>
      <p slot="paragraph">This is the third card</p>
      <ns-cta slot="cta">Click me</ns-cta>
    </ns-card>        
  </ns-column>
</ns-panel>

With these options in your layout toolbox, you can start creating a wide range of interface options, and control how they respond to the different viewports.

There are many options, you can even nest ns-column within other ns-column to create more intricate layouts when needed.

The "View in multiple viewports" option in the playground will be very useful to see how your layouts will respond across the viewport spectrum.

Useful resources