Skip to content

Instantly share code, notes, and snippets.

@jaredphillips
jaredphillips / Bird-Animation.markdown
Created April 27, 2014 03:40
A Pen by Jared Phillips.
@jaredphillips
jaredphillips / index.haml
Created May 1, 2014 02:43
A Pen by Jared Phillips.
.sub-callout
%ul.menu
%li
%a.page-link{ href: "#" } About
%li
%a.page-link{ href: "#" } Chili-for-Charity
%li
%a.page-link{ href: "#" } Artshow
%li
%a.page-link{ href: "#" } Menu
@jaredphillips
jaredphillips / gist:8b943063a754a7c88335
Created May 20, 2014 21:33
From wireframe to html
<header>
<h1></h1>
</header>
<div class="main">
<!-- background img full bleed -->
</div>
<div class="sidebar">
<ul class="links">
<li class="link"><a href="#">Link</a></li>
<li class="link"><a href="#">Link</a></li>
<p>Code Example for formatting and styling</p>
@jaredphillips
jaredphillips / Style Guide - Color Sample
Last active August 29, 2015 14:03
Style Guide - Color Sample
<h2 class="section-title">Colours</h2>
<!-- Add your own colour swatches down here! -->
<ul class="colours">
<li>
<!-- We put our style just in line here -->
<span class="swatch" style="background: #85D4E3;"></span>
<!-- Here just a description and the hex code again (for copy/pasting in a pinch) -->
<p class="label">blue | #85D4E3</p>
</li>
@jaredphillips
jaredphillips / gist:3872bfc4938f08ec94ae
Created June 27, 2014 01:24
Style Guide - Google Fonts
<head>
<!-- Somewhere in the head put this dude -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<head>
<!-- Inline style that font here -->
<p style="font-family: 'Roboto', sans-serif;">Suddenly it was twenty-five years later. I was old, sitting in a
red room. There was a midget in a red suit and a beautiful young woman who looked exactly like Laura Palmer.
The little man told me my favorite gum was coming back in style and didn't his cousin look exactly
like Laura Palmer?</p>
@jaredphillips
jaredphillips / gist:a7657b952b3268c0b898
Created June 27, 2014 01:37
Style Guide - SASS Defaults
$blue: #85D4E3;
$pink: #F4B5BD;
$dark-green: #9C964A;
$light-green: #CDC08C;
$yellow: #FAD77B;
$off-black: #2C3E50;
$grey: #D3DDDC;
$darker-grey: #95A5A6;
h1, h2, h3, h4, h5, h6 {
<h2 class="section-title">Colours</h2>
<!-- Add your own colour swatches down here! -->
<ul class="colours">
<li>
<!-- We put our style just in line here -->
<span class="swatch" style="background: #85D4E3;"></span>
<!-- Here just a description and the hex code again (for copy/pasting in a pinch) -->
<p class="label">blue | #85D4E3</p>
</li>
@jaredphillips
jaredphillips / gist:37e31cbd5b395cd058fe
Last active August 29, 2015 14:03
Style Guide - Inline Styles
<h2>Colours</h2>
<!-- Add your own colour swatches down here! -->
<ul class="colours">
<li>
<!-- We put our style just in line here -->
<span class="swatch" style="background: #85D4E3;"></span>
<!-- Here just a description and the hex code again (for copy/pasting in a pinch) -->
<p class="label">blue | #85D4E3</p>
</li>
// My custom emmet shortcuts
{
"snippets": {
"file-type (eg html)": {
"snippets": {
"keys-typed": "your-shortcut"
}
}
}