This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
/* | |
Gulpfile.js file for the tutorial: | |
Using Gulp, SASS and Browser-Sync for your front end web development - DESIGNfromWITHIN | |
http://designfromwithin.com/blog/gulp-sass-browser-sync-front-end-dev | |
Steps: | |
1. Install gulp globally: | |
npm install --global gulp |
When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.
Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008
…………………………
<article class="my-element"> | |
<h1>Article Title</h1> | |
<p>Teaser text lorem ipsum.</p> | |
<a href="full-article.html">Read More</a> | |
</article> |
/** | |
* I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss | |
* | |
* Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property. | |
* - Updated retina media query to be more reliable () | |
* Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html | |
* Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy | |
* Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up | |
* Update: 2012-12-29 - U |
input { | |
height: 34px; | |
width: 100%; | |
border-radius: 3px; | |
border: 1px solid transparent; | |
border-top: none; | |
border-bottom: 1px solid #DDD; | |
box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF; | |
} |
html, body, .container, .content { | |
height: 100%; | |
} | |
.container, .content { | |
position: relative; | |
} | |
.proper-content { | |
padding-top: 40px; /* >= navbar height */ |