otep

0.0.1-alpha.11 • Public • Published

otep logo

User interface library for React.

Notice

This is currently alpha software, prone to breaking changes. Use at your own risk!

Examples

Hero

import { Hero, HeroTitle, HeroSubtitle } from 'otep'
 
const Example = () =>
  <Hero>
    <HeroTitle>Welcome</HeroTitle>
    <HeroSubtitle>This is a welcome page.</HeroSubtitle>
  </Hero>

Grid, Forms, and Tiles

import {
  Section,
  Container,
  Row,
  Column,
  H2,
  Field,
  Label,
  Control,
  RadioSet,
  Tile,
} from 'otep'
 
const Example = () =>
  <Section>
    <Container>
      <Row>
        <Column tablet="two-thirds">
          <H2>Contact</H2>
          <Field horizontal>
            <Label>Choose one</Label>
            <Control>
              <RadioSet
                items={[
                  { label: 'Foo', value: 'foo' },
                  { label: 'Bar', value: 'bar' },
                  { label: 'Baz', value: 'baz' },
                ]}
              />
            </Control>
          </Field>
        </Column>
        <Column tablet="one-third">
          <Tile bold brand="primary">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </Tile>
        </Column>
      </Row>
    </Container>
  </Section>

Installation

# Yarn
yarn add otep

# NPM
npm install --save otep

Usage

Step one

Set up the OtepProvider container component near the top of your element tree, and provide it with a theme.

OtepProvider provides the supplied theme to its descendants via context, and also injects global styles (both reset styles and theme-based plain-element styles).

import React from 'react'
import ReactDOM from 'react-dom'
 
import { OtepProvider, themes } from 'otep'
 
import App from './App'
 
 
const myTheme = {
  ...themes.standard,
  // extend the standard theme at will!
}
 
 
// example
const Root = () =>
  <OtepProvider theme={theme}>
    <App />
  </OtepProvider>
 
 
// example
ReactDOM.render(
  <Root />,
  document.getElementById('root'),
)

Step Two

Import components and use them!

Individual component documentation coming soon.

import React from 'react'
 
import {
  Section,
  Container,
  Row,
  Column,
  Button,
} from 'otep'
 
 
export default App = () =>
  <Section>
    <Container>
      <Row>
        <Column tablet="one-half">
          <Button>Click me</Button>
        </Column>
        <Column tablet="one-half">
          <Button>Click me too</Button>
        </Column>
      </Row>
    </Container>
  </Section>
 

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request

Credits

License

MIT

Package Sidebar

Install

npm i otep

Weekly Downloads

1

Version

0.0.1-alpha.11

License

MIT

Last publish

Collaborators

  • andrewsuzuki