greenprint

React UI library inspired by Blueprint

Documentation here: https://joegasewicz.github.io/greenprint/

What is Greenprint

Greenprint is a collections or useful features that extends a ReactJS project. Another goal is to not use any other util / helper libraries so Greenprint can target the smallest pkg size possible.

What Greenprint isn't

• It's not a single responsibility library, it is a collection of useful features.

What Greenprint Gives you

• A nice React component api to Bootstrap's v4 library
• Forms & validation!
• Greenprints own CSS as JS out of the box.
• A high level component api to the browsers Audio & Video api's.
• Functional Programming utility functions such as pipe, curry, partial etc.

Installation

npm install greenprint

Requirements

Install style-loader & css-loader loaders to your project & add the following to your webpack.config.js file

• If you are using create-react-app then this is already taken care of for you.

            rules: [
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                },
            ]

Styling with Greenprint

    const StyledDiv = styling.css("h1")`
                            backgroundColor: blue;
                            color: peru;
                        `;
    const StyledNav = styling.css(Navbar)`
                            backgroundColor: red;
                            color: green;
                        `;
    /** <div style="background-color: blue; color: peru;">Hello</div> **/
    <StyledDiv>Hello</StyledDiv> 
    /**  Renders a Bootstrap v.4 navbar <nav class="navbar..." style="background-color: red; color: green;> **/
    <StyledNav />

Bootstrap v.4 components as React components

// Example Navbar
// Creates a bootstrap 4 styled navbar. You can specify the links by adding an array of objects
// with key values of ``name`` for the link name & ``url`` for the actual url path.
    <Navbar
        img="path/to/your/site-logo"
        brand="your Site Name" 
        links={[{ name: 'Home', url: '/path'}]}
    />
    

Functional Programming Utilities

    // Pipe
    import { utils } from "greenprint";
    
    const fooResults =  utils.pipe<{}>(
        foo1,
        foo1,
    )(data);

Authors

• Joe Gasewicz - Initial work - JoeGasewicz

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• TODO