Skip to content

Instantly share code, notes, and snippets.

View cfinster's full-sized avatar

cfinster

2 followers · 0 following
View GitHub Profile
@cfinster
cfinster / 0_reuse_code.js
Created November 17, 2013 00:29
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@cfinster
cfinster / Build-simple-website-pt-1
Created November 17, 2013 00:30
From http://teamtreehouse.com/library/build-a-simple-website/website-basics/introduction-to-the-project
<h1> Smells Like Bakin </h1>
@cfinster
cfinster / hero.sublime snippet
Created January 9, 2014 00:34
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@cfinster
cfinster / RWD Screen Width Indicator
Created January 23, 2014 20:31 — forked from jordanmoore/RWD Screen Width Indicator
<script>
$(window).resize(function() {
var windowWidth = $(window).width();
$('.screen-width').text(windowWidth + 'px');
});
</script>
<div id="debug" style="position:fixed;padding:0.3em 0.6em;background:#f1f1f1;font-size:0.6em;bottom:0;left:50%;">
<span class="screen-width">0</span>
</div>
@cfinster
cfinster / Sublime preferences
Created January 23, 2014 22:45
{
"draw_white_space": "all",
"enable_tab_scrolling": false,
"folder_exclude_patterns": [".svn", ".git", ".hg", "CVS", "grunt/node_modules"],
"font_size": 14,
"ignored_packages":
[
"Vintage"
],
"open_files_in_new_window": false,
@cfinster
cfinster / srcset for img
Created June 4, 2014 01:25
srcset for img
<img sizes="100vw, (min-width: 40em) 80vw"
srcset="../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w" alt="Obama with soldiers">
@cfinster
cfinster / Paral-&-Lax.markdown
Created August 19, 2014 22:06
A Pen by Charles F..
@cfinster
cfinster / URL as a Sass Variable
Created August 20, 2014 17:06
$get-path-to-assets : "http://web-design-weekly/images";
body {
background: url(#{$get-path-to-assets}/classy_fabric.png) repeat-x fixed 0 0;
}
@cfinster
cfinster / Converts pixels to EMs with Sass
Last active August 29, 2015 14:05
Converts pixels to EMs with Sass
February 26, 2013 — Jake Bresnehan
If you like using pixel values but understand that having your fonts set in EMs works better, especially when tackling responsive web design then this little Sass function will become super handy.
This function automatically converts pixels to EMs with Sass so that you don’t have to manually calculate them.
The function takes two arguments, pixels and context. You can either use the default context and specify only the pixels you want to convert — or you can specify pixels and a custom context for the conversion.:::
@cfinster
cfinster / show width of window
Created August 20, 2014 17:11
This is bit better piece, becaus when page loads you already see the width:
$( document ).ready(function() {
$(‘.screen-width’).text($(window).width() + ‘px’);
});
$(window).resize(function() {
var windowWidth = $(window).width();
$(‘.screen-width’).text(windowWidth + ‘px’);
});