We're growing into something new. Read More
dpvitt

Dan Pavitt


/* $Grids
================================================== */

// Bureau Responsive Grid
// Based on CSS Wizardry / Harry Roberts Grid System
// Author	: Daniel Pavitt - @dpvitt
// URL		: http://danielpavitt.com / http://bureau-va.com
//
// ==================================================================

// Grid default variable
$totalColumns  	: 12;
$columnWidth 	: 60px;
$gutterWidth  	: 20px;
$gridWidth      : 960px;


// Grid Calculation for Percentages
@function col($n) {
	@return percentage( (( $n * ($columnWidth + $gutterWidth) - $gutterWidth) ) / $gridWidth );
}

// Each column
@mixin column($n) {
	width: col($n);
	margin-left: percentage( $gutterWidth / $gridWidth );
}

// Grid container
.grids {
	width: auto;
	max-width: $gridWidth;
	margin-left: -(percentage( $gutterWidth / $gridWidth ));
	clear: both;
	list-style: none;
	overflow: hidden;
}

// Generates styles
@for $i from 1 to $totalColumns {
	.grid-#{$i}{
		@include column($i);
	}
}

// Controls the column float
[class^="grid-"] {
	float: left;
}

/*
 *	This iterates through each column and produces output like this:
 * 
 *	.grid-1 {
 *		width: 6.25%;
 *		margin-left: 2.08333%;
 *	}
 *
 *
 *	Simply add .grid-n as a class to your element
 *	<div class="grid-12">
 *
 */

SASS Responsive Grid Generator

If you're using SASS, you shouldn't need to keep running a fluid grid calculator through your designs. Instead have this mixin ready and waiting to do the calculations for you. The output is based on Harry Roberts CSS Wizardry Fluid Grid Generator (which is currently down, but will be back online soon) — I think it's the nicest example of how to code up a grid, so I replicated that style. All you need to do is add this into a file and compile it in with the rest of your SASS, then simply fill out the Grid Variables: $totalColumns, $columnWidth, $gutterWidth and $gridWidth. It's on GitHub here: https://github.com/dpvitt/sass-grid-generator Let me know what you think, or if you have any suggestions to improve it.

Environmental Icons

For my major project at University I am attempting to produce a collaborative website that allows users to upload and plot contributors to the UK's environment on a map... I.E. Wind Farms, Industrial Plants, Power Stations. I have come up with some icons that portray each type of environmental contributor, seen in the image. From Left to Right: Oil Refineries and Spills, Industrial, Radiation, Chemical, Transport, Sewage, Deforestation, Litter and Fly-Tipping, Landfill Sites, Wave, Wind, Solar, Geothermal, Hydro, Animal Preserve. The icons will have a tool-tip explaining each below it, however I feel some of the icons could be improved, especially the Geothermal and Hydro ones. Has anyone got any ideas?

$(function() {

    $.ajax({
    	type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]",
        success: function(data) {

            for (var i = 0; i < 6; i++) {
        $(".instagram").append("<div class='instagram-placeholder'>
        <a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.thumbnail.url +"' /></a></div>");   
      		}     
                            
        }
    });
});

Using the Instagram API

I spent ages looking for an example of the Instagram API in action and couldn't find one, so I thought I would make my own... You can view what it looks like in the social section of my website: danielpavitt.com Firstly, you need to register with the Instagram API. You can do so here: instagr.am/developer/ Secondly, you need to register your client with the API. You can do so here: instagr.am/developer/manage/ When you do this, set the callback URL relative to the page you are creating your Instagram feed on. Thirdly, you will need to gain an access token to authorize your user account with your registered application. You can do this by wrapping the entire $.ajax function in an IF statement like so: var access_token = location.hash.split('=')[1]; if (location.hash) { $.ajax goes here... } else { location.href="https://instagram.com/oauth/ authorize/?display=touch&client_id=[clientid] &redirect_uri=[callbackuri]/&response_type=token"; } Obviously, replace the [clientid] and [callbackuri] of the location.href with appropriate data. You gain this when you register your application at instagr.am/developer/manage/ When this if statement operates you will be given an access token in the URL of your callback. You need to put this in replace of [access_token] in the url value in the ajax call. url: "https://api.instagram.com/v1/users/[userid]/media/recent/?access_token=[access_token]" You also need to replace [userid] with your own userid (not username). If you can't find out your userid, give me a comment and I can help. Note: mine is 1055710. Finally, after you have your access token, remove or comment out the IF statement to stop the access_token showing in your URL. HTH, You can gain full documentation of authorization information here: instagr.am/developer/ As well as access to the format of the output of JSONP for you to call out data.

Excite - Interactive Art Exhibition.

Another idea for our exhibition logo, this time with the concept of 4 different colours that will represent each type of product; Websites, Applications, Installations and Games. New name of 'Excite', using the image of a light-bulb, or electricity sourcey type thing.

Esc

A logo idea for our London Graduation Show called Escape.

Icons

Icons for my major project. Pollution Plotter. These will be resized and placed on a google map.