Skip to content

Instantly share code, notes, and snippets.

@greensounds

greensounds/flexbox-sandbox.markdown

Forked from anonymous/flexbox-sandbox.markdown
Created November 4, 2016 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save greensounds/874f94b42af21be074b7ab8cd76b828b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save greensounds/874f94b42af21be074b7ab8cd76b828b to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Sandbox
Raw
index.html
<div class="banner">
<h1 class="shadow">Flexbox Banner</h1>
<h3 class="shadow">Perfectly Centered</h3>
<h6 class="shadow">No matter how many lines of text you use.</h6>
</div>
<nav class="main-nav">
<ul class="menu">
<li class="menu-home">
<a>
<i class="fa fa-home"></i>
<div class="menu-text">
<h4>Home</h4>
<p>Start Here</p>
</div>
</a>
</li>
<li class="menu-products">
<a>
<i class="fa fa-shopping-basket"></i>
<div class="menu-text">
<h4>Products</h4>
<p>Shop Now</p>
</div>
</a>
</li>
<li class="menu-blog">
<a>
<i class="fa fa-pencil"></i>
<div class="menu-text">
<h4>Blog</h4>
<p>My Thoughts</p>
</div>
</a>
</li>
<li class="menu-contact">
<a>
<i class="fa fa-phone"></i>
<div class="menu-text">
<h4>Contact</h4>
<p>Get in Touch</p>
</div>
</a>
</li>
</ul>
</nav>
<main>
<section class="main-content">
<div class="panel clear">
<h1>Main Title</h1>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked
and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/laptop001.jpg" alt="laptop" />
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when
you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
<h3>Subtitle</h3>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each
other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle
to man.</p>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American
crime. Like they're actually proud of that shit.</p>
</div>
</section>
<aside class="sidebar">
<div class="panel">
<h3>Item 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="panel">
<h3>Item 2</h3>
<p>Vivamus eget ultricies eros.</p>
</div>
<div class="panel">
<h3>Item 3</h3>
<p>Integer a consectetur dui.</p>
</div>
<div class="panel">
<h3>Item 4</h3>
<p>Fusce velit mauris, vestibulum ut ornare a, interdum eu libero.</p>
</div>
</aside>
</main>
<div class="seamless-image-grid">
<div class="image01"></div>
<div class="image02"></div>
<div class="image03"></div>
<div class="image04"></div>
<div class="image05"></div>
<div class="image06"></div>
<div class="image07"></div>
<div class="image08"></div>
<div class="image09"></div>
<div class="image10"></div>
<div class="image11"></div>
<div class="image12"></div>
</div>
<div class="image-grid">
<div class="image-row">
<div class="image01"></div>
<div class="image02"></div>
<div class="image03"></div>
</div>
<div class="image-row">
<div class="image04"></div>
<div class="image05"></div>
</div>
<div class="image-row">
<div class="image06"></div>
<div class="image07"></div>
<div class="image08"></div>
<div class="image09"></div>
</div>
<div class="image-row">
<div class="image10"></div>
<div class="image11"></div>
<div class="image12"></div>
</div>
</div>
<section class="subscribe">
<section class="articles">
<article>
<h1>Oh No!?</h1>
<small>November 9, 2016</small>
<p>Someone won the election and it's scurry?</p>
<p>Go US.</p>
<h3>Keep on Truckin'</h3>
<p>Sometimes things work out in a unexpected but opportune manner.</p>
<p>Life can be funny sometimes!</p>
</article>
</section>
<aside>
<h4>Subscribe for Updates</h4>
<p>We'd love to keep you informed of our updates</p>
<form>
<input type="text" placeholder="First Name" />
<input type="text" placeholder="email@address" />
<button type="submit">Sign Me Up!</button
</form>
</aside>
</section>
Raw
style.css
* {
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
color: #444;
font-family: Helevetica, Arial, sans-serif;
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
.clear {
clear: both;
}
.shadow {
text-shadow: 0.1em 0.1em 0.33em #000;
}
.banner {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat;
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 18em;
justify-content: center;
margin: 0.6em;
}
.banner > :first-child {
font-size: 4em;
}
.banner > :nth-child(2) {
font-size: 2em;
font-weight: normal;
text-transform: uppercase;
}
.banner > :last-child {
font-size: 1.33em;
}
.main-nav {
margin: 0.6em;
}
.main-nav .menu {
background-color: #ccc;
display: flex;
height: 4em;
justify-content: space-around;
list-style: none;
padding-left: 0;
}
.main-nav .menu li {
padding: 0.25em;
padding-top: 1em;
}
.main-nav .fa {
display: inline-block;
font-size: 1em;
vertical-align: top;
}
.main-nav .menu-text {
display: inline-block;
}
.main-nav .menu-text > :first-child {
margin: 0;
text-transform: uppercase;
}
.main-nav .menu-text p {
font-size: 0.8em;
margin: 0;
}
.main-nav a {
color: #111;
text-decoration: none;
}
@media screen and (max-width: 500px) {
.main-nav .menu-text p {
display: none;
}
}
@media screen and (max-width: 440px) {
.main-nav .menu {
flex-direction: column;
height: inherit;
}
.main-nav .menu li {
border-bottom: 1px solid #fff;
}
.main-nav .menu li:last-child {
border-bottom: none;
}
}
main {
display: flex;
}
main .panel {
background-color: #fff;
margin: 0.6em;
padding: 1.25em;
}
main .main-content,
main .sidebar {
background-color: #ccc;
margin: 0.6em;
padding: 0.4em;
}
main .main-content {
flex: 3;
}
main .main-content .panel img {
float: left;
margin: 0 0.6em 0 0;
}
main .sidebar {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
}
main .sidebar .panel > :first-child {
font-size: 0.8em;
margin: 0;
}
main .sidebar p {
font-size: 0.7em;
}
@media screen and (max-width: 600px) {
main {
flex-direction: column;
}
}
.image01 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-01.jpg');
}
.image02 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-02.jpg');
}
.image03 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-03.jpg');
}
.image04 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-04.jpg');
}
.image05 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-05.jpg');
}
.image06 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-06.jpg');
}
.image07 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-07.jpg');
}
.image08 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-08.jpg');
}
.image09 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-09.jpg');
}
.image10 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-10.jpg');
}
.image11 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-11.jpg');
}
.image12 {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/food-drink-12.jpg');
}
.image-grid,
.seamless-image-grid {
margin: 0.6em;
}
.image-row,
.seamless-image-grid {
display: flex;
}
.seamless-image-grid {
flex-wrap: wrap;
}
.image-row div,
.seamless-image-grid div {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 15em;
}
.seamless-image-grid div {
flex-grow: 0;
width: 25%;
}
.image-row div {
margin: 0.25em;
}
.image-row .image01,
.image-row .image02,
.image-row .image04,
.image-row .image07,
.image-row .image09,
.image-row .image10,
.image-row .image11,
.image-row .image12 {
flex-grow: 1;
}
.image-row .image03,
.image-row .image05,
.image-row .image06 {
flex-grow: 2;
}
.image-row .image08 {
flex-grow: 3;
}
@media screen and (max-width: 400px) {
.image-row,
.seamless-image-grid {
flex-direction: column;
}
.seamless-image-grid {
flex-wrap: nowrap;
}
.seamless-image-grid div {
width: 100%;
}
}
.subscribe {
display: flex;
margin: 0 auto;
max-width: 800px;
}
.subscribe aside > :first-child {
font-size: 1.6em;
}
.subscribe article,
.subscribe aside {
margin: 1.25em;
}
.subscribe article {
background-color: #fff;
border-top: 0.25em solid #f25f29;
padding: 1.25em;
}
.subscribe aside {
flex-shrink: 3;
font-size: 0.8em;
}
.subscribe form input {
border: 1px solid #bbb;
margin: 0.66em 0;
padding: 0.66em 0.25em;
width: 100%;
}
.subscribe form button {
background-color: #354aa3;
border: none;
color: #fff;
display: block;
padding: 1.25em 0.25em;
width: 100%;
}
@media screen and (max-width: 400px) {
.subscribe {
flex-direction: column;
}
.subscribe aside {
order: -1;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment