Skip to content

Instantly share code, notes, and snippets.

@flipflop

flipflop/index.html

Created February 21, 2019 12:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save flipflop/2d32e367e6fb3ae38009452f74091e80 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save flipflop/2d32e367e6fb3ae38009452f74091e80 to your computer and use it in GitHub Desktop.
Download ZIP
Declarative React Layouts by Rozario Chivers // source https://jsbin.com/wizelen
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Declarative React Layouts by Rozario Chivers</title>
<style>
body {
font-family: arial;
counter-reset: component-counter;
}
.layout-area {
// padding: 0!important;
// margin: 0!important;
}
.layout-hompage {
.layout-area {
padding: 0!important;
margin: 0!important;
}
}
.content-area {
border: 1px solid transparent;
padding: 2rem;
font-size: 1rem;
font-weight: bold;
}
.content-area {
counter-increment: component-counter;
}
.content-area::before {
content: counter(component-counter);
font-size: 2rem;
line-height: 3rem;
position: absolute;
top: 1rem;
left: 1rem;
font-weight: bold;
border-radius: 4rem;
border: 4px solid #3B3E54;
display: inline-block;
text-align: center;
width: 3rem;
height: 3rem;
background: #fc3;
margin-right: 1rem;
}
.layout-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#eee 10px,
#eee 20px
);
outline: 2px solid #333;
}
</style>
<style id="jsbin-css">
/* layout debug */
div:hover[data-layout]::after {
content: "Layout Template: " attr(data-layout);
color: #333;
font-size: 2rem;
}
/* ------------------------------------------
LAYOUT: layout-homepage
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────┬─────┬─────┤
| | | |
| 4 | 5 | 6 |
| | | |
├─────┴─────┴─────┤
| 7 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-homepage .layout-area:nth-child(4) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(5) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: main
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────────────────┤
| |
| 4 |
| |
├─────────────────┤
| 5 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 5) */
.layout-main .layout-area:nth-child(3) {
display: none;
}
.layout-main .layout-area:nth-child(4) {
display: none;
}
.layout-main .layout-area:nth-child(5) {
background: #fff;
height: 40rem;
}
.layout-main .layout-area:nth-child(6) {
display: none;
}
.layout-main .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-related-content
┌─────────────────┐
| 1 |
├───────────┬─────┤
| | |
| 2 | 3 |
| | |
├───────────┴─────┤
| 4 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 4) */
.layout-related-content .layout-area:nth-child(2),
.layout-related-content .layout-area:nth-child(3) ,
.layout-related-content .layout-area:nth-child(4) {
display: none;
}
.layout-related-content .layout-area:nth-child(5) {
width: 66%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-grid-4
┌─────┬─────┬─────┬─────┐
| | | | |
| 1 | 2 | 3 | 4 |
| | | | |
├─────┼─────┼─────┼─────┤
| | | | |
| 5 | 6 | 7 | 8 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 8) */
.layout-grid-4 .layout-area {
width: 25%;
float: left;
height: 20rem;
}
/* ------------------------------------------
LAYOUT: layout-grid-hero-center
┌─────┬───────────┬─────┐
| | | |
| 1 | 2 | 3 |
| | | |
├─────┼─────┬─────┼─────┤
| | | | |
| 4 | 5 | 6 | 7 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-grid-hero-center .layout-area:nth-child(1),
.layout-grid-hero-center .layout-area:nth-child(3) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(2) {
float: left;
width: 50%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(4),
.layout-grid-hero-center .layout-area:nth-child(5),
.layout-grid-hero-center .layout-area:nth-child(6),
.layout-grid-hero-center .layout-area:nth-child(7) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(8) {
display: none;
}
</style>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<div id="root">
</div>
<script id="jsbin-javascript">
class Layout extends React.Component {
constructor(props, context) {
super(props, context);
}
getLayoutClass(layoutName = 'layout-equal-column') {
const layoutClasses = {
'equal-column' : 'col-eq',
'grid' : 'col-sm-6 col-md-4',
'1-column' : 'one-column',
'2-column' : 'col-xs-6',
'3-column' : 'col-md-4',
'4-column' : 'col-md-3',
'5-column' : 'col-md-3',
'6-column' : 'col-md-2'
};
let layoutClass = layoutClasses[layoutName];
// default to '' if no key is found
if (layoutClass === undefined) {
layoutClass = '';
}
return layoutClass;
}
render() {
const children = this.props.children;
return (
React.createElement("div", {className: `row layout ${this.props.useLayout}`, 'data-layout': this.props.useLayout},
React.Children.map(children, (child, index) => {
return ( React.createElement("div", {className: `layout-area ${this.getLayoutClass(this.props.useLayout)}`, key: this.props.useLayout + index}, child) );
})
)
)
}
}
var ContentArea = (data) => {
return (
React.createElement("div", {className: "content-area"},
data.areaName
)
)
};
class HomePage extends React.Component {
constructor(props, context) {
super(props, context);
}
componentWillMount() {
}
/*
layout-homepage
layout-main
layout-related-content
layout-grid-4
layout-grid-hero-center
*/
render() {
return (
React.createElement(Layout, {useLayout: "layout-grid-hero-center"},
React.createElement(ContentArea, {areaName: "Header"}),
React.createElement(ContentArea, {areaName: "Nav"}),
React.createElement(ContentArea, {areaName: "SubNav"}),
React.createElement(ContentArea, {areaName: "Aside"}),
React.createElement(ContentArea, {areaName: "Content"}),
React.createElement(ContentArea, {areaName: "RelatedContent"}),
React.createElement(ContentArea, {areaName: "SubFooter"}),
React.createElement(ContentArea, {areaName: "Footer"})
)
)
}
}
ReactDOM.render(React.createElement(HomePage, null), document.getElementById("root"));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Declarative React Layouts by Rozario Chivers</title>
<style>
body {
font-family: arial;
counter-reset: component-counter;
}
.layout-area {
// padding: 0!important;
// margin: 0!important;
}
.layout-hompage {
.layout-area {
padding: 0!important;
margin: 0!important;
}
}
.content-area {
border: 1px solid transparent;
padding: 2rem;
font-size: 1rem;
font-weight: bold;
}
.content-area {
counter-increment: component-counter;
}
.content-area::before {
content: counter(component-counter);
font-size: 2rem;
line-height: 3rem;
position: absolute;
top: 1rem;
left: 1rem;
font-weight: bold;
border-radius: 4rem;
border: 4px solid #3B3E54;
display: inline-block;
text-align: center;
width: 3rem;
height: 3rem;
background: #fc3;
margin-right: 1rem;
}
.layout-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#eee 10px,
#eee 20px
);
outline: 2px solid #333;
}
</style>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"><\/script>
<script src="https://fb.me/react-dom-15.1.0.js"><\/script>
<div id="root">
</div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* layout debug */
div:hover[data-layout]::after {
content: "Layout Template: " attr(data-layout);
color: #333;
font-size: 2rem;
}
/* ------------------------------------------
LAYOUT: layout-homepage
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────┬─────┬─────┤
| | | |
| 4 | 5 | 6 |
| | | |
├─────┴─────┴─────┤
| 7 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-homepage .layout-area:nth-child(4) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(5) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: main
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────────────────┤
| |
| 4 |
| |
├─────────────────┤
| 5 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 5) */
.layout-main .layout-area:nth-child(3) {
display: none;
}
.layout-main .layout-area:nth-child(4) {
display: none;
}
.layout-main .layout-area:nth-child(5) {
background: #fff;
height: 40rem;
}
.layout-main .layout-area:nth-child(6) {
display: none;
}
.layout-main .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-related-content
┌─────────────────┐
| 1 |
├───────────┬─────┤
| | |
| 2 | 3 |
| | |
├───────────┴─────┤
| 4 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 4) */
.layout-related-content .layout-area:nth-child(2),
.layout-related-content .layout-area:nth-child(3) ,
.layout-related-content .layout-area:nth-child(4) {
display: none;
}
.layout-related-content .layout-area:nth-child(5) {
width: 66%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-grid-4
┌─────┬─────┬─────┬─────┐
| | | | |
| 1 | 2 | 3 | 4 |
| | | | |
├─────┼─────┼─────┼─────┤
| | | | |
| 5 | 6 | 7 | 8 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 8) */
.layout-grid-4 .layout-area {
width: 25%;
float: left;
height: 20rem;
}
/* ------------------------------------------
LAYOUT: layout-grid-hero-center
┌─────┬───────────┬─────┐
| | | |
| 1 | 2 | 3 |
| | | |
├─────┼─────┬─────┼─────┤
| | | | |
| 4 | 5 | 6 | 7 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-grid-hero-center .layout-area:nth-child(1),
.layout-grid-hero-center .layout-area:nth-child(3) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(2) {
float: left;
width: 50%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(4),
.layout-grid-hero-center .layout-area:nth-child(5),
.layout-grid-hero-center .layout-area:nth-child(6),
.layout-grid-hero-center .layout-area:nth-child(7) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(8) {
display: none;
} </script>
<script id="jsbin-source-javascript" type="text/javascript">class Layout extends React.Component {
constructor(props, context) {
super(props, context);
}
getLayoutClass(layoutName = 'layout-equal-column') {
const layoutClasses = {
'equal-column' : 'col-eq',
'grid' : 'col-sm-6 col-md-4',
'1-column' : 'one-column',
'2-column' : 'col-xs-6',
'3-column' : 'col-md-4',
'4-column' : 'col-md-3',
'5-column' : 'col-md-3',
'6-column' : 'col-md-2'
};
let layoutClass = layoutClasses[layoutName];
// default to '' if no key is found
if (layoutClass === undefined) {
layoutClass = '';
}
return layoutClass;
}
render() {
const children = this.props.children;
return (
<div className={`row layout ${this.props.useLayout}`} data-layout={this.props.useLayout}>
{React.Children.map(children, (child, index) => {
return ( <div className={`layout-area ${this.getLayoutClass(this.props.useLayout)}`} key={this.props.useLayout + index}>{child}</div> );
})}
</div>
)
}
}
var ContentArea = (data) => {
return (
<div className="content-area">
{data.areaName}
</div>
)
};
class HomePage extends React.Component {
constructor(props, context) {
super(props, context);
}
componentWillMount() {
}
/*
layout-homepage
layout-main
layout-related-content
layout-grid-4
layout-grid-hero-center
*/
render() {
return (
<Layout useLayout="layout-grid-hero-center">
<ContentArea areaName="Header" />
<ContentArea areaName="Nav" />
<ContentArea areaName="SubNav" />
<ContentArea areaName="Aside" />
<ContentArea areaName="Content" />
<ContentArea areaName="RelatedContent" />
<ContentArea areaName="SubFooter" />
<ContentArea areaName="Footer" />
</Layout>
)
}
}
ReactDOM.render(<HomePage />, document.getElementById("root"));</script></body>
</html>
Raw
jsbin.wizelen.css
/* layout debug */
div:hover[data-layout]::after {
content: "Layout Template: " attr(data-layout);
color: #333;
font-size: 2rem;
}
/* ------------------------------------------
LAYOUT: layout-homepage
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────┬─────┬─────┤
| | | |
| 4 | 5 | 6 |
| | | |
├─────┴─────┴─────┤
| 7 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-homepage .layout-area:nth-child(4) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(5) {
width: 33%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-homepage .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: main
┌─────────────────┐
| 1 |
├─────────────────┤
| 2 |
├─────────────────┤
| 3 |
├─────────────────┤
| |
| 4 |
| |
├─────────────────┤
| 5 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 5) */
.layout-main .layout-area:nth-child(3) {
display: none;
}
.layout-main .layout-area:nth-child(4) {
display: none;
}
.layout-main .layout-area:nth-child(5) {
background: #fff;
height: 40rem;
}
.layout-main .layout-area:nth-child(6) {
display: none;
}
.layout-main .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-related-content
┌─────────────────┐
| 1 |
├───────────┬─────┤
| | |
| 2 | 3 |
| | |
├───────────┴─────┤
| 4 |
└─────────────────┘
------------------------------------------ */
/* @assert(totalAreas == 4) */
.layout-related-content .layout-area:nth-child(2),
.layout-related-content .layout-area:nth-child(3) ,
.layout-related-content .layout-area:nth-child(4) {
display: none;
}
.layout-related-content .layout-area:nth-child(5) {
width: 66%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(6) {
width: 34%;
background: #fff;
float: left;
height: 40rem;
}
.layout-related-content .layout-area:nth-child(7) {
clear: both;
}
/* ------------------------------------------
LAYOUT: layout-grid-4
┌─────┬─────┬─────┬─────┐
| | | | |
| 1 | 2 | 3 | 4 |
| | | | |
├─────┼─────┼─────┼─────┤
| | | | |
| 5 | 6 | 7 | 8 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 8) */
.layout-grid-4 .layout-area {
width: 25%;
float: left;
height: 20rem;
}
/* ------------------------------------------
LAYOUT: layout-grid-hero-center
┌─────┬───────────┬─────┐
| | | |
| 1 | 2 | 3 |
| | | |
├─────┼─────┬─────┼─────┤
| | | | |
| 4 | 5 | 6 | 7 |
| | | | |
└─────┴─────┴─────┴─────┘
------------------------------------------ */
/* @assert(totalAreas == 7) */
.layout-grid-hero-center .layout-area:nth-child(1),
.layout-grid-hero-center .layout-area:nth-child(3) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(2) {
float: left;
width: 50%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(4),
.layout-grid-hero-center .layout-area:nth-child(5),
.layout-grid-hero-center .layout-area:nth-child(6),
.layout-grid-hero-center .layout-area:nth-child(7) {
float: left;
width: 25%;
height: 20rem;
}
.layout-grid-hero-center .layout-area:nth-child(8) {
display: none;
}
Raw
jsbin.wizelen.js
class Layout extends React.Component {
constructor(props, context) {
super(props, context);
}
getLayoutClass(layoutName = 'layout-equal-column') {
const layoutClasses = {
'equal-column' : 'col-eq',
'grid' : 'col-sm-6 col-md-4',
'1-column' : 'one-column',
'2-column' : 'col-xs-6',
'3-column' : 'col-md-4',
'4-column' : 'col-md-3',
'5-column' : 'col-md-3',
'6-column' : 'col-md-2'
};
let layoutClass = layoutClasses[layoutName];
// default to '' if no key is found
if (layoutClass === undefined) {
layoutClass = '';
}
return layoutClass;
}
render() {
const children = this.props.children;
return (
React.createElement("div", {className: `row layout ${this.props.useLayout}`, 'data-layout': this.props.useLayout},
React.Children.map(children, (child, index) => {
return ( React.createElement("div", {className: `layout-area ${this.getLayoutClass(this.props.useLayout)}`, key: this.props.useLayout + index}, child) );
})
)
)
}
}
var ContentArea = (data) => {
return (
React.createElement("div", {className: "content-area"},
data.areaName
)
)
};
class HomePage extends React.Component {
constructor(props, context) {
super(props, context);
}
componentWillMount() {
}
/*
layout-homepage
layout-main
layout-related-content
layout-grid-4
layout-grid-hero-center
*/
render() {
return (
React.createElement(Layout, {useLayout: "layout-grid-hero-center"},
React.createElement(ContentArea, {areaName: "Header"}),
React.createElement(ContentArea, {areaName: "Nav"}),
React.createElement(ContentArea, {areaName: "SubNav"}),
React.createElement(ContentArea, {areaName: "Aside"}),
React.createElement(ContentArea, {areaName: "Content"}),
React.createElement(ContentArea, {areaName: "RelatedContent"}),
React.createElement(ContentArea, {areaName: "SubFooter"}),
React.createElement(ContentArea, {areaName: "Footer"})
)
)
}
}
ReactDOM.render(React.createElement(HomePage, null), document.getElementById("root"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment