Resources for learning web design & front-end development:
ONLINE
Design
Jeff Adams tinyfly
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
| // geo-location shim | |
| // currentely only serves lat/long | |
| // depends on jQuery | |
| // doublecheck the ClientLocation results because it may returning null results | |
| ;(function(geolocation){ | |
| if (geolocation) return; |
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
| // Paste into Firebug or Chrome Dev Tools console | |
| // when viewing a page with multiple checkboxes. | |
| (function(d) { | |
| var input = d.querySelectorAll('input[type="checkbox"]'); | |
| var i = input.length; | |
| while (i--) { | |
| input[i].checked = true; | |
| } |
nathansmith
/ web-design-development-learning-resources.md
Last active
December 7, 2025 13:37
Resources for learning web design & front-end development
lensco
/ responsive.html
Created
January 26, 2012 21:11
Simple responsive design test page. More info here: http://bricss.net/post/16538278376/simple-responsive-design-test-page
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Responsive Design Testing</title> | |
| <style> | |
| body { margin: 20px; font-family: sans-serif; overflow-x: scroll; } | |
| .wrapper { width: 6000px; } | |
| .frame { float: left; } | |
| h2 { margin: 0 0 5px 0; } |
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
| $('a.reveal').click(function(event) { | |
| event.preventDefault(); | |
| var $div = $('<div>').addClass('reveal-modal').appendTo('body'), | |
| $this = $(this); | |
| $.get($this.attr('href'), function(data) { | |
| return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal(); | |
| }); | |
| }); |
geuis
/ remote-typeahead.js
Created
February 16, 2012 22:58
Remote data querying for Twitter Bootstrap 2.0 Typeahead without modifications
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
| <script> | |
| // Charles Lawrence - Feb 16, 2012. Free to use and modify. Please attribute back to @geuis if you find this useful | |
| // Twitter Bootstrap Typeahead doesn't support remote data querying. This is an expected feature in the future. In the meantime, others have submitted patches to the core bootstrap component that allow it. | |
| // The following will allow remote autocompletes *without* modifying any officially released core code. | |
| // If others find ways to improve this, please share. | |
| var autocomplete = $('#searchinput').typeahead() | |
| .on('keyup', function(ev){ | |
| ev.stopPropagation(); |
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
| /* | |
| * Grid Overlay for Twitter Bootstrap | |
| * Assumes a 1.692em baseline grid (22px/13px) | |
| */ | |
| @media (min-width: 1200px) { | |
| body { | |
| background: -webkit-gradient(linear, top left, bottom left, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0.05)), color-stop(4.545%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0.05)), color-stop(36%, rgba(0, 0, 0, 0.05)), color-stop(36%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0.05)), color-stop(66%, rgba(0, 0, 0, 0.05)), color-stop(66%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, top left, top right, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(0.085%, rgba(0, 0, 0, 0.1)), color-stop(0.085%, rgba(0, 0, 0, 0))); | |
| background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba( |
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
| /* Sample usage: +caret(bottom, 8px, #000); */ | |
| =caret($side, $size, $color) | |
| $opposite: opposite-position($side) | |
| +stretch(50%,auto,auto,50%) | |
| border: $size solid transparent | |
| border-#{$opposite}: $size solid $color | |
| border-#{$side}: 0 | |
| content: '' | |
| display: block |
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
| { | |
| "USD": { | |
| "symbol": "$", | |
| "name": "US Dollar", | |
| "symbol_native": "$", | |
| "decimal_digits": 2, | |
| "rounding": 0, | |
| "code": "USD", | |
| "name_plural": "US dollars" | |
| }, |
foxweb
/ website.rake
Created
August 17, 2012 13:39
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
| require 'sprockets' | |
| require 'uglifier' | |
| require 'logger' | |
| namespace :website do | |
| desc "remove files in output directory" | |
| task :clean do | |
| puts "Removing output..." | |
| Dir["html/*"].each { |f| rm_rf(f) } |
OlderNewer