diff options
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/dev-tools-pages/README.md | 14 |
1 files changed, 14 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/README.md b/packages/dev-tools-pages/README.md index b7bdf3bc3..39fe70a25 100644 --- a/packages/dev-tools-pages/README.md +++ b/packages/dev-tools-pages/README.md @@ -35,6 +35,20 @@ Visit [http://localhost:3572/](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](http://basscss.com/) 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 ```bash |