npm:hedron1 | Skypack

README

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 { Section, Row, Column } from 'hedron';

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

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.