https://github.com/olizilla/ipfs-react

https://github.com/olizilla/ipfs-react

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/olizilla/ipfs-react
• Owner: olizilla
• License: mit
• Created: 2018-09-11T14:14:32.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-27T16:18:05.000Z (over 6 years ago)
• Last Synced: 2024-05-01T14:27:01.600Z (9 months ago)
• Language: JavaScript
• Homepage: https://olizilla.github.io/ipfs-react
• Size: 2.37 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ipfs-react

> An exploration into using [rebass], [styled-system] & [styled-components] to build a component library.

We want:

- Published, reusable components.

- i18n for all text.

- Component scoped styling.

- Shared color palette, type scale and spacing scale baked in.

**[styled-components]** - Let's us write component scoped css. You extend an element or react component with some css, it creates a unique class name for those styles and makes them exist in the parent page.

```jsx

const FancyBox = styled.div`

  border: 1px dashed hotpink;

`

export Aside = () => (

  ooh la la

)

```

**[styled-system]** - Customise styling from react props. Values to props are checked against a theme object, so you can write things like:

```jsx

Hello

```

and in your theme.json

```json

{

  "colors": {

    "navy": "#0b3a53",

    "navy-muted": "#244e66",

    "aqua": "#69c4cd",

    ...

```

and have it replace the value of `navy` with the value `#0b3a53`. It also allows for [responsive values](https://jxnblk.com/styled-system/responsive-styles) like:

```jsx

// responsive width

// responsive font size

```

Which would give your component a width of `100%`, `50%`, or `%25` at the first three breakpoints defined in your theme json. 

**[rebass]** gives us a handul of props driven styling components built using `styled-components` and `styled-system`, like `Box` for generic spacing, `Flex` for simple grids using flexbox.

```jsx

  Box

```

[rebass]: https://github.com/rebassjs/rebass

[styled-system]: https://github.com/jxnblk/styled-system

[styled-components]: https://github.com/styled-components/styled-components