Skip to content
This repository was archived by the owner on Jan 4, 2024. It is now read-only.

Commit 80e42ce

Browse files
DanielBriertonDanielBrierton
authored
Added initial docs for components (#115)
* Added initial docs for components * Remove duplicate Card header * Remove duplicate Badge header * Fixed errors in Card, ignore components/index.js * Add changelog to docs * Bumped version, updated CHANGELOG, updated README * Built with new version number
1 parent 2405973 commit 80e42ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+6145
-270
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,5 @@ yarn-debug.log*
1818
yarn-error.log*
1919

2020
src/**/*.css
21+
22+
styleguide

‎CHANGELOG.md

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
# Changelog
1+
*The format of this document is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).*
22

3-
*The format of this document is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
4-
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).*
3+
## [v1.2.0](https://github.com/RaspberryPiFoundation/Bits/compare/v1.1.20...v1.2.0) - 2019-07-05
4+
5+
### Changed
6+
7+
- Added documentation
58

69
## [v1.1.20](https://github.com/RaspberryPiFoundation/Bits/compare/v1.1.19...v1.1.20) - 2019-05-23
710

‎README.md

+17
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@ You can use gulp to watch the scss files & rebuild as necessary:
2929
npm run gulp:watch
3030
```
3131

32+
When writing documentation, use:
33+
```
34+
npm run docs
35+
```
36+
3237
Before creating a PR, make sure you run:
3338
```
3439
npm run build
@@ -39,6 +44,18 @@ to build all the css & javascript files.
3944

4045
**Taken from the README of https://github.com/transitive-bullshit/react-modern-library-boilerplate**
4146

47+
## Documentation
48+
49+
Documentation for Bits is written using [React Styleguidist](https://react-styleguidist.js.org). To run a local docs server, run:
50+
```
51+
npm run docs
52+
```
53+
54+
To build the documentation as a static site, run:
55+
```
56+
npm run docs:build
57+
```
58+
4259
### Setup this repo for local linking
4360

4461
In the root of this directory, run the following:

‎doc/styles/breakpoints.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
| name | size |
2+
|:--|:--|
3+
| xs | < 576px |
4+
| sm | >= 576px |
5+
| md | >= 768px |
6+
| lg | >= 992px |
7+
| xl | >= 1200px |
8+
9+
Code should be written for `xs` first, then modified using the `sm`, `md`, `lg` and `xl` breakpoints where appropriate.

‎doc/styles/colours.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
These are the standard colors used for our branding, however the list is not exhaustive, and new colors may be introduced where appropriate.
2+
3+
| | Color Name | HEX Code |
4+
|:--|:--|:--|
5+
| <span style="display: block; height: 16px; width: 16px; background: #000000"></span> | black | #000000 |
6+
| <span style="display: block; height: 16px; width: 16px; background: #ffffff"></span> | white | #ffffff |
7+
| <span style="display: block; height: 16px; width: 16px; background: #c51d4a"></span> | brand-rpi-red | #c51d4a |
8+
| <span style="display: block; height: 16px; width: 16px; background: #6ac146"></span> | brand-rpi-green | #6ac146 |
9+
| <span style="display: block; height: 16px; width: 16px; background: #009b3a"></span> | brand-cc-green | #009b3a |
10+
| <span style="display: block; height: 16px; width: 16px; background: #ffb12a"></span> | primary-yellow | #ffb12a |
11+
| <span style="display: block; height: 16px; width: 16px; background: #f68e3b"></span> | primary-orange | #f68e3b |
12+
| <span style="display: block; height: 16px; width: 16px; background: #f3524f"></span> | primary-red | #f3524f |
13+
| <span style="display: block; height: 16px; width: 16px; background: #a76fba"></span> | primary-violet | #a76fba |
14+
| <span style="display: block; height: 16px; width: 16px; background: #004881"></span> | primary-navy | #004881 |
15+
| <span style="display: block; height: 16px; width: 16px; background: #41a6c4"></span> | primary-blue | #41a6c4 |
16+
| <span style="display: block; height: 16px; width: 16px; background: #10aeb0"></span> | primary-turquoise | #10aeb0 |
17+
| <span style="display: block; height: 16px; width: 16px; background: #53ce63"></span> | primary-green | #53ce63 |
18+
| <span style="display: block; height: 16px; width: 16px; background: #fddd42"></span> | secondary-yellow | #fddd42 |
19+
| <span style="display: block; height: 16px; width: 16px; background: #ffc869"></span> | secondary-orange | #ffc869 |
20+
| <span style="display: block; height: 16px; width: 16px; background: #f68583"></span> | secondary-red | #f68583 |
21+
| <span style="display: block; height: 16px; width: 16px; background: #c29acf"></span> | secondary-violet | #c29acf |
22+
| <span style="display: block; height: 16px; width: 16px; background: #4c7fa7"></span> | secondary-navy | #4c7fa7 |
23+
| <span style="display: block; height: 16px; width: 16px; background: #87dcf6"></span> | secondary-blue | #87dcf6 |
24+
| <span style="display: block; height: 16px; width: 16px; background: #58c7c8"></span> | secondary-turquoise | #58c7c8 |
25+
| <span style="display: block; height: 16px; width: 16px; background: #87dd92"></span> | secondary-green | #87dd92 |
26+
| <span style="display: block; height: 16px; width: 16px; background: #f68583"></span> | secondary-pink | #f68583 |
27+
| <span style="display: block; height: 16px; width: 16px; background: #374e60"></span> | secondary-blue-dark | #374e60 |
28+
| <span style="display: block; height: 16px; width: 16px; background: #222222"></span> | ui-black | #222222 |
29+
| <span style="display: block; height: 16px; width: 16px; background: #444444"></span> | ui-grey-dark | #444444 |
30+
| <span style="display: block; height: 16px; width: 16px; background: #999999"></span> | ui-grey-medium | #999999 |
31+
| <span style="display: block; height: 16px; width: 16px; background: #cccccc"></span> | ui-grey-light | #cccccc |
32+
| <span style="display: block; height: 16px; width: 16px; background: #eeeeee"></span> | ui-grey-lightest | #eeeeee |
33+
| <span style="display: block; height: 16px; width: 16px; background: #f5f6f9"></span> | ui-white | #f5f6f9 |
34+
| <span style="display: block; height: 16px; width: 16px; background: #fcf67f"></span> | ui-yellow | #fcf67f |

‎doc/styles/fonts.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
### Font Family
2+
All non-monospace text uses Rubik, which can be found on Google fonts here: https://fonts.google.com/specimen/Rubik
3+
4+
Monospace text uses Space Mono, available on Google Fonts here: https://fonts.google.com/specimen/Space+Mono
5+
6+
### Font Sizes
7+
Font sizes differ between breakpoints. At md, lg and xl, the larger value will be used, and at xs and sm the smaller value will.
8+
9+
| type | size | weight |
10+
|:--|:--|:--|
11+
| body | 1.8/1.6rem | 300 |
12+
| h1 | 3.6/2.4rem | 700 |
13+
| h2 | 2.8/2rem | 500 |
14+
| h3 | 2.2/2rem | 500 |
15+
| h4 | 1.8/1.6rem | 500 |

‎lib/Bits.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
66
Author: The Raspberry Pi Foundation
77
Author URI: https://raspberrypi.org
8-
Version: 1.1.20
8+
Version: 1.2.0
99
*/
1010

1111

‎lib/Bits.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)