1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

grid component

This commit is contained in:
Sérgio Ramos 2016-10-24 17:38:35 +01:00
parent f9a631f26e
commit d717f2356b
6 changed files with 125 additions and 1 deletions

View File

@ -1,6 +1,6 @@
const React = require('react'); const React = require('react');
const ReactHotLoader = require('react-hot-loader'); const ReactHotLoader = require('react-hot-loader');
const Button = require('../src/components/button/readme.md'); const Button = require('../src/components/grid/readme.md');
const InnerHTML = require('dangerously-set-inner-html'); const InnerHTML = require('dangerously-set-inner-html');
const { const {

View File

@ -0,0 +1,22 @@
// based on https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
const React = require('react');
const style = require('./style.css');
const Grid = module.exports = ({
fluid = false,
children
}) => {
const className = style[fluid ? 'container-fluid' : 'container'];
return (
<div className={className}>
{children}
</div>
);
};
Grid.propTypes = {
fluid: React.PropTypes.bool,
children: React.PropTypes.node
}

View File

@ -0,0 +1,16 @@
# `<Grid>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Grid = require('./index.js');
const Button = require('../button');
nmodule.exports = ReactDOM.renderToString(
<Grid><Button>Hello World</Button></Grid>
);
```
## usage

View File

@ -0,0 +1,40 @@
/*
* based on
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
*/
@value outer-margin, container-sm, container-md, container-lg from "../../constants/sizes.css";
@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
:root {
--outer-margin: outer-margin;
--container-sm: container-sm;
}
.container-fluid, .container {
margin-right: auto;
margin-left: auto;
}
.container-fluid {
padding-right: var(--outer-margin);
padding-left: var(--outer-margin);
}
@media sm-viewport {
.container {
width: var(--container-sm, 46rem);
}
}
@media md-viewport {
.container {
width: var(--container-md, 61rem);
}
}
@media lg-viewport {
.container {
width: var(--container-lg, 71rem);
}
}

View File

@ -0,0 +1,8 @@
/*
* based on
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
*/
@value sm-viewport: only screen and (min-width: 48em);
@value md-viewport: only screen and (min-width: 64em);
@value lg-viewport: only screen and (min-width: 75em);

View File

@ -0,0 +1,38 @@
/*
* based on
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
*/
:root {
--gutter-width: 1rem;
--outer-margin: 2rem;
--gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
--half-gutter-width: calc((var(--gutter-width) * 0.5));
--xs-min: 30;
--sm-min: 48;
--md-min: 64;
--lg-min: 75;
--screen-xs-min: var(--xs-min)em;
--screen-sm-min: var(--sm-min)em;
--screen-md-min: var(--md-min)em;
--screen-lg-min: var(--lg-min)em;
--container-sm: calc(var(--sm-min) + var(--gutter-width));
--container-md: calc(var(--md-min) + var(--gutter-width));
--container-lg: calc(var(--lg-min) + var(--gutter-width));
}
@value gutter-width: var(--gutter-width);
@value outer-margin: var(--outer-margin);
@value gutter-compensation: var(--gutter-compensation);
@value half-gutter-width: var(--half-gutter-width);
@value xs-min: var(--xs-min);
@value sm-min: var(--sm-min);
@value md-min: var(--md-min);
@value lg-min: var(--lg-min);
@value screen-xs-min: var(--screen-xs-min);
@value screen-sm-min: var(--screen-sm-min);
@value screen-md-min: var(--screen-md-min);
@value screen-lg-min: var(--screen-lg-min);
@value container-sm: var(--container-sm);
@value container-md: var(--container-md);
@value container-lg: var(--container-lg);