paprika

paprika copied to clipboard

A Netlify-hosted Gatsby starter for people who love need forms but hate servers.

Demo: https://goofy-swanson-215279.netlify.com/

Why:

• You need a page/website with a form
• You need that page/website to be static
• You need to use React/Redux
• You need to use, but not configure or worry about React Router or Webpack

Features:

• Styled Components / Styled System
• Redux / React Redux
• Form submission via Netlify
• Client-side form validation with Joi (browser)
• Portals! (mobile nav, modal)

Using Styled System

You can get by for basic layouts with a mixture of <Box> and <Flex> elements. The width of the columns can be managed with the responsive width property.

All these 'inline' styles are extracted out to Styled Components classes. This atomic-based approach keeps your stylesheet nice and light.

  // Row, 50% Columns
  <Flex wrap justify="center">
    <Box width={[1, 1/2]}>
      <H4>Email</H4>
      <P>
        Hummus
      </P>
    </Box>
    <Box width={[1, 1/2]}>
      <P>
        Tahini
      </P>
    </Box>
  </Flex>

  // For conveinience, I've added a <Row> helper
  <Row>
    <Box width={[1, 1/2]}>
      <H4>Email</H4>
      <P>
        Hummus
      </P>
    </Box>
    <Box width={[1, 1/2]}>
      <P>
        Tahini
      </P>
    </Box>
  </Flex>

  // Also, a few others.
  <Container>
  <H1>
  <P>
  // etc

Try It Out: