Skip to content
This repository has been archived by the owner on Jun 13, 2024. It is now read-only.

Latest commit

 

History

History
109 lines (98 loc) · 2.81 KB

PageDesign.md

File metadata and controls

109 lines (98 loc) · 2.81 KB
Raw

This package is meant to replace usage of 99% of HTML nodes in favor of using specific components to change the page layout. This ensures that the styles for most of app will be contained in this package and can be adjusted with time. Styles can also be versioned tracked for usage. It also keeps our HTML style components documented. If you find yourself using HTML, double check that it is not possible to first design with the provided components first, then consider creating a component(s) to abstract the HTML and styles.

Most layouts can be accomplished with either the <Row /> or the <Column /> components. Take the following form example:

import Form from './src/forms/Form'
import Column from './src/layout/Column'
import Row from './src/layout/Row'
import FormLabel from './src/forms/FormLabel'
import InputString from './src/inputs/InputString'
import Dropdown from './src/dropdowns/Dropdown'
;


<Form>
  <Row>
    <FormLabel>Label</FormLabel>
    <InputString value="test" onChange={() => {}}/>
  </Row>
  <Row vAlign="center">
    <FormLabel>Stacked Select boxes</FormLabel>
    <Column>
      <Dropdown values={[{id: 1, text: 'test'}]} onChange={() => {}}/>
      <Dropdown values={[{id: 1, text: 'test'}]} onChange={() => {}}/>
    </Column>
  </Row>
</Form>

Or this panel:

import Form from './src/forms/Form'
import Column from './src/layout/Column'
import Row from './src/layout/Row'
import FormLabel from './src/forms/FormLabel'
import InputString from './src/inputs/InputString'
import Dropdown from './src/dropdowns/Dropdown'
import Panel from './src/panel/Panel'
import PanelContents from './src/panel/PanelContents'

;

<Panel>
<PanelContents>
  <Row hAlign="center" fill>
    <Row vAlign="center" hAlign="center">
      <p>Theres a bunch of data here</p>
      <small>Im tiny</small>
    </Row>
    <Column>
      <span>tag 1</span>
      <span>tag 2</span>
    </Column>
  </Row>
  <Row wrap>
    <Column spaced>
      <h5>1</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>2</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>3</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>4</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>5</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>6</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>7</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
    <Column spaced>
      <h5>8</h5>
      <p>Some random text</p>
      <p>Some random text</p>
    </Column>
  </Row>
  </PanelContents>
</Panel>