Table of Contents

• About the Project
  • Built With
• Getting Started
• Development - Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgements

About The Project

While there are plenty of css frameworks, design systems, and react component libraries out in the wild, it can be a struggle to find one that allows simple implementation and use along with heavy trust in the user to customize to their needs without having to jump through hoops. This project aims to remediate that.

Built With

• SASS
• React
• Webpack
• Babel
• StoryBook

Getting Started

Broke React is a part of

Installation

Node Module

npm or yarn

npm i -D @brokeds/broke-react

yarn add -D @brokeds/broke-everything

Then import whatever component wherever you want to use it.

import {<component name>} @brokeds/broke-react

Github repo

Clone the repo and navigate to the full feature directory

git clone https://github.com/BrokeDesign/BrokeReact.git  && /
cd ./BrokeDS/BrokeReact

Install NPM packages and start the server

npm i && yarn start

yarn add && yarn start

Start the dev server

npm start

yarn start

Start the dev server and Storybook instance (https://localhost:6006) //! important: The dev server is only included if you decide to make use of it, also webpack watches for changes and hotloads modules.

npm start 

Usage

Using CSS in react app:

Import package in entry file

import { <Component Name> } from '@brokeds/broke-react' 

example:

import React from 'react';
import {Card, CardContent, CardHead, CardFoot } from '@brokeds/broke-react';

const ExampleComponent = () => {
  return(
    <Card>
      <CardHead>
        <h2>Card Header</h2>
      </CardHead>
      <CardContent>
        Here is content
      </CardContent>
      <CardFoot>
        <p>Card Footer</p>
      </CardFoot>
    </Card>
  );
}

export default ExampleComponent;

For more examples, please refer to the Documentation or the storybook instance

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature)
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Christian Gorke - @skothasec - [email protected]

Project Link: https://github.com/SkothaSec/BrokeDS

Acknowledgements

• SASS Guidelines
  • 7-1 Pattern
• Color Sytems
  • Article - The Light and the Dark Side: Creating a UI colour system