Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sparkbox/build-responsively-workshop


https://github.com/sparkbox/build-responsively-workshop

Last synced: 2 days ago
JSON representation

Awesome Lists containing this project

README 

        
# Build Responsively Workshop

## [Ben Callahan](http://twitter.com/bencallahan), [Sparkbox](http://seesparkbox.com)



The files in this repo are example exercises used in the Build Responsively Workshop series. Following is a list of resources for learning more about responsive web design.



### Resources

* [Example files](https://github.com/sparkbox/Build-Responsively-Workshop)

* [Responsive Web Design, original article by Ethan Marcotte](http://www.alistapart.com/articles/responsive-web-design/)

* [Responsive Web Design, book by Ethan Marcotte](http://www.abookapart.com/products/responsive-web-design)

* [Adaptive Web Design, book by Aaron Gustafson](http://easy-readers.net/books/adaptive-web-design/)

* [Head First Mobile Web, book by Jason Grigsby and Lyza Danger Gardner](http://www.amazon.com/Head-First-Mobile-Brain-Friendly-Guides/dp/1449302661)

* [The Semantic Grid System](https://github.com/tylertate/semantic.gs)

* [LESS CSS](http://lesscss.org/)

* [SCSS/SASS CSS](sass-lang.com)

* [Fluid Grids, by Ethan Marcotte](http://www.alistapart.com/articles/fluidgrids/)

* [A Bacon Poem](http://ligzpoems.blogspot.com/2007/12/bacon-poem.html)

* [Fluid Width Video, by Chris Coyer](http://www.netmagazine.com/tutorials/create-fluid-width-videos)

* [CSS3 Media Queries Spec](http://www.w3.org/TR/css3-mediaqueries/)

* [Media Query Bookmarklet, by Rob Tarr](https://github.com/sparkbox/mediaQueryBookmarklet)

* [Responsive Images Round-Up, by Jason Grigsby](http://www.cloudfour.com/responsive-imgs/)

* [The Boston Globe](http://www.bostonglobe.com)

* [Build Responsively](http://buildresponsively.com)

* [Responsive Advertising, by Mark Boulton](http://www.markboulton.co.uk/journal/comments/responsive-advertising)

* [Table to Chart, by Scott Jehl](http://jsbin.com/emexa4)

* [Responsive Menu](https://github.com/mattkersley/Responsive-Menu)

* [The Foundry](http://seesparkbox.com/foundry)

* [Future Friendly](http://futurefriend.ly)

* [Media Queries Gallery](http://mediaqueri.es)

* [Responsive Images, by Filament Group](https://github.com/filamentgroup/Responsive-Images)

* [Image Sizer, by Ethan Marcotte](http://unstoppablerobotninja.com/demos/resize/imgSizer.js)

* [iOS Orientation Change Fix](https://github.com/scottjehl/iOS-Orientationchange-Fix)

* [Hide Address Bar](https://github.com/scottjehl/Hide-Address-Bar)

* [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement)



### Emerging Patterns



#### Navigation

* [Top Nav](http://riothq.com)

* [Bottom Nav](http://contentsmagazine.com)

* [Slide Down Nav](http://2012.dconstruct.org)

* [Select Box Nav](http://fortysevenmedia.com)

* [Menu Icon Nav](http://twitter.github.com/bootstrap)

* [Multi-level](http://msj.edu)



#### Tables

* [Show the first column](http://www.zurb.com/playground/playground/responsive-tables/index.html)

* [Turn the rows into blocks](http://css-tricks.com/examples/ResponsiveTables/responsive.php)

* [Just hide some of it](http://elvery.net/demo/responsive-tables)

* [Selective Display](http://filamentgroup.com/examples/rwd-table-patterns)



#### Images

* [Picturefill](http://scottjehl.github.com/picturefill)

* [Sencha.io](http://www.sencha.com/learn/how-to-use-src-sencha-io/)

* [Adaptive Images](http://adaptive-images.com)



### Responsive JavaScript

* [Modernizr](http://www.modernizr.com/)

* [jQuery](http://jquery.com)

* [Unobtrusive Js Execution](http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/)

* [Aggressive-Enhancement](http://globalmoxie.com/blog/making-of-people-mobile.shtml)

* [AJAX Includes Modular Content](http://filamentgroup.com/lab/ajax_includes_modular_content)

* [AJAX Include Pattern](https://github.com/filamentgroup/Ajax-Include-Pattern/)

* [QuickConcat](https://github.com/filamentgroup/quickconcat)

* [Conditional Loading for Responsive Designs](http://24ways.org/2011/conditional-loading-for-responsive-designs)

* [eCSSential](http://github.com/scottjehl/eCSSential)



* [Fixed-Fixed](http://scottjehl.github.com/fixed-fixed)

* [Fixed-Fixed Bugs](http://github.com/scottjehl/Device-Bugs/issues/1)

* [iOS Orientation Change](https://github.com/scottjehl/iOS-Orientationchange-Fix)

* [Respond.js](http://scottjehl.github.com/respond)

* [MatchMedia.js](http://github.com/paulirish/matchMedia.js)

* [mediaCheck](https://github.com/sparkbox/mediaCheck)



#### Typography

* [FitText](http://fittextjs.com)

* [SlabText](http://www.frequency-decoder.com/demo/slabText)

* [Lettering.js](http://letteringjs.com/)

* [KernJS](http://www.kernjs.com/)



#### Touch

* [Hammer](http://eightmedia.github.com/hammer.js/)

* [Touchy](https://github.com/jairajs89/Touchy.js)

* [Touch Scroll](http://static.uxebu.com/~david/touchscroll/)



#### Sliders

* [SwipeJS](http://swipejs.com/)

* [FlexSlider](http://flexslider.woothemes.com/)

* [Blueberry](http://marktyrrell.com/labs/blueberry/)



### Apps

* [Codekit](http://incident57.com/codekit/)

* [Scout](http://mhs.github.com/scout-app/)

* [Adobe Shadow](http://labs.adobe.com/technologies/shadow/)



### Some People to Follow

* [@beep](http://twitter.com/beep)

* [@scottjehl](http://twitter.com/scottjehl)

* [@grigs](http://twitter.com/grigs)

* [@adactio](http://twitter.com/adactio)

* [@yoavweiss](http://twitter.com/yoavweiss)

* [@robertnyman](http://twitter.com/robertnyman)

* [@necolas](http://twitter.com/necolas)

* [@yiibu](http://twitter.com/yiibu)

* [@globalmoxie](http://twitter.com/globalmoxie)

* [@brad_frost](http://twitter.com/brad_frost)

* [@bencallahan](http://twitter.com/bencallahan)



### Thanks

The [@hearsparkbox](http://twitter.com/hearsparkbox) crew would like to thank our fantastic clients for trusting us to learn this stuff with them. And I (Ben) would like to thank my team at Sparkbox for busting their butts to get all of this together. You guys rock.