@project-r/styleguide

This is a living style guide. Subject to constant change.

It documents the current state and provides implemented React components, published as an npm package.

About

The development started on March 5th 2017 for the crowdfunding of republik.ch. It has since been continuously expanded and now provides a wide range of functionality from colors and typography definitions, to an video player, common form elements, discussion trees, a full suite of editorial elements—from teasers to infoboxes, template definitions targeting web and email and a charting system.

It's currently primarly used to power our web and cms frontends—republik-frontend and publikator-frontend.

Beyond that it provides some definitions to our backends and app, was used in various prototypes and the charts are available on observablehq.com for story prototyping.

License

The logo and fonts are the property of their owners (logo—Project R, GT America—GrilliType and Rubis—Nootype), and may not be reproduced without permission.

The source code is «BSD 3-clause» licensed.

Use it in your React app

The peer dependencies are: react, prop-types and glamor.

``
npm install @project-r/styleguide --save
`

Example button:

`code|lang-js
import {Button} from '@project-r/styleguide'

const Crowdfunding = () => (


«Es ist Zeit, dass sich die Journalisten unabhängig machen und der Journalismus unabhängig von den Grossverlagen existieren kann. Und ein Modell dafür schafft man nur gemeinsam, oder gar nicht.»

Mitmachen


)
`

See components in the menu for a full list and documentation.

$3

glamor needs to be integrated into server rendering. For a simple integration use the following pages/_document.js:

`code|lang-js
import Document, {Head, Main, NextScript} from 'next/document'
import {renderStatic} from 'glamor/server'

export default class MyDocument extends Document {
static async getInitialProps ({renderPage}) {
const page = renderPage()
const styles = renderStatic(() => page.html)
return { ...page, ...styles }
}
render () {
const {css} = this.props
return (




{css ?