Skip to content

zipmark/hedron-glamorous

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

Backers on Open Collective Sponsors on Open Collective Travis npm David Slack Status

View a landing page built with Hedron.

Installation

npm install --save hedron

or better yet

yarn add hedron

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]

sponsored by timber

License

Hedron is under the MIT License.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%