protocol/packages/dev-tools-pages/README.md

Dev tools pages

This repository contains our dev tools pages.

Local Dev Setup

Requires Node version 6.9.5 or higher & yarn v1.9.4

1. Install dependencies for monorepo:

Make sure you install Yarn v1.9.4 (npm won't work!). We rely on our yarn.lock file and on Yarn's support for workspaces in our monorepo setup.

yarn install

2. Initial setup

To build this package and all other monorepo packages that it depends on, run the following from the monorepo root directory:

PKG=@0x/dev-tools-pages yarn build

Note: Ignore the WARNING in asset size limit and WARNING in entrypoint size limit warnings.

3. Run dev server

cd packages/dev-tools-pages
yarn dev

Visit http://localhost:3572/ in your browser.

The webpage will refresh when source code is changed.

4. Code!

There are some basic primitives we'd like you to use:

1. <Container>Stuff</Container>: Use containers instead of divs,spans,etc... and use it's props instead of inline styles (e.g style={{margin: 3}} should be margin="3px"

2. <Text>Look ma, text!</Text>: Use text components whenever rendering text. It has props for manipulating texts, so again no in-line styles. Use fontColor="red", not style={{color: 'red'}}.

3. Styled-components: See the ui/button.tsx file for an example of how to use these.

4. BassCss: This library gives you access to a bunch of classes that apply styles in a browser-compatible way, has affordances for responsiveness and alleviates the need for inline styles or LESS/CSS files.

With the above 4 tools and following the React paradigm, you shouldn't need CSS/LESS files. IF there are special occasions where you do, these is a all.less file, but this is a solution of last resort. Use it sparingly.

Clean

yarn clean

Lint

yarn lint

Prettier

Run from the monorepo root directory:

yarn prettier

Resources

Toolkit

• Styled Components
• BassCSS

Recommended Atom packages:

• atom-typescript
• linter-tslint

Contributing

We strongly recommend that the community help us make improvements and determine the future direction of the protocol. To report bugs within this package, please create an issue in this repository.

Please read our contribution guidelines before getting started.