jackmakesthings

<div id="press" class="module-block">
  <div class="module-block__inner">
    <h1>Press</h1>
    <h2>Recent Articles</h2>
    <div class="module-block__inner-content main-press">
      <figure class="ss-icon">
        <img src="http://fillmurray.com/100/115" alt="">
        <figcaption><a href="#">test link</a></figcaption>
      </figure>

jackmakesthings

<div class="timeline-block">

	<ol class="timeline">

		<li class="timeline-item timeline-item-minor right">
			<p>2000: Founding of Industry Ventures (now $1bn manager)</p>
		</li>

		<li class="timeline-item timeline-item-major">
			2000: $40M AUM

jackmakesthings

<?php
// this would require some data structure, you'd have the jobs in there as variables;
// i set them up here as if they're arrays but objects would be fine too


foreach($jobs as $job) : ?>

<div class="row career-block">
	<div class="col-md-9 career-description">
		<h1><?php echo $job['title']; ?></h1>

jackmakesthings

Things that might come in handy again later.

jackmakesthings

.tab { display:none; background: #ccc; padding:10px; }
.tab.show { display: block; }

jackmakesthings

var myNamespace = (function () {
 
  var myPrivateVar, myPrivateMethod;
 
  // A private counter variable
  myPrivateVar = 0;
 
  // A private function which logs any arguments
  myPrivateMethod = function( foo ) {
      console.log( foo );

jackmakesthings

// Generated on 2014-06-16 using generator-webapp 0.4.9
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {

jackmakesthings

<?php

// This goes in functions.php

function create_section($key, $heading) {

  global $post; // makes sure the reference to get_field is correct
  
  $out = '<div class="module-block__inner-toggle" id="show-' . $key . '">';
  $out .= '<h1>' . $heading . '</h1>';

jackmakesthings

Style tiles with SCSS

Design style tiles in the browser with SCSS! Fork this in CodePen and make your own tiles. Share your tiles with clients with the Full Page link. Go CodePen Pro and update styles on the fly in Live View in a meeting with your client. It's responsive, too. Get your in-browser design on.

On GitHub at http://github.com/jeradg/style-tiles-with-scss

Like this? Follow me on CodePen (http://codepen.io/jeradg) and Twitter (http://twitter.com/jeradg)

A brief explanation:

jackmakesthings

<div class="container">
  
<div class="secondary-feature">
  <img src="http://washingtonsquareparkconservancy.org/wp-content/uploads/2013/10/copy-WSP_Logo_Animation.gif" alt="">
  <h2>Public <br>Spaces</h2>
  <span>Helping an NYC <br>local landmark reach its visitors</span>
</div>
<div class="secondary-feature">
  <img src="http://www.kratedesign.com/wp-content/uploads/2013/10/IMG_6495-503x377.jpg" alt="">
  <h2>Antiques, modernized</h2>