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:
DESIGNfromWITHIN
/ Gulpfile.js
Last active
March 4, 2021 21:00
Gulpfile.js example Uses browser-sync, node-neat, gulp and gulp-sass
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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 |
dergachev
/ GIF-Screencast-OSX.md
Last active
October 31, 2025 16:45
OS X Screencast to animated GIF
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <article class="my-element"> | |
| <h1>Article Title</h1> | |
| <p>Teaser text lorem ipsum.</p> | |
| <a href="full-article.html">Read More</a> | |
| </article> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
mokagio
/ sticky.css
Created
February 26, 2012 20:53
Twitter Bootstrap + Sticky Footer + Fixed Nav Bar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body, .container, .content { | |
| height: 100%; | |
| } | |
| .container, .content { | |
| position: relative; | |
| } | |
| .proper-content { | |
| padding-top: 40px; /* >= navbar height */ |