iamtyce

Introduction

This question is a multi-part question that gauges how you apply various front-end Javascript and HTML / CSS to solve a given set of problems.

The question is designed to take up the entire interview. There's no expectation that we will finish all of the parts, rather the question builds on itself and we'll get to what we get to.

Step 1: Given the following rough mockup, create a static traffic light in HTML/CSS.

iamtyce

CSS3 stamp border

An experiment to try and recreate a stamp style border in CSS3 using only ::before and the element itself

A Pen by Tyce on CodePen.

License.

iamtyce

// Rotate (IE)
// Usage: @include rotate-ie(1)
//                           1 = 90 degrees
//                           2 = 180 degrees
//                           3 = 270 degrees
//                           4 = 360 degrees
 
@mixin rotate-ie($value: 0) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$value});
}

iamtyce

// Respond-to mixin for Bootstrap v3 (Sass) (https://github.com/twbs/bootstrap-sass)
// Author: @iamtyce
// Original author: @wernah, based on @benschwarz

// ******************** //
//      RESPOND TO      //
// ******************** //
// Use: @include respond-to(screen-xs) { }

@mixin respond-to($breakpoint) {

iamtyce

/**
 * HTML5 / CSS3 Circle with Partial Border
 * http://stackoverflow.com/q/13059190/1397351
 */
* { margin: 0; padding: 0; }
.circle {
	position: relative;
	margin: 7em auto;
	width: 16em; height: 16em;
	border-radius: 50%;

iamtyce

<?
// Get page data
  $post_id = $post->ID;
	$page_data = get_page($post_id);
	$page_parent = $page_data->post_parent;
	$page_template = get_field('template');
	
	// Count how many children belong to this page
	$children_args=array(
		'sort_column' => 'menu_order',

iamtyce

<?

// **********************
// PAGE ADDITION FUNCTION
// **********************

if ($_GET['add_pages'] == "true") {
    
  global $current_screen;
	$user_id = $_GET['user_id'];

iamtyce

// *************** //
// HINGE ANIMATION //
// *************** //

// Timings
$hingefirst:      0;
$hingesecond:     80deg;
$hingethird:      60deg;
$hingefouth:      700px;

iamtyce

$medium-width:    48em;
$large-width:     62em;

// Base heading sizes
$heading-base:    1.5em;

// ---------------------
// _headings.sass

// Small Default

iamtyce

// *************************** //
// IMAGE EXTENSION REPLACEMENT //
// *************************** //
// Use: @include image-background($image: "../lib/img/", $repeat: no-repeat, $position: center center);

@mixin image-background($color: transparent,$image: none,$repeat: no-repeat,$attachment: scroll,$position: center center) {
  
  // Add extension to $image
  $image: '#{$image}.#{$imageextension}';