$$\   $$\                 $$\                               
$$ |  $$ |                $$ |                              
$$ |  $$ | $$$$$$\   $$$$$$$ | $$$$$$\   $$$$$$\  $$$$$$$\  
$$$$$$$$ |$$  __$$\ $$  __$$ |$$  __$$\ $$  __$$\ $$  __$$\ 
$$  __$$ |$$$$$$$$ |$$ /  $$ |$$ |  \__|$$ /  $$ |$$ |  $$ |
$$ |  $$ |$$   ____|$$ |  $$ |$$ |      $$ |  $$ |$$ |  $$ |
$$ |  $$ |\$$$$$$$\ \$$$$$$$ |$$ |      \$$$$$$  |$$ |  $$ |
\__|  \__| \_______| \_______|\__|       \______/ \__|  \__|                                                                                                                                

View a landing page built with Hedron.

Installation

npm install --save hedron

or better yet

yarn add hedron

Documentation

View the Documentation →

Example Usage

View interactive example on webpackbin

import React, { Component } from 'react';
import { Page, Row, Column } from 'hedron';

class App extends Component {
  render() {
    return (
      <Page>
        <Row>
          <Column sm={8} smShift={2} lg={6} lgShift={3}>
            <h1>This is a column that's centered using the shift props</h1>
          </Column>
        </Row>
        <Row>
          <Column fluid sm={4}>
            <h1>Fluid Columns</h1>
          </Column>
          <Column fluid sm={4}>
            <p>It's a 12 column layout by default.</p>
          </Column>
          <Column fluid sm={4}>
            <Row divisions={24}>
              <Column sm={24}>
                <p>
                  But you can change the amount of columns by adding the
                  `divisions` property to a Row.
                </p>
                <p>It's fully embeddable as well!</p>
              </Column>
            </Row>
          </Column>
        </Row>
      </Page>
    );
  };
}

Contributing

First of all, thanks for your interest in contributing to hedron. The best place to get started with contributing to hedron is to join the JSBro Slack Team. Once you're in the slack channel, take a look at the issue tracker and look at the tasks labeled with help wanted.

Building the module from source

$ git clone https://github.com/JSBros/hedron

To install all dependencies, you can use either npm or yarn. I personally prefer [and recommend] using yarn.

npm

$ npm install

yarn

$ yarn install

Building

To build hedron from the source code, please run the following command inside the hedron directory

$ npm run build

Before you submit a pull request, you must first make sure that the code base is passing eslint inspections. To do that, please run the following

$ npm run lint

If all goes well, nothing spectacular should happen. If there are any errors, you'll get a lot of red output in your terminal and it will list exactly what needs to be fixed.

Committing

In an effort to keep the git history clean, since 0.4.0 I'm enforcing a semantic commit message style.

View the semantic commit message guidelines →

Contributors

Thanks goes to these wonderful people (emoji key):

Garet McKinley 💻 💡 ⚠️ 👀	Matt Hamil 💬	Mikko Matilainen 💻	Nathaniel Piché 💻 📖	Brian Stanback 💻	Stephen Mathieson 💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

Hedron is under the MIT License.