Skip to content

Instantly share code, notes, and snippets.

@btilford

btilford/combo.html

Last active August 29, 2015 14:26
Show Gist options
  • Save btilford/30459f8db532a19f3c95 to your computer and use it in GitHub Desktop.
Save btilford/30459f8db532a19f3c95 to your computer and use it in GitHub Desktop.
Download ZIP
% grid + column + flexbox
Raw
combo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 99vw;
height: 100vh;
padding: 0;
margin: 0;
}
table {
width: 100%;
}
th {
text-align: left;
border-bottom: 1px solid black;
}
.grid__section {
background: rgba(20, 20, 20, .5);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
align-content: center;
margin: 0 0 1rem 0;
padding: 1rem;
}
.grid__item--sm {
box-shadow: 0 0 2px rgba(20, 20, 20, .5);
margin: 1rem;
transition: all .3s ease-in;
padding: 1rem;
background-color: red;
min-height: 100px;
}
.grid__item--md {
box-shadow: 0 0 2px rgba(20, 20, 20, .5);
margin: 1rem;
transition: all .3s ease-in;
padding: 1rem;
background-color: green;
min-height: 100px;
}
.grid__item--lg {
box-shadow: 0 0 2px rgba(20, 20, 20, .5);
margin: 1rem;
transition: all .3s ease-in;
padding: 1rem;
background-color: blue;
min-height: 100px;
}
.grid__item--mega {
box-shadow: 0 0 2px rgba(20, 20, 20, .5);
margin: 1rem;
transition: all .3s ease-in;
padding: 1rem;
background-color: orange;
min-height: 100px;
}
.grid__heading {
flex: 5 0 100%;
margin: 0 0 1rem 0;
transition: all .3s ease-in;
padding: 1rem;
}
.grid__item--sm {
flex: 1 0 50%;
}
.grid__item--md {
flex: 2 0 100%;
}
.grid__item--lg {
flex: 2 0 100%;
}
.grid__item--mega {
flex: 2 0 100%;
}
@media (min-width: 800px) {
.grid__item--sm {
flex: 1 0 30%;
}
.grid__item--md {
flex: 2 0 75%;
}
.grid__item--lg {
flex: 3 0 100%;
}
.grid__item--mega {
flex: 4 0 100%;
}
}
@media (min-width: 1000px) {
.grid__item--sm {
flex: 1 0 25%;
}
.grid__item--md {
flex: 2 0 45%;
}
.grid__item--lg {
flex: 3 0 70%;
}
.grid__item--mega {
flex: 4 0 90%;
}
}
</style>
</head>
<body>
<main class="grid_main">
<section class="grid__section">
<h2 class="grid__heading">Block 1</h2>
<div class="grid__item--mega" style="height: 400px">
<table>
<tr>
<th>class</th>
<th>color</th>
<th>default</th>
<th>&gt; 800px </th>
<th>&gt; 1000px </th>
</tr>
<tr>
<td>mega</td>
<td>yellow</td>
<td>100%</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>lg</td>
<td>blue</td>
<td>100%</td>
<td>100%</td>
<td>70%++</td>
</tr>
<tr>
<td>md</td>
<td>green</td>
<td>100%</td>
<td>75%++</td>
<td>45%++</td>
</tr>
<tr>
<td>sm</td>
<td>red</td>
<td>50%++</td>
<td>30%++</td>
<td>45%++</td>
</tr>
</table>
</div>
<div class="grid__item--sm">We frequently architect resource-constrained e-commerce. That is a
remarkable achievement considering the current and previous fiscal year's financial state of things!
</div>
<div class="grid__item--lg" style="height: 300px">If all of this may seem discombobulating to you, that's because it is!</div>
<div class="grid__item--md">Grid practically invented the term "micro-synergistic, real-time, holistic
research and development". Do you have a plan to become six-sigma? We will grow the ability of
cross-media C2C to integrate. What does the industry jargon "applications" really mean? Without
subscriber communities, you will lack macro-ultra-visionary structuring. We have come to know that
if you upgrade virtually then you may also architect strategically. We will empower the aptitude of
24/7 niches to embrace. What does the industry jargon "CAE" really mean? Quick: do you have a
short-term game plan for monitoring new C2C2B Total Quality Management? If all of this comes off as
misleading to you, that's because it is!
</div>
<div class="grid__item--sm" >Grid practically invented the term "micro-synergistic, real-time, holistic
research and development". Do you have a plan to become six-sigma? We will grow the ability of
cross-media C2C to integrate. What does the industry jargon "applications" really mean? Without
subscriber communities, you will lack macro-ultra-visionary structuring. We have come to know that
if you upgrade virtually then you may also architect strategically. We will empower the aptitude of
24/7 niches to embrace. What does the industry jargon "CAE" really mean? Quick: do you have a
short-term game plan for monitoring new C2C2B Total Quality Management? If all of this comes off as
misleading to you, that's because it is!
</div>
<div class="grid__item--mega">Think ultra-C2C2C.</div>
</section>
<section class="grid__section">
<h2 class="grid__heading">Block 2</h2>
<div class="grid__item--mega">Our feature set is unparalleled in the industry, but our 24/7 bandwidth
management and newbie-proof use is often considered a remarkable achievement.
</div>
<div class="grid__item--lg">We here at Grid think we know that it is better to strategize virtually than
to implement efficiently. We constantly drive customer-defined iteration. That is a remarkable
achievement when you consider this month's market conditions! Without interfaces, you will lack
communities. We will expedite the industry jargon "distributed". If all of this seems improbable to
you, that's because it is! We realize that if you recontextualize holistically then you may also
implement extensibly. The metrics for action-items are more well-understood if they are not
vertical. Think cyber-sexy. We will engineer the power of ultra-nano-cross-platform TQM reports to
engineer. We apply the proverb "Never look a gift horse in the mouth" not only to our re-purposing
but our capacity to disintermediate. What does the term "functionalities" really mean?
</div>
<div class="grid__item--sm">We here at Grid think we know that it is better to strategize virtually than
to implement efficiently. We constantly drive customer-defined iteration. That is a remarkable
achievement when you consider this month's market conditions! Without interfaces, you will lack
communities. We will expedite the industry jargon "distributed". If all of this seems improbable to
you, that's because it is! We realize that if you recontextualize holistically then you may also
implement extensibly. The metrics for action-items are more well-understood if they are not
vertical. Think cyber-sexy. We will engineer the power of ultra-nano-cross-platform TQM reports to
engineer. We apply the proverb "Never look a gift horse in the mouth" not only to our re-purposing
but our capacity to disintermediate. What does the term "functionalities" really mean?
</div>
</section>
<section class="grid__section">
<h2 class="grid__heading">Block 3</h2>
<div class="grid__item--mega" style="height: 300px">Grid is the industry leader of plug-and-play methodologies. What does it
really mean to drive "proactively"? We pride ourselves not only on our functionality, but our
user-proof administration and non-complex configuration. What does the buzzword "data hygiene"
really mean? We will whiteboard the capacity of leading-edge, web-enabled bandwidth to transform.
The synergies factor is social-network-based. A company that can mesh fiercely will (eventually) be
able to facilitate elegantly. What does the term "web-readiness" really mean? We invariably scale
long-term media sourcing. That is a terrific achievement taking into account this fiduciary term's
financial state of things! A company that can maximize faithfully will (at some point) be able to
reinvent defiantly. Imagine a combination of PGP and Dynamic HTML. Our functionality is unmatched in
the industry, but our co-branded re-sizing and easy operation is often considered a remarkable
achievement. We will expand our capacity to deliver without depreciating our capacity to strategize.
</div>
<div class="grid__item--sm" style="height: 200px">Quick: do you have a frictionless plan for dealing with new biometrics?
</div>
<div class="grid__item--sm">Quick: do you have a frictionless plan for dealing with new biometrics?
</div>
<div class="grid__item--sm">Quick: do you have a frictionless plan for dealing with new biometrics?
</div>
</section>
<section class="grid__section">
<h2 class="grid__heading">Block 4</h2>
<div class="grid__item--md" style="height: 400px;">We will utilize the capability of media sourcing to evolve.</div>
<div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div><div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div>
<div class="grid__item--sm">The aptitude to monetize intuitively leads to the aptitude to cultivate
perfectly.
</div>
</section>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment