aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/dev-tools-pages/README.md14
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