Layout

The single column layout is the simplest layout and consists of a single central column housing all the content.

The 3 main elements:

PageRoot

Placed at the root of a page, ensures the page always takes the full height of the browser window. A great way to ensure the correct background color fills the screen.

Section

Takes the full width of the screen, and is ready to handle a Container inside.

Container

Is the central column, within a single-column layout. Responsive by default.

Example:

Resize the browser to see the interplay between PageRoot, Section and Container:

(Note how the PageRoot takes the full screen height, the Section the full width, and the Container a constrained central position.)

1import { PageRoot, Section, Container } from '@hummingbot/hbui/elements/layout'
2import { P } from '@hummingbot/hbui/elements/typography'
3
4<PageRoot>
5  <Section>
6    <Container>
7      <P>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</P>
8    </Container>
9  </Section>
10</PageRoot>

The sidebar layout consists of a sidebar on the left side together with a single column layout on the right side.

The 3 main elements:

SBLRoot

Placed at the root of a sidebar layout page, handles the containment of SBLRootSidebar and SBLRootContent.

SBLRootSidebar

The container for the content in the sidebar, such as navigation. This element will be hidden in small screens (mobile) and should be replaced with a mobile navigation.

SBLRootContent

The container where the main content will be placed. A Section and Container elements should be placed inside this element to ensure correct responsive behavior.

Resize the browser to see the responsive behavior in action. Also, note how the layout takes the height of your browser window, and how the content area is scroolable.

1import { SBLRoot, SBLRootSidebar, SBLRootContent, Section, Container } from '@hummingbot/hbui/elements/layout'
2import { P } from '@hummingbot/hbui/elements/typography'
3
4<SBLRoot>
5  <SBLRootSidebar>
6    <P>Sidebar</P>
7  </SBLRootSidebar>
8  <SBLRootContent>
9    <Section>
10      <Container>
11        <P>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</P>
12        <br />
13        <P>Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit.</P>
14        <br />
15        <P>Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</P>
16        <br />
17        <P>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.</P>
18        <br />
19        <P>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Maecenas faucibus mollis interdum.</P>
20        <br />
21        <P>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</P>
22        <br />
23        <P>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.</P>
24        <br />
25        <P>Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.</P>
26        <br />
27        <P>Sed posuere consectetur est at lobortis. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</P>
28        <br />
29        <P>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.</P>
30        <br />
31        <P>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</P>
32        <br />
33        <P>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod.</P>
34        <br />
35      </Container>
36    </Section>
37  </SBLRootContent>
38</SBLRoot>