Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content structure in place for v1 of new site #12

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Content structure in place for v1 of new site #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
109c8df
Removed nav, edited titles
May 30, 2019
766a4c8
added copy from other branch – button not defined error
May 30, 2019
6db5ff5
structure added
May 30, 2019
f6fc8d0
contribution guidelines added
May 30, 2019
cb65d0a
Complete content structure
May 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Footer = ({}) => (
<FooterStyled>
<MyContainer flexDirection={['column', 'row']} py={4}>
<Link fontWeight={2} fontSize={0} href='//consensys.design/' target='_blank' rel='noopener'>Made by ConsenSys Design</Link>
<Text fontWeight={0} fontSize={0} color='#888D95'>© 2018 ConsenSys Inc.</Text>
<Text fontWeight={0} fontSize={0} color='#888D95'>© 2019 ConsenSys Inc.</Text>
</MyContainer>
</FooterStyled>
)
Expand Down
10 changes: 5 additions & 5 deletions components/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import React from 'react'
import Text from './Text'
import Heading from './Heading'
import Button from './Button'
import Link from './Link'

const Header = ({}) => (
<header>
<Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Rimble Design System</Heading.h1>
<Text.p fontSize={2} mt={3} mb={5} pr={[3, 6]}>Adaptable components and design standards for decentralized applications.</Text.p>

<Button as="a" href="#getting-started" width={['100%', 'auto']} mr={[0, 3]} mb={[3, 0]}>Get Started</Button>
<Button.outline as="a" href='//consensys.github.io/rimble-ui/' target='_blank' rel='noopener' width={['100%', 'auto']}>Documentation</Button.outline>
<Heading.h1 fontSize={[5, 7]} pr={[3, 6]}>Hi, we're Rimble 👋</Heading.h1>
<Heading.h2 fontSize={[2, 3]} my={3} pr={[3, 6]}>
A growing open-source library of React components and guides for helping you design, build and ship dApps everyone can use.
</Heading.h2>
</header>
);

Expand Down
28 changes: 1 addition & 27 deletions components/navMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,33 +97,7 @@ class Menu extends Component {
<StyledToggle onClick={this._handleToggle}>
<ReactSVG src="static/svg/baseline-menu-24px.svg" />
</StyledToggle>
<StyledList hidden={!this.state.isOpen}>
<ul>
<li>
<Text fontSize={1} fontWeight={1} color={"mid-grey"}>
v0.8.0
</Text>
</li>
<li>
<Link
href="//github.com/ConsenSys/rimble-ui"
target="_blank"
rel="noopener"
>
Github
</Link>
</li>
<li>
<Link
href="//consensys.github.io/rimble-ui/"
target="_blank"
rel="noopener"
>
Documentation
</Link>
</li>
</ul>
</StyledList>

</StyledWrap>
);
}
Expand Down
106 changes: 58 additions & 48 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Heading from '../components/Heading'
import Text from '../components/Text'
import Hr from '../components/Hr'
import {Flex, Box} from '../components/Box'

import Button from '../components/Button'
import Head from '../components/head'
import Nav from '../components/nav'
import Header from '../components/header'
Expand Down Expand Up @@ -75,65 +75,75 @@ const Home = () => (
<Header/>
</Container>
</Masthead>
<section>
<Container>
<Box my={5}>
<Heading.h1 fontSize={[3, 4]}>Why Rimble?</Heading.h1>
<Hr/>
<Text.p fontSize={[1, 2]}>
Decentralized applications (dApps) require users to learn new patterns and they present new hurdles for designers and front-end developers. Rimble is here to make life easier for everyone. As an open source project, Rimble aims to create common dApp UX patterns, validated through user research, and built for developers.
</Text.p>

<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-1.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Flexible</Heading.h2>
<Text.p>Your tech stack and workflow are yours to decide. We impose as few constraints as possible. </Text.p>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-2.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Research-driven</Heading.h2>
<Text.p>We are constantly talking to dApp designers, developers, and users to understand common challenges and effective UI patterns. </Text.p>
</Box>
<Box flex={'1 1 auto'} width={[1, 1/3]} >
<Flex my={3}>
<ReactSVG src='static/svg/fig-3.svg' />
<section id="build">
<Container>
<Box my={5}>
<Heading.h3 mt={3} fontSize={[3, 4]} >Get building</Heading.h3>
<Hr/>
<Text.p>Your backlog is already *this* big. And we've already designed, tested and built these. Makes sense right?</Text.p>
<Flex mt={4} width={1} flexDirection={['column', 'row']}>
<Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-1.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble UI</Heading.h2>
<Text.p>Clean, customisable building blocks for putting your interface together, including UI for Ethereum concepts.</Text.p>
<Button href='https://github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Get the code</Button>
<Link href='https://consensys.github.io/rimble-ui/?path=/story/getting-started--welcome' target='_blank' rel='noopener'>Read the docs</Link>
</Box>
<Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-2.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Rimble Web3</Heading.h2>
<Text.p>Drop-in components that solve an Ethereum UX problem out of the box. Configure some inputs and you're ready. </Text.p>
<Button href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Get the code</Button>
<Link disabled mt={3} ml={5} href='https://rimble-web3-components.netlify.com/?path=/story/connectionbanner--wrong-network-default' target='_blank' rel='noopener'>Read the docs</Link>
</Box>
<Box flex={'1 1 auto'} width={[1, 1, 1/3]} mr={5}>
<Flex my={3}>
<ReactSVG src='static/svg/fig-3.svg' />
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>dApp patterns</Heading.h2>
<Text.p>In-depth pieces on designing patterns and workflows that help your users navigate Ethereum.</Text.p>
<Button href='https://github.com/ConsenSys/rimble-web3-components' target='_blank' rel='noopener'>Read the guides</Button>
</Box>
</Flex>
<Heading.h2 fontSize={[2, 3]} fontWeight={1}>Human</Heading.h2>
<Text.p>Blockchain is confusing. We are a dedicated team, invested in being understandable and approachable.</Text.p>
</Box>
</Flex>
</Box>
</Container>
</Container>
</section>
<section>
<Container>
<Box my={5}>
{/* body section */}
<Heading.h1 id='getting-started' fontSize={[3, 4]}>Getting Started</Heading.h1>
<Hr/>
<Heading.h2 fontSize={2} fontWeight={1}>Installation</Heading.h2>
<CodeBlock code={'$ npm install --save rimble-ui styled-components'} />
<Heading.h2 fontSize={2} fontWeight={1}>Usage</Heading.h2>
<CodeBlock code={exampleCode} />
</Box>
</Container>
<Container>
<Box my={5}>
<Heading.h1 fontSize={[3, 4]}>See Rimble in action</Heading.h1>
<Hr/>
<Text.p fontSize={[1, 2]}>
We test out our components and hypotheses using our demo dApp.
</Text.p>
<Button>Try the demo</Button>
</Box>
</Container>
</section>
<section>
<Container>
<Box my={5}>
<Heading.h1 fontSize={[3, 4]}>Made by ConsenSys Design</Heading.h1>
{/* body section */}
<Heading.h1 id='getting-started' fontSize={[3, 4]}>Contribute to Rimble</Heading.h1>
<Hr/>
<Text.p>
Rimble is created by <Link href='//consensys.design/' target='_blank' rel='noopener'>ConsenSys Design.</Link> Want to help us define the roadmap? Submit feedback or feature requests on the <Link href='//github.com/ConsenSys/rimble-ui' target='_blank' rel='noopener'>Rimble</Link> GitHub page.
</Text.p>
<Box mb={4}>
<Text>Submit feedback or feature requests directly in our GitHub repos.</Text>
</Box>
<Box>
<Text fontSize={[1,2]}>🍴 Fork the repo on GitHub</Text>
<Text fontSize={[1,2]}>👯‍♀️ Clone the project to your own machine</Text>
<Text fontSize={[1,2]}>🌱 Commit changes to your own branch</Text>
<Text fontSize={[1,2]}>☝️ Push your work back up to your fork</Text>
<Text fontSize={[1,2]}>👀 Submit a Pull request and we will review your changes</Text>
</Box>
</Box>
</Container>
</section>

</main>
<Footer/>
</React.Fragment>
Expand Down