├── .gitignore
├── versions
    ├── current
    └── history
├── .babelrc
├── img
    └── header-cid-inspector.png
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── components
    ├── Heading.jsx
    ├── Text.jsx
    ├── Html.jsx
    ├── Box.jsx
    ├── Swatch.jsx
    └── Button.jsx
├── package.json
├── pages
    └── index.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /docs
3 | /lab.json
4 | 


--------------------------------------------------------------------------------
/versions/current:
--------------------------------------------------------------------------------
1 | QmW7Y6314aYnwKPJCtLv747fZ9HuixjVjkJxH6asChL3Hs
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "env",
4 |     "stage-2",
5 |     "react"
6 |   ]
7 | }


--------------------------------------------------------------------------------
/img/header-cid-inspector.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipfs-inactive/ipfs-ui-style-guide/HEAD/img/header-cid-inspector.png


--------------------------------------------------------------------------------
/versions/history:
--------------------------------------------------------------------------------
1 | QmbptNPkmmjuAPCVa3HwCobXuRJ3nv2bC4r2aFNXPpeY3P
2 | Qme6ZhtQgAtLGV2qmq2XrPukDdVBU8zvVPAKUXr13cQaup
3 | QmZtkeeY6UAncpzUrA1bospb5eAGj461ZMSquCE2eHJUCE
4 | QmUd6rjFKxGcHVJttp3Rk63XfNorCVQ34xpqGRhcy9o7Wm
5 | QmXJrqqmMgmcF1d92ibbTeR6d3wxxosTHeNwRQVy1yMKTX
6 | QmXAFFqZGqWQduM9B5SeNX2d7exFatwbqgqyans5R77ZDT
7 | QmP6yiLLjQqD8SREb1ueBwxeZcLtBJJe9P8SWXDFirGL2s
8 | QmW7Y6314aYnwKPJCtLv747fZ9HuixjVjkJxH6asChL3Hs
9 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: need/triage
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/components/Heading.jsx:
--------------------------------------------------------------------------------
 1 | import {Text} from './Text.jsx'
 2 | 
 3 | // Fancy header for jumbotrons in Montserrat
 4 | export const PosterH1 = Text.withComponent('h1')
 5 | 
 6 | PosterH1.defaultProps = {
 7 |   color: 'white',
 8 |   fontFamily: 'montserrat',
 9 |   fontSize: 5,
10 |   fontWeight: 400
11 | }
12 | 
13 | // Fancy strapline for jumbotrons in Montserrat and green
14 | export const PosterH2 = Text.withComponent('h2')
15 | 
16 | PosterH2.defaultProps = {
17 |   color: 'aqua',
18 |   fontFamily: 'montserrat',
19 |   fontSize: 4,
20 |   fontWeight: 400
21 | }
22 | 
23 | // Regular document section heading
24 | export const H2 = Text.withComponent('h2')
25 | 
26 | H2.defaultProps = {
27 |   fontSize: 6,
28 |   fontWeight: 600,
29 |   color: 'charcoal',
30 |   m: 1
31 | }
32 | 
33 | // Regular subheading
34 | export const H3 = Text.withComponent('h3')
35 | 
36 | H3.defaultProps = {
37 |   fontSize: 4,
38 |   fontWeight: 500,
39 |   color: 'charcoal-muted',
40 |   m: 1
41 | }
42 | 


--------------------------------------------------------------------------------
/components/Text.jsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import {
 3 |   color,
 4 |   space,
 5 |   width,
 6 |   fontSize,
 7 |   fontWeight,
 8 |   textAlign,
 9 |   lineHeight,
10 |   letterSpacing,
11 |   responsiveStyle,
12 |   style
13 | } from 'styled-system'
14 | 
15 | const fontFamily = responsiveStyle({
16 |   prop: 'fontFamily',
17 |   cssProperty: 'fontFamily',
18 |   key: 'fonts'
19 | })
20 | 
21 | const display = responsiveStyle({
22 |   prop: 'display',
23 |   cssProperty: 'display'
24 | })
25 | 
26 | const textTransform = style({
27 |   prop: 'textTransform',
28 |   cssProperty: 'textTransform'
29 | })
30 | 
31 | export const Text = styled.span`
32 |   ${color}
33 |   ${space}
34 |   ${width}
35 |   ${textAlign}
36 |   ${display}
37 |   ${textTransform}
38 |   ${lineHeight}
39 |   ${letterSpacing}
40 |   ${fontSize}
41 |   ${fontWeight}
42 |   ${fontFamily}
43 | `
44 | Text.defaultProps = {
45 |   fontSize: 2,
46 |   fontWeight: 400,
47 |   fontFamily: 0
48 | }
49 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a bug report
 4 | title: ''
 5 | labels: need/triage
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/components/Html.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { ThemeProvider } from 'styled-components'
 4 | import theme from 'ipfs-css/theme.json'
 5 | 
 6 | const Html = ({ title = '', description = '', relativePathToRoot = '', styleTags, children }) => (
 7 |   <html>
 8 |     <head>
 9 |       <meta charSet='UTF-8' />
10 |       <meta httpEquiv='x-ua-compatible' content='ie=edge' />
11 |       <meta name='viewport' content='width=device-width, initial-scale=1' />
12 |       <meta name='description' content={description} />
13 |       <title>{title}</title>
14 |       {styleTags}
15 |       <link href='ipfs.css' rel='stylesheet' />
16 |     </head>
17 |     <ThemeProvider theme={theme}>
18 |       <body style={{margin: 0, fontFamily: theme.fonts['sans-serif'], color: theme.colors.charcoal, backgroundColor: 'white'}}>
19 |         {children}
20 |       </body>
21 |     </ThemeProvider>
22 |   </html>
23 | )
24 | 
25 | Html.propTypes = {
26 |   children: PropTypes.node
27 | }
28 | 
29 | export default Html
30 | 


--------------------------------------------------------------------------------
/components/Box.jsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import {
 3 |   color,
 4 |   space,
 5 |   width,
 6 |   fontSize,
 7 |   fontWeight,
 8 |   textAlign,
 9 |   boxShadow,
10 |   borderColor,
11 |   borderWidth,
12 |   borderRadius,
13 |   responsiveStyle,
14 |   cleanElement
15 | } from 'styled-system'
16 | 
17 | const display = responsiveStyle({
18 |   prop: 'display',
19 |   cssProperty: 'display'
20 | })
21 | 
22 | const verticalAlign = responsiveStyle({
23 |   prop: 'verticalAlign',
24 |   cssProperty: 'verticalAlign'
25 | })
26 | 
27 | export const Box = styled(cleanElement('div'))`
28 |   ${color}
29 |   ${space}
30 |   ${width}
31 |   ${fontSize}
32 |   ${fontWeight}
33 |   ${textAlign}
34 |   ${boxShadow}
35 |   ${borderColor}
36 |   ${borderWidth}
37 |   ${borderRadius}
38 |   ${display}
39 |   ${verticalAlign}
40 | `
41 | 
42 | export const Card = Box.extend`
43 |   overflow: hidden;
44 | `
45 | 
46 | Card.defaultProps = {
47 |   display: 'inline-block',
48 |   boxShadow: 0,
49 |   borderRadius: 4
50 | }
51 | 
52 | export const Half = Box.extend``
53 | 
54 | Half.defaultProps = {
55 |   display: 'inline-block',
56 |   verticalAlign: 'top',
57 |   width: '50%'
58 | }
59 | 
60 | export const Section = Box.withComponent('section')
61 | 
62 | export const Header = Box.withComponent('header')
63 | 
64 | export const Footer = Box.withComponent('footer')
65 | 


--------------------------------------------------------------------------------
/components/Swatch.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {withTheme} from 'styled-components'
 3 | import {Box, Card, Half} from './Box.jsx'
 4 | import {Text} from './Text.jsx'
 5 | 
 6 | const Swatch = ({color, width, height, m, theme}) => {
 7 |   const footerHeight = height - 75
 8 |   return (
 9 |     <Card width={width} m={m} bg='white' style={{height, border: 'solid 1px rgba(205, 207, 214, 0.66)'}}>
10 |       <div>
11 |         <Half bg={color} style={{height: footerHeight}} />
12 |         <Half bg={`${color}-muted`} style={{height: footerHeight}} />
13 |       </div>
14 |       <Box align='left' px={3} pt={3} pb={2}>
15 |         <Text display='block' pb={2} color='charcoal-muted' textTransform='capitalize' fontWeight={500}>
16 |           {color}
17 |         </Text>
18 |         <Half>
19 |           <Text fontSize={1} color='charcoal-muted' textTransform='uppercase' fontWeight={500} title={color}>
20 |             {theme.colors[color]}
21 |           </Text>
22 |         </Half>
23 |         <Half fontSize={1} align='right' fontWeight={500}>
24 |           <Text color='gray' title={`${color}-muted`} textTransform='uppercase'>
25 |             {theme.colors[`${color}-muted`]}
26 |           </Text>
27 |         </Half>
28 |       </Box>
29 |     </Card>
30 |   )
31 | }
32 | 
33 | Swatch.defaultProps = {
34 |   width: 233,
35 |   height: 160,
36 |   m: 3
37 | }
38 | 
39 | export default withTheme(Swatch)
40 | 


--------------------------------------------------------------------------------
/components/Button.jsx:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import {space, width, fontSize, color, responsiveStyle} from 'styled-system'
 3 | 
 4 | const display = responsiveStyle({
 5 |   prop: 'display',
 6 |   cssProperty: 'display'
 7 | })
 8 | 
 9 | const fontFamily = responsiveStyle({
10 |   prop: 'fontFamily',
11 |   cssProperty: 'fontFamily',
12 |   key: 'fonts'
13 | })
14 | 
15 | export const Button = styled.button`
16 |   ${fontFamily}
17 |   ${display}
18 |   ${space}
19 |   ${width}
20 |   ${fontSize}
21 |   ${color}
22 |   appearance: none;
23 |   text-decoration: none;
24 |   min-width: 140px;
25 |   vertical-align: middle;
26 |   text-align: center;
27 |   font-weight: 600;
28 |   border-width: 0;
29 |   border-radius: 3px;
30 |   white-space: nowrap;
31 |   line-height: 1;
32 |   cursor: ${props => !props.disabled ? 'pointer' : 'initial'};
33 |   transition: opacity .15s ease-in-out, box-shadow .15s ease-in-out;
34 |   &:hover {
35 |     opacity: ${props => props.disabled ? 1 : 0.9};
36 |   }
37 |   &:focus {
38 |     outline: 0;
39 |   }
40 |   &:disabled {
41 |     color: ${props => props.theme.colors.gray};
42 |     background-color: ${props => props.theme.colors['gray-muted']};
43 |   }
44 |   &:active {
45 |     opacity: 0.95;
46 |     box-shadow: ${props => props.disabled ? 'initial' : 'inset 0 0 8px rgba(0,0,0,0.3)'};
47 |   }
48 | `
49 | 
50 | Button.defaultProps = {
51 |   mx: 2,
52 |   my: 2,
53 |   px: 4,
54 |   py: 3,
55 |   fontFamily: 0,
56 |   display: 'inline-block',
57 |   fontSize: 2,
58 |   color: 'white',
59 |   bg: 'aqua'
60 | }
61 | 
62 | export const ResponsiveButton = Button.extend``
63 | 
64 | ResponsiveButton.defaultProps = {
65 |   ...Button.defaultProps,
66 |   display: ['block', 'inline-block'],
67 |   width: ['100%', 'initial'],
68 |   my: [3, 2],
69 |   mx: [0, 2]
70 | }
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ipfs-ui-style-guide",
 3 |   "version": "1.0.0",
 4 |   "description": "A shared style guide for UI design in the IPFS universe.",
 5 |   "scripts": {
 6 |     "test": "say sorry && exit 1",
 7 |     "clean": "rm -rf ./docs/*",
 8 |     "build": "npm-run-all --serial clean --parallel build:*",
 9 |     "build:html": "node build/html.js",
10 |     "build:static": "rsync -a node_modules/ipfs-css/{ipfs.css,fonts} docs",
11 |     "watch": "run-p build:static watch:*",
12 |     "watch:html": "nodemon -w theme.json -w components -w pages -e js,json,jsx -x npm run build:html",
13 |     "watch:serve": "browser-sync start --files 'docs/bundle.*' --files 'docs/*.html' --server docs --port 4000 --reload-delay 600",
14 |     "deploy": "run-s build deploy:*",
15 |     "deploy:ipfs": "ipfs add -r -q docs | tail -n1 >versions/current; cat versions/current >> versions/history; cat versions/current"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/ipfs-shipyard/ipfs-ui-style-guide.git"
20 |   },
21 |   "author": "olizilla",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/ipfs-shipyard/ipfs-ui-style-guide/issues"
25 |   },
26 |   "homepage": "https://github.com/ipfs-shipyard/ipfs-ui-style-guide#readme",
27 |   "dependencies": {},
28 |   "devDependencies": {
29 |     "babel-preset-env": "1.7.0",
30 |     "babel-preset-react": "^6.24.1",
31 |     "babel-preset-stage-2": "^6.24.1",
32 |     "babel-register": "^6.26.0",
33 |     "browser-sync": "2.26.3",
34 |     "cssnano": "^3.10.0",
35 |     "ipfs-css": "^0.2.0",
36 |     "nodemon": "1.18.5",
37 |     "npm-run-all": "^4.1.2",
38 |     "react": "^16.2.0",
39 |     "react-dom": "^16.2.0",
40 |     "require-directory": "^2.1.1",
41 |     "standard": "^10.0.3",
42 |     "styled-components": "^3.0.1",
43 |     "styled-system": "^1.1.1",
44 |     "tachyons": "^4.9.1"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {withTheme} from 'styled-components'
 3 | import {Box, Section, Header} from '../components/Box.jsx'
 4 | import {PosterH1, PosterH2, H2, H3} from '../components/Heading.jsx'
 5 | import Swatch from '../components/Swatch.jsx'
 6 | import {Button, ResponsiveButton} from '../components/Button.jsx'
 7 | 
 8 | const Index = ({theme}) => {
 9 |   const colorNames = Object.keys(theme.colors).filter(name => !name.match(/muted$/))
10 |   const primaryPalette = colorNames.slice(0, 4)
11 |   const secondaryPalette = colorNames.slice(4)
12 |   return (
13 |     <div>
14 |       <Header px={2} py={4} bg='navy'>
15 |         <Box align={['center', 'right']}>
16 |           <PosterH2 mx={3} display={['none', 'inline']}>
17 |             The Interplanetary File System
18 |           </PosterH2>
19 |           <PosterH1 mx={3} display='inline'>
20 |             IPFS UI Kit
21 |           </PosterH1>
22 |         </Box>
23 |       </Header>
24 | 
25 |       <Section px={2} py={5} bg='snow-muted' align='center'>
26 |         <H2 mt={4}>
27 |           Color Palette
28 |         </H2>
29 |         <H3 mt={1} mb={5}>
30 |           Primary color palette
31 |         </H3>
32 |         {primaryPalette.map(name => <Swatch color={name} height={217} key={name} />)}
33 |         <H3 my={4}>
34 |           Secondary color palette
35 |         </H3>
36 |         {secondaryPalette.map(name => <Swatch color={name} height={160} key={name} />)}
37 |       </Section>
38 | 
39 |       <Section px={2} py={5} bg='white' align='center'>
40 |         <H2 mt={4}>
41 |           Buttons
42 |         </H2>
43 |         <H3 mt={1} mb={5}>
44 |           Basic buttons in action
45 |         </H3>
46 |         <Box>
47 |           <Button >Aqua</Button>
48 |           <Button bg='navy'>Navy</Button>
49 |           <Button bg='teal'>Teal</Button>
50 |           <Button bg='yellow'>Yellow</Button>
51 |           <Button bg='red'>Red</Button>
52 |         </Box>
53 |         <Box>
54 |           <Button disabled>Aqua</Button>
55 |           <Button disabled bg='navy'>Navy</Button>
56 |           <Button disabled bg='teal'>Teal</Button>
57 |           <Button disabled bg='yellow'>Yellow</Button>
58 |           <Button disabled bg='red'>Red</Button>
59 |         </Box>
60 | 
61 |         <H3 my={4}>
62 |           Responsive buttons
63 |         </H3>
64 |         <ResponsiveButton>Aqua</ResponsiveButton>
65 |         <ResponsiveButton bg='navy'>Navy</ResponsiveButton>
66 |         <ResponsiveButton bg='teal'>Teal</ResponsiveButton>
67 |         <ResponsiveButton bg='yellow'>Yellow</ResponsiveButton>
68 |         <ResponsiveButton bg='red'>Red</ResponsiveButton>
69 |       </Section>
70 |     </div>
71 |   )
72 | }
73 | 
74 | export default withTheme(Index)
75 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > This repository is no longer maintained. See [ipfs/ipfs-gui](https://github.com/ipfs/ipfs-gui) instead.
  2 | 
  3 | # 👉 Looking for up-to-date IPFS visual guidelines? 
  4 | 
  5 | [![IPFS-Brand-sheet-public](https://user-images.githubusercontent.com/157609/176955199-0f87b9bc-3a8d-4bd0-b9a3-48a9fe38f942.png)](https://www.figma.com/proto/mH0OlgikgKzLmbMNO3noBs/IPFS-Brand-sheet-public)
  6 | 
  7 | See the end of [ipfs-ui-style-guide/issues/3](https://github.com/ipfs-shipyard/ipfs-ui-style-guide/issues/3)
  8 | 
  9 | <!--
 10 | 
 11 | * * * 
 12 | 
 13 | # IPFS UI Style Guide
 14 | 
 15 | A shared style guide for UI design in the IPFS universe.
 16 | 
 17 | Reuse these [colors](#colors), [typography](#typography), and [spacing](#spacing) values to create a coherent feel across all IPFS applications.
 18 | 
 19 | ## Getting started
 20 | 
 21 | These examples use [tachyons] and [ipfs-css]. Using the [Parcel] bundler you can create a index.css file and simply import them.
 22 | 
 23 | ```css
 24 | @import "tachyons";
 25 | @import "ipfs-css";
 26 | ```
 27 | 
 28 | If you're using webpack or [create-react-app] you can install them from npm and import them from `node_modules`. Assuming your index.css lives in `/src` you would import them like:
 29 | 
 30 | ```css
 31 | @import "../node_modules/tachyons";
 32 | @import "../node_modules/ipfs-css";
 33 | ```
 34 | 
 35 | `ipfs-css` comes bundled [InterUI] and [Montserrat] woff2 files when installed from npm. If you are using [Parcel] or [create-react-app] then the font files will be copied into your project automatically.
 36 | 
 37 | Otherwise you will need to copy them from your `node_modules` and ensure the paths in the `@font-face` definitions are correct. It may be simpler to copy the [`@font-face` definitions](https://github.com/ipfs-shipyard/ipfs-css/blob/master/ipfs.css#L8-L104) from [ipfs-css] override them in your `index.css` file to point to where you have copied the fonts to.
 38 | 
 39 | ## Examples
 40 | 
 41 | #### Header
 42 | 
 43 | ```html
 44 | <header class="flex items-center pa3 bg-navy">
 45 |   <a href="https://ipfs.io" title="home" class="w-50">
 46 |     <img src="https://ipfs.io/images/ipfs-logo.svg" style="height: 50px" />
 47 |   </a>
 48 |   <h1 class="w-50 ma0 tr f3 fw2 montserrat aqua">CID inspector</h1>
 49 | </header>
 50 | ```
 51 | 
 52 | ![header example](img/header-cid-inspector.png)
 53 | 
 54 | Where
 55 | 
 56 | ```html
 57 | <header class="flex items-center pa3 bg-navy">
 58 | ```
 59 | 
 60 | Gives us a container with [flexbox](http://tachyons.io/docs/layout/flexbox/) powers, vertically centered children via `items-center` and a dark blue, `bg-navy` background.
 61 | 
 62 | 
 63 | ```html
 64 | <h1 class="w-50 ma0 tr f3 fw2 montserrat aqua">CID inspector</h1>
 65 | ```
 66 | 
 67 | Gives us the `aqua` blue text in fancy `montserrat` font. The font-weight is `fw2` (_200 - Extra Light_) and font size `f3` on our [type scale](#typography), which is `24px` olde raster units.
 68 | 
 69 | It's given a 50% width with `w-50` and the text aligns to the right with `tr`. It's given a semanticaly pleaseing `h1` tag, but we don't want the usual jumbo bottom margin that headers get, so we zero out the margins with `ma0` which reads "margin, all sides, zero".
 70 | 
 71 | 
 72 | ## Colors
 73 | 
 74 | <img title='#0b3a53' src='https://swatches.now.sh?color=%230b3a53&name=navy' /><img title='#244e66' src='https://swatches.now.sh?color=%23244e66&name=navy-muted' /><img title='#69c4cd' src='https://swatches.now.sh?color=%2369c4cd&name=aqua' /><img title='#9ad4db' src='https://swatches.now.sh?color=%239ad4db&name=aqua-muted' />
 75 | 
 76 | <img title='#b7bbc8' src='https://swatches.now.sh?color=%23b7bbc8&name=gray' /><img title='#d9dbe2' src='https://swatches.now.sh?color=%23d9dbe2&name=gray-muted' /><img title='#34373f' src='https://swatches.now.sh?color=%2334373f&name=charcoal' /><img title='#7f8491' src='https://swatches.now.sh?color=%237f8491&name=charcoal-muted' />
 77 | 
 78 | <img title='#ea5037' src='https://swatches.now.sh?color=%23ea5037&name=red' /><img title='#f36149' src='https://swatches.now.sh?color=%23f36149&name=red-muted' /><img title='#f39021' src='https://swatches.now.sh?color=%23f39021&name=yellow' /><img title='#f9a13e' src='https://swatches.now.sh?color=%23f9a13e&name=yellow-muted' />
 79 | 
 80 | <img title='#3e9096' src='https://swatches.now.sh?color=%233e9096&name=teal' /><img title='#439a9d' src='https://swatches.now.sh?color=%23439a9d&name=teal-muted' /><img title='#0cb892' src='https://swatches.now.sh?color=%230cb892&name=green' /><img title='#0aca9f' src='https://swatches.now.sh?color=%230aca9f&name=green-muted' />
 81 | 
 82 | <img title='#edf0f4' src='https://swatches.now.sh?color=%23edf0f4&name=snow' /><img title='#f7f8fa' src='https://swatches.now.sh?color=%23f7f8fa&name=snow-muted' />
 83 | 
 84 | ### Fancy hero header gradient
 85 | 
 86 | | from `#043b55`| to `#041727` |
 87 | |------|----|
 88 | | ![#043b55](http://swatches.now.sh?color=%23043b55) | ![#041727](http://swatches.now.sh?color=%23041727)
 89 | 
 90 | As CSS rule
 91 | 
 92 | ```css
 93 | .ipfs-gradient-1 {
 94 |   background:linear-gradient(to top, #041727 0%,#043b55 100%);
 95 | }
 96 | ```
 97 | 
 98 | Rendered example
 99 | 
100 | <img width="862" alt="screenshot 2018-01-09 10 57 23" src="https://user-images.githubusercontent.com/58871/34717721-e58d733c-f52b-11e7-8996-b3256ff47b74.png">
101 | 
102 | ## Typography
103 | 
104 | For general instructional text we use [InterUI] as our default sans-serif font.
105 | 
106 | ```css
107 | .sans-serif {
108 |   font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
109 | }
110 | ```
111 | 
112 | See:
113 | - https://css-tricks.com/snippets/css/system-font-stack/
114 | - https://github.com/twbs/bootstrap/blob/e57a2f244ba8446fffe71847e6a58b18f7b2d541/scss/_variables.scss#L251
115 | - Use the font stack above rather than the `system-ui` font-family because of [issues](https://infinnie.github.io/blog/2017/systemui.html)
116 | 
117 | For main headers with an IPFS feel we use [Montserrat], as in the [example](#examples) above
118 | 
119 | ```css
120 | .montserrat {
121 |   font-family: 'Montserrat', 'Verdana', sans-serif;
122 | }
123 | ```
124 | 
125 | ### Font size
126 | 
127 | Use a type scale to pick a small set of font sizes that work together. The [tachyons type scale] is good.
128 | 
129 | Note: `rem` values assuming `16px` root font size
130 | 
131 | | class name | px   | rem    | Example
132 | | ----------:|-----:|:-------|----------
133 | |      `.f1` |   48 | 3      | Main header `<h1 class="f1">`
134 | |      `.f2` |   36 | 2.25   | Sub head `<h2 class="f2">`
135 | |      `.f3` |   24 | 1.5    | `<h3 class="f3">`
136 | |      `.f4` |   20 | 1.25   | `<h3 class="f4">`
137 | |      `.f5` |   16 | 1      | General copy `<p class='f5'>`
138 | |      `.f6` |   14 | 0.875  | Small header `<h4 class="f6 b uppercase">`
139 | |      `.f7` |   12 | 0.75   | Small print `<small class='f7'>`
140 | 
141 | Capturing the font sizes for your app as isolated, single purpose css classes, adds flexibility by decoupling your design from your markup semantics. An `<h1>` doesn't have to be the largest text on the page.
142 | 
143 | Agreeing to a finite set of font sizes prevents the font-size sprawl that often occurs when trying to maintain a ui and associated css over time. (GitHub, at time of writing has **56 unique font sizes** defined: [github cssstats](http://cssstats.com/stats?url=http%3A%2F%2Fgithub.com&ua=Browser%20Default))
144 | 
145 | ### Headers and Heros
146 | 
147 | Sometimes you need really big text, for fancy splash pages and hero sections.
148 | 
149 | | class name       | px   | rem  | Example
150 | | ----------------:|-----:|:-----|----------
151 | | `.f-headline`    |   48 | 6    | Hero headline `<h1 class="f-headline">`
152 | | `.f-subheadline` |   36 | 5    | `<h2 class="f-subheadline">`
153 | 
154 | These are just there to help get things done quickly. Use whatever font-size the design calls for. If it's a one time use for a big impact intro, then just use an inline style.
155 | 
156 | ## Spacing
157 | 
158 | Use a spacing scale to define a finite set of margin and padding sizes.
159 | 
160 | Using a scale gives a layout coherence and pinning the possible values to a fixed set avoids littering the stylesheet with magic numbers. Reusing the same spacing values creates vertical rhythm.
161 | 
162 | Capturing your spacing values as single purpose css classes allows you to quickly adjust layouts without side effects. You can modify the use site in the DOM without the risk of breaking another part of the UI.
163 | 
164 | The tachyons spacing scale is:
165 | 
166 | | class name  | px   | rem   | CSS declaration
167 | | -----------:|-----:|:------|--------------------
168 | |      `.pa0` |   0  | 0     | `padding: 0`
169 | |      `.pa1` |   4  | 0.25  | `padding: 0.25rem`
170 | |      `.pa2` |   8  | 0.5   | `padding: 0.5rem`
171 | |      `.pa3` |  16  | 1     | `padding: 1rem`
172 | |      `.pa4` |  32  | 2     | `padding: 2rem`
173 | |      `.pa5` |  64  | 4     | `padding: 4rem`
174 | |      `.pa6` | 128  | 8     | `padding: 8rem`
175 | |      `.pa7` | 256  | 16    | `padding: 16rem`
176 | 
177 | See: http://tachyons.io/docs/layout/spacing/
178 | 
179 | The class names follow a simple structure. They start with either:
180 | 
181 | - `m` for **margin**. `ma0` is `margin: 0`
182 | - `p` for **padding**. `pa3` is `padding: 1rem`
183 | 
184 | followed by a _direction_
185 | 
186 | - `a` for **all**. `pa3` is `padding: 3rem`
187 | - `h` for **horizontal**, so left and right. `mh3` is `margin-left: 1rem; margin-right: 1rem;`
188 | - `v` for **vertical**. `pv3` is `padding-top: 1rem padding-bottom: 1rem;`
189 | - `l` is **left**, `r` is **right**. `pl3` is `padding-left: 1rem;`
190 | - `t` is **top**, `b` is **bottom**. `mt3` is `margin-top: 1rem;`
191 | 
192 | followed by a _size_ from the scale, so:
193 | 
194 | ```html
195 | <div class='mb3 pa2'>Woo woo</div>
196 | ```
197 | 
198 | - `mb3`: margin bottom 3 = `margin-bottom: 1rem`
199 | - `pa2`: margin all 2 = `padding: 0.5rem`
200 | 
201 | Further reading:
202 | 
203 | - http://tachyons.io/docs
204 | - https://github.com/dwyl/learn-tachyons
205 | 
206 | ## Credits
207 | 
208 | This style guide is heavily based on http://tachyons.io/
209 | 
210 | -->
211 | 
212 | ## License
213 | 
214 | This repository is mainly for documents. All of these are licensed under the [CC-BY-SA 3.0](https://ipfs.io/ipfs/QmVreNvKsQmQZ83T86cWSjPu2vR3yZHGPm5jnxFuunEB9u) license © 2016 Protocol Labs Inc. Any code is under an [MIT license](LICENSE) © 2016 Protocol Labs Inc.
215 | 
216 | 
217 | [ipfs-css]: https://github.com/ipfs-shipyard/ipfs-css
218 | [ipfs.io]: https://ipfs.io
219 | [tachyons]: http://tachyons.io
220 | [tachyons type scale]: http://tachyons.io/docs/typography/scale
221 | [Parcel]: https://parceljs.org
222 | [create-react-app]: https://github.com/facebook/create-react-app
223 | [Montserrat]: https://github.com/JulietaUla/Montserrat
224 | [InterUI]: https://github.com/rsms/inter
225 | 


--------------------------------------------------------------------------------