jordangray

/**
 * Triangular prisms with pseudo-elements and transforms
 **/

body {
	background: #fff;
}

#origin {
	transform-style: preserve-3d;

jordangray

/**
 * Automasking
 */

.mask-content {
	position: relative;
	padding: .2em 0;
	width: 1.2em;
	text-align: center;
}

jordangray

/// Get the UIColor corresponding to a CSS hex color code (RGB[A] or RRGGBB[AA])
///
/// - Parameter hex: A hexadecimal representation of the colou
/// - Returns: The UIColor represented by the hexidecimal color code, or UIColor.clear if parsing failed
func colorFromHexString (hex:String) -> UIColor {

    // Remove padding, leading hash symbol etc.
    let hex = hex.trimmingCharacters(in: NSCharacterSet.alphanumerics.inverted)

    // Get numeric representation

jordangray

body {
	height: 3000em;
}

.parallax {  perspective: 1px;  height: 100vh;  overflow-x: hidden;  overflow-y: auto;}

.parallax__layer {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

.parallax__layer--base {  transform: translateZ(0);}.parallax__layer--back {  transform: translateZ(-1px);}

jordangray

body {
	height: 300%;
}

jordangray

# Test for formaction attribute support in Modernizer.
Modernizr.addTest 'formaction', 'formaction' of document.createElement('input')

# Shim for formaction attributes on buttons and inputs.
$.fn.shimFormAction = ->
  return this if Modernizr.formaction

  this.each ->
    $(this).find   'input,button'
           .filter '[formaction!=""][formaction]'

jordangray

/* Shirt pattern */
                                                              /*             Colours seen from the top down           */
background-image:                                             /*             0         50        100       150        */
	linear-gradient(to left, white 10%, transparent 10%),     /* white:      w         w         w         w          */
	linear-gradient(to left, steelblue 50%, transparent 50%), /* light blue: llllllllll          llllllllll           */
	linear-gradient(to left, maroon 50%, navy 50%);           /* red & blue: rrrrrrrrrrrrrrrrrrrrbbbbbbbbbbbbbbbbbbbb */

background-size: 50px, 100px, 200px;

jordangray

/* Mock up using custom elements */

body {
	margin: 0;
}

cat-timeline,
cat-grid,
cat-gridline,
cat-animations,

jordangray

/* Testing out a theory */
/* Grabbed from http://css-tricks.com/myth-busting-css-animations-vs-javascript/?ref=heydesigner */

@keyframes spin {
	0% {
		color: red;
		transform-origin:50% 50% 0;
		transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
	}
	

jordangray

/* UK Transport mockup */


/* Basic typography and spacing */

h1 {
	font-weight: normal;
	font-size: 34px;
}