Building layouts with Uik

First thing to know is that you don't have to use any of these components to make your layout work in your project. You can freely build your layout with bootstrap or any other UI library as well.

On this page, we are going to show you how to build a dashboard type layout with already made components that are part of the kit. The main building blocks are using flexbox properties.

Example layout

Let's build our hypothetical layout with some help from the kit.

Top Bar
Menu
Main Content

Step 1: splitting the layout verticaly - top bar and the content

We know that we will always have these 3 segments visible. Let's cut the layout down into two parts. The top bar and the rest first, like this:


Top Bar
Menu
Main Content

For splitting the layout vertically, we can use UikContainerVertical. The component has a display: flex property with flex-direction: column. The behaviour is very similar to <View /> component from react native.


The code with UikContainerVertical

import {
  UikContainerVertical
} from '@uik'

...

const MyLayout = () => (
  <div style={ { height: '400px' } }> {/* just to simulate viewport*/}
    <UikContainerVertical>
      <div style={ { flexBasis: '70px', background: '#34ace0' } }>
        Top Bar
      </div>
      {/* we are adding flex-grow: 1 because we are inside flexbox element and we want to fill rest of the viewport height */}
      <div style={ { flexGrow: '1', background: '#ffb142' } }>
        Some content
      </div>
    </UikContainerVertical>
  </div>
)

Result:

Top Bar
Some content

Step 2: splitting the content horizontaly - navigation and the page

The vertical split is done, let's cut down the bottom part of our layout like this:


Top Bar
Menu
Main Content

For splitting the layout horizontaly, we can use UikContainerHorizontal. It works the same way as UikContainerVertical, just horizontaly.


The code with UikContainerHorizontal

import {
  UikContainerVertical,
  UikContainerHorizontal,
} from '@uik'

...

const MyLayout = () => (
  <div style={ { height: '400px' } }> {/* just to simulate viewport*/}
    <UikContainerVertical>
      <div style={ { flexBasis: '70px', background: '#34ace0' } }>
        Top Bar
      </div>
      <UikContainerHorizontal>
        <div style={ { background: '#ff5252', flexBasis: '30%' } }>
          Menu
        </div>
        <div style={ { background: '#ffb142', flexBasis: '70%' } }>
          Main Content
        </div>
      </UikContainerHorizontal>
    </UikContainerVertical>
  </div>
)

Result:

Top Bar
Menu
Main Content

(Optional) Step 3: Using custom Uik components in the layout

If you generally like the layout of the UI Kit, you can also use the predefined components to build the layout quickly. Here is an simple example, in which we will be using:


For splitting the layout horizontaly, we can use UikContainerHorizontal. It works the same way as UikContainerVertical, just horizontaly.


The code

const MyLayout = () => (
  <UikContainerVertical>
    <UikTopBar>
      <UikTopBarSection>
        <UikTopBarTitle>Dashboard</UikTopBarTitle>
      </UikTopBarSection>
    </UikTopBar>
    <UikContainerHorizontal>
      <UikNavPanel>
        <UikNavSection>
          <UikNavSectionTitle>Menu</UikNavSectionTitle>
          <UikNavLink highlighted>Hello item</UikNavLink>
          <UikNavLink highlighted>Title for link</UikNavLink>
        </UikNavSection>
      </UikNavPanel>
      <UikLayoutMain>
        <UikWidget
          margin
          padding
        >
          <h2>Title</h2>
        </UikWidget>
      </UikLayoutMain>
    </UikContainerHorizontal>
  </UikContainerVertical>
)

Result

Dashboard