hucklesby

<h1>Flex &amp; Justified Grid</h1>
<div class="grid">
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>
  <div class="grid-col"><div class="grid-content"></div></div>

hucklesby

<h1>Justified Grid</h1>
<div class="grid">
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>
  <div class="grid-col"></div>

hucklesby

<div id="listing">
	<ul>
		<li> <a href="#" class="category ball">Ball Workouts</a> </li>
		<li> <a href="#" class="category ballet">Ballet/Barre</a> </li>
		<li> <a href="#" class="category bosu">Bosu</a> </li>
		<li> <a href="#" class="category cardio">Cardio Aerobics</a> </li>
		<li> <a href="#" class="category circuit">Circuit</a> </li>
		<li> <a href="#" class="category kettlebell">Kettlebell</a> </li>
		<li> <a href="#" class="category kickbox">Kickboxing</a> </li>
		<li> <a href="#" class="category pilates">Pilates</a> </li>

hucklesby

A Pen by David Hucklesby

A Pen by David Hucklesby on CodePen.

License.

hucklesby

Combining flexbox and floats

Percentage based layouts can drop the last column when using floats or inline-blocks. Flexbox is a better solution. This is my attempt to combine old and new methods for a more robust solution. Not perfect, though!

A Pen by David Hucklesby on CodePen.

License.

hucklesby

/**
 * Fit caption to the width of any image
 */
.captioned-figure {
	display: table;
	table-layout: fixed;
}
.captioned-figure img {
	margin-bottom: 10px;
	border: 0;

hucklesby

/**
 * Full-width vertically centered menu bar
 * Addendum to solutions from Roger Johansson
 * http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/
 */
body {
	margin: 3em 0 0;
	background-color: #f0f0f0;
	color: #000;
}

hucklesby

/**
 * A responsive image slide show
 * This is just the basic structure (test)
 */

* { box-sizing: border-box; }

/* Picture gallery - all pictures visible for this demo */
.slides {
	position: absolute;

hucklesby

/**
 * A serrated circle
 */
* {
	box-sizing: border-box;
}
html {
	font-size: 100%;
	overflow-y: scroll;
}

hucklesby

/** Responsive menu
 *	Collapsed main menu for narrow screens.
 */
* {
	box-sizing: border-box;
}
article,
footer,
header,
main,