# Articles, Styletiles & Styleguide

* Why we skip Photoshop by Jason Fried of 37signals - http://37signals.com/svn/posts/1061-why-we-skip-photoshop
* Style Tiles - http://styletil.es/
* Gimme Bar : Front end styleguides and pattern libraries - https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
* ウェブデザイナーのための便利すぎるツール＆リソース20選【最新版】 - http://www.seojapan.com/blog/20-web-design-resources

# Frameworks

* CSS Front-end Frameworks with comparison - By usabli.ca - http://usablica.github.io/front-end-frameworks/compare.html?v=2.0
* Bootstrap - http://twitter.github.io/bootstrap/
* Foundation: The Most Advanced Responsive Front-end Framework from ZURB - http://foundation.zurb.com/
* Topcoat - http://topcoat.io/
* Preboot - http://getpreboot.com/
* Pure - http://purecss.io/
* Kraken - A lightweight front-end boilerplate - http://cferdinandi.github.io/kraken/

## Dev Information Resources

* Hacker News - https://news.ycombinator.com/
* Designer News - https://news.layervault.com/
* Hey, designer! - http://heydesigner.com/
* Echo JS - JavaScript News - http://www.echojs.com/
* UX News Feed - http://www.uxnewsfeed.com/
* Inbound Marketing Community - http://inbound.org/
* Tuts+ - http://hub.tutsplus.com/
* Smashing Magazine - http://www.smashingmagazine.com/
* .net magazine - http://www.netmagazine.com/

## GUI Tools

* CodeKit — THE Mac App For Web Developers - http://incident57.com/codekit/
* LiveReload - http://livereload.com/
* Koala - a cool tool for web developer - http://koala-app.com/
* Hammer for Mac - Available Now - http://hammerformac.com/
* Mixture - A rapid prototyping and static site generation tool for designers and developers - http://mixture.io/

## Command Line Tools

* node.js - http://nodejs.org/
* BOWER: A package manager for the web - http://twitter.github.io/bower/
* Bower components - http://sindresorhus.com/bower-components/
* Grunt: The JavaScript Task Runner - http://gruntjs.com/
* Yeoman - Modern workflows for modern webapps - http://yeoman.io/

## Static Site Generators

* Static Site Generators - https://gist.github.com/davatron5000/2254924
* Punch - A Fun and Easy Way to Build Modern Websites - http://laktek.github.io/punch/
* roots | where it all begins - http://roots.cx/
* DocPad - Streamlined Web Development - http://docpad.org/
* Jekyll • Simple, blog-aware, static sites - http://jekyllrb.com/

## Bootstrap

* Bootstrap - http://twitter.github.io/bootstrap/
* Bootstrap 3 - http://rc.getbootstrap.com/
* 35+ Twitter Bootstrap Tutorials, Tools and Resources - Themecrunch.com - http://themecrunch.com/2013/04/twitter-bootstrap-tutorials-tools-and-resources/
* Themes for Twitter Bootstrap - WrapBootstrap - https://wrapbootstrap.com/
* Bootswatch: Free themes for Twitter Bootstrap - http://bootswatch.com/
* Built With Bootstrap :: Awesome Sites and Apps Built on Twitter Bootstrap - http://builtwithbootstrap.com/
* Font Awesome, the iconic font designed for Bootstrap - http://fortawesome.github.io/Font-Awesome/?r=hn&v=3.1.0

## Web Fonts

* Elusive Icon Fonts - aristath/elusive-iconfont · GitHub - https://github.com/aristath/elusive-iconfont
* Font Awesome, the iconic font designed for use with Twitter Bootstrap - http://fortawesome.github.io/Font-Awesome/
* Entypo - 250+ carefully crafted pictograms - http://www.entypo.com/

## Dummy Images

* lorempixel - placeholder images for every case - http://lorempixel.com/
* PlaceIMG | Easy FPO and Dummy Images for Any Project - http://placeimg.com/

## Retina Images

* [Rriver » いまさら聞けないRetina対応のための「ピクセル」の話](http://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays)

## Template Engines

* Jade - Template Engine - http://jade-lang.com/
* Haml - http://haml.info/
* EJS - JavaScript Templates - http://embeddedjs.com/
* SIML - https://github.com/padolsey/SIML
* Slim - A Fast, Lightweight Template Engine for Ruby - http://slim-lang.com/
* {{ mustache }} - http://mustache.github.io/
* Handlebars.js: Minimal Templating on Steroids - http://handlebarsjs.com/

## CSS Preprocessors

* LESS « The Dynamic Stylesheet language - http://lesscss.org/
* Sass - Syntactically Awesome Stylesheets - http://sass-lang.com/
* Stylus - http://learnboost.github.io/stylus/
* Roole - http://roole.org/

## CSS Preprocessors mixins

* LESSHat. A supersonic bunch of smart LESS mixins - http://lesshat.com/
* Bourbon - A Sass Mixin Library - http://bourbon.io/
* Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy - http://jaredhardy.com/sassy-buttons/
* Susy: Responsive grids for Compass - http://susy.oddbird.net/
* Handy Sass Mixins - Web Design Weekly - http://web-design-weekly.com/2013/05/12/handy-sass-mixins/

## Style Guides

* StyleDocco - http://jacobrask.github.io/styledocco/
* KSS · Knyle Style Sheets - http://warpspire.com/kss/
* KSS: Living Styleguide - http://hughsk.github.io/kss-node/
* Kalei Styleguide - CSS Living Style guide - http://kaleistyleguide.com/

## Graphic Editors

* Sketch | The designer’s toolbox - http://www.bohemiancoding.com/sketch/
* CSS Hat – Turn Photoshop Layer Styles to CSS3. Instantly. - http://csshat.com/
* PNG EXPRESS | Automated Design Delivery for Photoshop - http://www.pngexpress.com/
* WebZap - Photoshop panel plugin for web developers - http://webzap.uiparade.com/
* Retinize It - Photoshop actions for slicing retina graphics - http://retinize.it/
* Acorn 4, a great Mac OS X image editor, built for humans. - http://www.flyingmeat.com/acorn/

## Apps for Designing in the Browser

* Online Website Design Software for Graphic Designers | Webydo.com - http://www.webydo.com/
* FROONT - Responsive web design, the visual way - http://froont.com/
* Ratchet - http://maker.github.io/ratchet/

## Mobile Dev Apps

* Briefs - http://giveabrief.com/
* Ikonica - http://ikonica.me/
* Skala, a Mac app by Bjango - http://bjango.com/mac/skala/

## Mobile Dev Articles

* The iOS Design Cheat Sheet Volume 2 - http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/
* ついにCSSだけでネイティブアプリUI開発が可能な時代がくるか, ネイティブiPhoneアプリUIをCSSで作れるPixateを試してみた - Lebe Inc. Blog - http://blog.lebe.jp/post/50056713529/iphone-app-ui-css-pixate

## Responsive Web Design

* A Responsive HTML CSS LESS SCSS Framework | Responsable Framework - http://responsablecss.com/
* レスポンシブなWebサイト制作に役立つ表示確認用便利ツールまとめ8つ - W3Q - http://w3q.jp/t/3882

---

## @gaspanik Stuff

* Sketch Wireframe Template - https://dl.dropboxusercontent.com/u/7642258/ResponsiveWireframe_sketch.zip
* ST2: Sublime Text 2 Packages for Web Developers. - https://gist.github.com/gaspanik/4048934
* ST2: Hayaku ja - https://gist.github.com/gaspanik/4135513
* LoremPixel.com Placeholder Image Snippet - https://gist.github.com/gaspanik/3990921
* gaspanik/bootstrapunch · GitHub - https://github.com/gaspanik/bootstrapunch
* gaspanik/bootstrapunch3 · GitHub - https://github.com/gaspanik/bootstrapunch3

## @konitter Stuff

* konitter/rootsstrap · GitHub - https://github.com/konitter/rootsstrap
* konitter/rootsfoundation · GitHub - https://github.com/konitter/rootsfoundation