mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
grid component
This commit is contained in:
parent
f9a631f26e
commit
d717f2356b
@ -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 {
|
||||||
|
22
ui/src/components/grid/index.js
Normal file
22
ui/src/components/grid/index.js
Normal 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
|
||||||
|
}
|
16
ui/src/components/grid/readme.md
Normal file
16
ui/src/components/grid/readme.md
Normal 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
|
40
ui/src/components/grid/style.css
Normal file
40
ui/src/components/grid/style.css
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
8
ui/src/constants/breakpoints.css
Normal file
8
ui/src/constants/breakpoints.css
Normal 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);
|
38
ui/src/constants/sizes.css
Normal file
38
ui/src/constants/sizes.css
Normal 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);
|
Loading…
Reference in New Issue
Block a user