polished css,CSS3网格布局（grid）模板在线构建工具

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const {render} = ReactDOM;

const {Component, PropTypes} = React;

const {h1, h2, div, input, textarea, a, svg, g, line, text} = styled.default;

const {darken, lighten, transparentize} = polished;

const {grid, template} = GridTemplateParser;

// helpers

const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

// styles

const colors = {

primary: '#263238',

secondary: '#1DE9B6',

};

const StyledApp = div`

display: grid;

grid-template-columns: 25rem auto;

grid-template-rows: auto;

grid-template-areas: "sidebar main";

width: 100%;

height: 100vh;

`;

const StyledSidebar = div`

display: flex;

flex-direction: column;

grid-area: sidebar;

background: ${darken(.1, colors.primary)};

overflow: hidden;

`;

const StyledMain = div`

display: flex;

flex-direction: column;

grid-area: main;

padding: 2rem;

background: ${darken(.05, colors.primary)};

`;

const StyledMainInner = div`

flex: 1;

position: relative;

`;

const StyledGrid = svg`

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

`;

const StyledGridText = text`

font-family: 'Roboto Mono', monospace;

font-weight: 500;

font-size: 1rem;

text-anchor: middle;

alignment-baseline: middle;

fill: ${transparentize(.75, colors.secondary)};

`;

const StyledGridLine = line`

stroke: ${darken(.01, colors.primary)};

stroke-width: 1px;

`;

const StyledPreview = div`

z-index: 5;

position: relative;

display: grid;

grid-template-columns: repeat(${props => props.width}, 1fr);

grid-template-rows: repeat(${props => props.height}, 1fr);

grid-template-areas: ${props => props.tpl};

width: 100%;

height: 100%;

`;

const StyledTrack = div`

position: relative;

grid-area: ${props => props.area};

cursor: ${props =>

props.grabbing ? 'grabbing' : 'grab'};

background: ${transparentize(.97, colors.secondary)};

`;

const StyledHandler = div`

position: absolute;

top: ${({position}) =>

position === 'bottom' ? 'auto' : 0};

right: ${({position}) =>

position === 'left' ? 'auto' : 0};

bottom: ${({position}) =>

position === 'top' ? 'auto' : 0};

left: ${({position}) =>

position === 'right' ? 'auto' : 0};

width: ${({position, size}) =>

position === 'left' || position === 'right' ? size : '100%'};

height: ${({position, size}) =>

position === 'top' || position === 'bottom' ? size : '100%'};

cursor: ${({position}) =>

position === 'left' || position === 'right' ? 'col-resize' : 'row-resize'};

background: ${colors.secondary};

`;

const StyledHint = div`

padding: 2rem;

`;

const StyledHintTitle = h1`

padding-bottom: 1rem;

font-weight: 500;

font-size: 1.5rem;

color: ${colors.secondary};

`;

const StyledHintDescription = div`

line-height: 1.6;

font-size: 1rem;

color: ${lighten(.6, colors.primary)};

`;

const StyledTemplate = div`

flex: 1;

display: flex;

flex-direction: column;

padding: 2rem;

`;

const StyledTemplateTitle = h2`

padding-bottom: 1.5rem;

text-transform: uppercase;

font-size: .85rem;<