<Styled Starter/>

Starter Kit for creating Server-Side Rendered React Apps with Next.js and Styled System Components

Use Styled Starter to get a React project up and running quickly with Server-Side Rendering (thanks to Next.js) and a built-in design system (thanks to Styled Components with Styled System).

Getting Started

First, download the basic starter kit, then install from within the project directory.

npm install

Get a dev environment up and running.

npm run dev

Open up localhost:3000 on your browser and you should see a page that looks like this.

Pages and Routing

By default, the starter project has two pages: an index page and an about page.

To add a new page, go to src/pages and duplicate About.js then change its name and edit it.

// src/pages/NewPage.js

import { Div } from 'styled-system-html';
import SiteFooter from '../components/SiteFooter'

export default (props) => (
	<Div>
		<Div p={6} maxWidth="1200px" mx="auto" textAlign="center">
			{
				/* Page content will go here */ 
			}
		</Div>
		<SiteFooter />
	</Div>
)

Next, go to the top level pages directory and create a new page.

// pages/newpage.js

import NewPage from '../src/pages/NewPage'
import Page	from '../src/containers/Page'

export default () => (
	<Page name="NewPage">
    	<NewPage />
    </Page>
)

That’s it! Well, unless your project is a Github project page. For that, you will need to set up next.config.js (see this branch for more info).

Components and Content

Compose UI with Styled System primitives and components like Grid Styled, Styled System HTML (SSHTML).

SSHTML looks a lot like regular HTML. The key difference is every SSHTML element is a styled component that inherits style props from your design theme. SSHTML is built on top of Styled System which includes Grid Styled making it easy to build responsive layouts.

We can use SSHTML elements as primitives when creating components. For example, to use a Blockquote component like this...

Son, you have the eyes of an eagle... a dead one.
– Grandpa Polacek

<Blockquote author="Grandpa Polacek">Son, you have the eyes of an eagle... a dead one.</Blockquote>

... you might create that component from SSHTML like this...

import { Blockquote, Footer } from 'styled-system-html';

export default (props) => (
    <Blockquote 
        bg="gray0" color="base" 
        px={4} py={3} mb={4} ml={[3,4]}
        borderLeft="8px solid" 
        borderColor="gray2"
        fontSize={4} 
        fontStyle="italic">
        {props.children}
        {
            props.author &&
            <Footer mt={2} textAlign="right" pr={5} fontSize={1} color="gray">
                – {props.author}
            </Footer>
        }
    </Blockquote>
)

There are many ways to build components with Styled System. See more examples are in the Components section of this site.

Theming

To adjust colors, layout and typography, edit the theme file in the /src directory. Generate theme data by setting custom fonts or colors in the Theme section. You can also choose from a selection of sample themes by clicking choose theme at the top of this page.

State Management

This demo uses Refunk for state management. It is a simpler, smaller alternative to other state management libraries that makes use of React’s built-in component state. See Styled Starter with Refunk.

Publish and Deploy

The default deploy script will publish to github if you update package.json with your repository url.

For more information on publishing and deploying, refer to the Next.js documentation. To publish as a Github Page, refer to

Testing

Included is a very simple end-to-end Selenium integration test which can be run in your local environment. With the server running:

npm run test

For a more detailed example, with integration with Travis CI and SauceLabs, refer to the tests directory in the Styled Starter project repo. More info:

Bring your own unit tests (BYOUT).