https://github.com/jjordy/gfas-react-components

Global Financial Aid Services Layout and design Components for react.
https://github.com/jjordy/gfas-react-components

components layout react styled-components

Last synced: about 3 hours ago
JSON representation

Global Financial Aid Services Layout and design Components for react.

• Host: GitHub
• URL: https://github.com/jjordy/gfas-react-components
• Owner: jjordy
• Created: 2017-02-21T22:20:40.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-12T19:13:19.000Z (over 7 years ago)
• Last Synced: 2024-11-08T02:12:07.769Z (11 days ago)
• Topics: components, layout, react, styled-components
• Language: JavaScript
• Size: 188 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Gfas React Components

[![CircleCI](https://circleci.com/gh/jjordy/gfas-react-components.svg?style=svg)](https://circleci.com/gh/jjordy/gfas-react-components)

[![codecov](https://codecov.io/gh/jjordy/gfas-react-components/branch/master/graph/badge.svg)](https://codecov.io/gh/jjordy/gfas-react-components)

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)

## Install

```bash

$ npm install gfas-react-components styled-components             # We love styled components

```

## Setup

You must provide your theme to the components like so.

```javascript

// in your root component

import React from 'react'

import { ThemeProvider } from 'styled-components'

import theme from './myCustomTheme.js'

// pass in your custom theme to the components

const Root = () => (

  

    

  

)

```

### Theme file

You can use this theme file as a base 

the components look for the following values to be defined

you can customize them to get a look to your liking

```javascript

const theme = {

  sizes: [16, 18, 24, 32, 36, 48],

  padding: [0, 6, 12, 24, 32, 64],

  margin: [0, 8, 16, 24, 32, 64],

  borderWidth: 1,

  borderRadius: 4,

  colors: {

    default: '#222',

    white: '#FFF',

    black: '#222',

    transparent: 'transparent',

    gray: '#e7e7e7',

    lightgray: '#f8f8f8',

    primary: '#0193F5',

    secondary: '#E921FF',

    info: '#11FFEA',

    success: '#40E59B',

    warning: '#FFC32F',

    error: '#E84548'

  },

  fontFamily: 'Open Sans, Helvetica, Arial, sans-serif'

}

export default theme

```

## Requirements

* node `v6 - v7`

* npm `^3.0.0`

# Contributing & Development Instructions

## Install dependencies, and check to see it works

```bash

$ npm install                   # Install project dependencies

$ npm run dev                     # Development via storybook @ localhost:9001

```

While developing, you will probably rely mostly on `npm run dev`; however, there are additional scripts at your disposal:

|`npm run `|Description|

|------------------|-----------|

|`dev`| Development Mode |

|`lint`|Lint all `.js` files.|

|`build`| Build Production Library.|

|`lint:fix`|Lint and fix all `.js` files. [Read more on this](http://eslint.org/docs/user-guide/command-line-interface.html#fix).|

## Project Structure

```

.

├── .storybook               # Storybook config

├── src                      # Client entry point

│   |   ├── components       # Component Source

|   |   ├── theme.js         # default theme file for development

```