Implement New Layouts (Tracking Issue)

This is a tracking issue for setting up new layout components within Mark One. These components fall under two broad categories: Grids and Typography.

Grids

We need a flexible system for laying out components on the page, which we can most likely implement with CSS Grid, using the ws values defined in our MarkOneTheme and defining new values as needed. At a high level, the idea would be to implement a 12-column grid (new rows will be added implicitly as content is added) with consistent spacing between rows and columns. That way we can place items on the grid at 1/12, 1/6, 1/4, 1/3, 1/2 increments as we lay out the interfaces. For responsive interfaces, we can change those placement values to collapse/expand the number of columns as the available screen size changes. This should be possible with a few primitive components that just handle spacing and layout

• #181
• #183
  - [ ] #182

Example:

<PageBody>
  <GridWrapper>
    <GridContainer width="6" placement="center"/>
      <GridWrapper>
         <GridItem width="10" placement="2">
           Would you like to continue?
         </GridItem>
         <GridItem width="4" placement="left">
           <Button>Yes</Button>
         </GridItem>
         <GridItem width="4" placement="right">
           <Button>No</Button>
         </GridItem>
      </GridWrapper>
    </GridContainer>
  </GridWrapper
</PageBody>

Other Examples:

• Bootstrap Grid System
• 960 Grid System

Further Reading:

• Grids in Graphic Design

Typography

We already have some typographic components defined in Mark One, but we should expand the number of options we have to fit more use cases. These components should also rely on our Mark One theme. The list will probably grow as our application scope increases, but our starting point should be:

• Paragraph
• PageTitle
• SectionHeading
• NoteText
• #184
• #185
• #187
• #186