Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/zedix/frontend-resources

Front-end curated resources and tools
https://github.com/zedix/frontend-resources

Last synced: 25 days ago
JSON representation

Front-end curated resources and tools

Awesome Lists containing this project

README 

        
Frontend Tools & Resources

==========================



> A list of selected front-end resources, articles and tools by [zedix](https://twitter.com/zedix).



Originally inspired by the [Landscaping With Front-end Tools](https://github.com/codylindley/frontend-tools) by [codylindley](https://github.com/codylindley).



---



## Web Platform



* [Move the Web Forward](http://movethewebforward.org/)

* [Extensible Web Manifesto](http://extensiblewebmanifesto.org/)

* [Browser technologies](http://platform.html5.org/) The Web platform: Browser technologies

* [Google's curated resource for building modern websites](https://developers.google.com/web/fundamentals/)

* [Specifiction](http://specifiction.org/) Conversations about Web standards 



#### Latest news and resources



* [Chrome Status](http://www.chromestatus.com/) Tracking HTML5 feature implementations for Chrome

* [IE status](http://status.modern.ie/) What’s available or what’s coming in Internet Explorer

* [Peter Beverloo](http://peter.sh/) WebKit changes

* [SidebarIO](http://sidebar.io/) Curated 5 best design links, every day (★)

* [Collective News](http://tympanus.net/codrops/collective/) Weekly resources curated by [Codrops](http://tympanus.net/codrops/) (★)

* [Pixels & code](http://www.inpixelitrust.fr/blog/en/useful-links/) Weekly resources curated by [walterstephanie](https://twitter.com/walterstephanie)

* [Web Platform Daily](http://webplatformdaily.org/) Open Web Platform Daily Digest (★)

* [HTML5 Bookmarks](http://www.html5bookmarks.com/) Daily news articles and bookmarks

* [Reddit Web Design](http://www.reddit.com/r/web_design/)

* [Curated resources for everything creative](http://oozled.com/resources/latest)



#### Weekly newsletters



* [HTML5 Weekly](http://html5weekly.com/)

* [Web Design Weekly](http://web-design-weekly.com/)

* [Responsive Design Weekly](http://responsivedesignweekly.com/)

* [JavaScript Weekly](http://javascriptweekly.com/)

* [CSS Weekly](http://css-weekly.com/)

* [Web Tools Weekly](http://webtoolsweekly.com/)



#### Web Application Frameworks



* [Web Application Frameworks](https://github.com/showcases/web-application-frameworks?s=stars)



#### Web Components



* [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/)

* [Web Components Resources](http://ebidel.github.io/webcomponents/) by Eric Bidelman

* [HTML5 Rocks](https://www.google.com/#fp=501e3a7c68104311&q=(site%3Ahtml5rocks.com+inurl%3Awebcomponents)+OR+(site%3Aupdates.html5rocks.com+webcomponents))

* [Polymer JS](http://polymer-project.org/) Set of polyfills

* [X-Tags](http://www.x-tags.org/)

* [Mozilla Brick](http://mozilla.github.io/brick/) UI Components for Modern Web Apps

* [CustomElements.io](http://customelements.io/) Web Components Gallery

* [Building Next Generation Widgets with Web Components](http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components)



#### HTML5 Boilerplate



* [Google Web Starter Kit](https://developers.google.com/web/starter-kit/) The ultimate boilerplate for responsive websites and multi-device experiences with a visual design system for documenting site components and many other features.

* [HTML5 Boilerplate](http://html5boilerplate.com/) (★)

* [HTML5 Bones](http://html5bones.com/)

* [FireShell](http://getfireshell.com/) Front-end boilerplate and workflows, HTML5, Grunt, Sass

* [dCodes Shortcodes](http://www.dcodes.net/2/docs/index.html)

* [Meteor](http://www.meteor.com/)



---



## CSS



* [z-index](http://philipwalton.com/articles/what-no-one-told-you-about-z-index/)

* [Justified and Vertically Centered Header Elements](http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements)



#### CSS Frameworks ([comparison](http://usablica.github.io/front-end-frameworks/compare.html))



* [Bootstrap](http://twitter.github.com/bootstrap/) Set of minimal, responsive CSS modules by Twitter

* [Pure](http://purecss.io/) Set of minimal, responsive CSS modules by Yahoo (05/2013)

* [Topcoat](http://topcoat.io/) Open source CSS library by Adobe (06/2013) [Guidelines](https://github.com/topcoat/topcoat/wiki/Coding-Guidelines#4-selectors)

* [Foundation](http://foundation.zurb.com/) Responsive front-end framework

* [UIkit](http://www.getuikit.com/)

* [Init](http://use-init.com/)

* [Effeckt.css](http://h5bp.github.io/Effeckt.css/dist/) UI-less, performant transitions & animations

* [Inuit](http://inuitcss.com/) Sass-based, BEM, OOCSS framework.

* [TypePlate](http://typeplate.com/) Sass-based typographic kit



#### CSS Scalability and Modularity



* [OOCSS (Object-Oriented CSS)](https://github.com/stubbornella/oocss/wiki)

    1. Separate structure and skin.

    2. Separate container and content.

    -> A class defined by itself is later redefined as a child of something else.

* [SMACSS (Scalable and Modular Architecture for CSS)](http://smacss.com/)

* [DRY CSS](http://vimeo.com/38063798)

    1. Keep style separate from content

    2. Avoid specificity by harnessing the cascade

* [BEM (Block, Element, Modifier)](http://bem.info/) [topcoat.io example](http://topcoat.io/topcoat/#radio-button)

* [MCSS (Multilayer CSS)](http://operatino.github.io/MCSS/en/) [Multilayer CSS](http://operatino.github.io/MCSS/examples/layers/) organization methodology (based on BEM/OOCSS principles)

* [ACSS (Atomic CSS)](http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/) My Yahoo [Blog post](http://engineering.appfolio.com/2012/11/16/css-architecture/) "Style things without always having to write more CSS rules"

* [AMCSS](http://glenmaddern.com/articles/introducing-am-css) Attribute Modules for CSS

* [Organic CSS](https://github.com/krasimir/organic-css)

* [CSS Guidelines](http://cssguidelin.es/) High-level advice and guidelines for writing sane, manageable, scalable CSS

* [A Scalable CSS Reading List](https://github.com/davidtheclark/scalable-css-reading-list)



#### CSS Processors



* [Myth](http://www.myth.io/) A postprocessor that polyfills CSS.



#### CSS Tools



* [Critical Path CSS Generator](http://jonassebastianohlsson.com/criticalpathcssgenerator/)

* [StyleStats](http://www.stylestats.org) CSS Statistics

* [UIGradient](http://uigradients.com/) Beautiful colour gradients



---



#### CSS Guidelines



* [CSS Guidelines, high-level guidelines for writing manageable, maintainable CSS](https://github.com/csswizardry/CSS-Guidelines)

* [Maintainable CSS with BEM](http://integralist.co.uk/Maintainable-CSS-with-BEM.html)

* [Scalable And Maintainable CSS](http://www.vanseodesign.com/css/scalable-maintainable/)

* [Front-end and UI style guides](http://sideproject.io/front-end-and-ui-style-guides/)

* [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Section_Comments)

* [Principles of writing consistent, idiomatic CSS](https://github.com/necolas/idiomatic-css)

* [@mdo’s CSS code guide](http://mdo.github.io/code-guide/) By the creator of Bootstrap



---



#### CSS Flexbox



* [Flexbox CSS Reference](http://ptb2.me/flexbox/)

* [W3C Spec Changes](http://dev.w3.org/csswg/css-flexbox/#changes)

* [Flexbox Please!](http://demo.agektmr.com/flexbox/) Flexbox playground

* [Flexy boxes](http://the-echoplex.net/flexyboxes/) Flexbox playground and code generator

* [A thorough presentation on Flexbox](http://zomigi.com/blog/flexbox-presentation/)

* [Solved by Flexbox](http://philipwalton.github.io/solved-by-flexbox/) Showcase of what flexbox can solve on the web



## JavaScript



##### Performance



* [The 4 JavaScript Load Times](http://fr.slideshare.net/nzakas/enough-withthejavascriptalready)



#####Coding Standards



* [JavaScript Style Guide In the Wild](https://github.com/airbnb/javascript#in-the-wild)



#####Documentation generators ([comparison](http://blog.fusioncharts.com/2013/12/jsdoc-vs-yuidoc-vs-doxx-vs-docco-choosing-a-javascript-documentation-generator/))



* [JSDoc](https://github.com/jsdoc3/jsdoc)

* [Docco](http://jashkenas.github.io/docco/)

* [Doxx](https://github.com/FGRibreau/doxx)

* [YUIDoc](http://yui.github.io/yuidoc/)



---



##### Librairies



* [Micro frameworks](http://microjs.com/)

* [Ractive.js](http://www.ractivejs.org/)

* [Component.io](http://component.io/) [Component module list](https://github.com/component/component/wiki/Components)



---



## UX & UI



* [A Good User Interface](http://www.goodui.org) Shared ideas by Jakub Linowski (★)

* [UI Patterns](http://ui-patterns.com/patterns) UI Design Pattern library (★)

* [UX Movement](http://uxmovement.com/)

* [UX Myths](http://uxmyths.com/)

* [UI Engineering](http://www.uie.com/articles/)

* [Boxes and Arrows](http://boxesandarrows.com/)

* [WebDesign Practises](http://webdesignpractices.com/)

* [Should I use a carousel?](http://shouldiuseacarousel.com) - [Carousel Interaction Stats](http://weedygarden.net/2013/07/carousel-interaction-stats/)

* [Float Label Pattern](http://bradfrostweb.com/blog/post/float-label-pattern/)



---



#### Responsive Design (RWD)



* [Responsive Design Knowledge Hub](http://www.ugurus.com/responsive-design) (★)

* [This is responsive](http://bradfrost.github.io/this-is-responsive/) Patterns, resources and news for creating responsive web experiences (★)

* [RWD resources](https://gist.github.com/stowball/6577178) Articles and resources on responsive design approaches and workflows

* [Future-Friendly Thinking](http://futurefriend.ly/thinking.html)

* [Responsive Images Community Group](http://responsiveimages.org/)

* [Responsive Navigation Patterns](http://responsivenavigation.net/)

* [Responsive Embed (iframe)](http://embedresponsively.com/)

* [The State Of Responsive Design](http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/) 

* [A proof-of-concept for a Flexbox-driven responsive layout](http://codepen.io/indyplanets/pen/LFocp)

* [The responsive typography framework behind Words App](http://starburst1977.github.io/out-of-words/)

* [RESS: Responsive Design + Server Side Components](http://www.lukew.com/ff/entry.asp?1392)

* [srcset is “good enough”](https://docs.google.com/document/d/1xqqbd5u8Gudjs7Ubp3sBOIssbmtenY9t_te48or2_Ok/edit)

* [RESS: REsponsive Web design + Server Side components](http://ress.io/) [BBC: Cutting the mustard](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard)

* [Picture element polyfill](https://github.com/scottjehl/picturefill) 

* [Smashing Conf: Real Life Responsive Design](http://www.lukew.com/ff/entry.asp?1792)



#### Responsive Design (RWD) > Typography



* [Responsive Typography techniques](http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/)

* [Responsive Typography roundup](http://www.awwwards.com/responsive-typography-a-roundup-of-the-best-articles-and-tutorials.html)



---



## Web Design



#### Inspiration (UI)



* [Pattern Tap](http://patterntap.com/) UI pattern library

* [Links to Inspire](http://www.linkstoinspire.co.uk/) Links to inspire you all in one place

* [UI Animations](http://ui-animations.tumblr.com/)

* [Daily Dose of Inspiring 6sec Transitions and Animations Saved for Reference](http://sixux.com/)

* [Mobile App transitions](http://capptivate.co)

* [Type Hunting](http://typehunting.com/)

* [App designs and icons made for iOS 7](http://madeforios7.tumblr.com/)

* [Capptivate: iOS UI Animations](http://capptivate.co/)



---



#### WebDesign Tools



* [Google Web Designer](http://www.google.com/webdesigner/) (★)

* [Macaw](http://macaw.co/peek/) The code-savvy Web Design Tool

* [WebFlow](http://www.webflow.com/) Responsive Web Design Tool

* [Typecast](http://typecast.com/) Typography-first Web Design Tool

* [Optimizely](https://www.optimizely.com/) A/B testing



---



#### ebDesign Reviews



* [Red Pen](http://redpen.io/) Effing fast feedback

* [InVison](http://www.invisionapp.com/)



---



## Tools & Generators



#### Color & Schemes



* [Online Style Guide Generator](http://stylifyme.com/)

* [Color Hexa](http://www.colorhexa.com/) Information and conversion



#### Generators



* [CSP Is Awesome](http://cspisawesome.com/) Generate a Content-Security-Policy header



#### References & Cheat sheets



* [Favicon cheatsheet](https://github.com/audreyr/favicon-cheat-sheet) A painfully obsessive cheat sheet to favicon sizes/types (★)

* [Mobile + Tablet Device Dimensions](http://stefhatcher.com/projects/device-dimensions/)

* [iOS Design Cheat Sheet](http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/)

* [iOS 7 Design Resources](https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289) Official guidelines all in one place 

* [HTML5 compatibility on mobile](http://mobilehtml5.org/)

* [DevDocs](http://devdocs.io/)

* [JavaScript Keycodes](http://keycodes.atjayjo.com/)

* [Master of the :nth-child](http://nthmaster.com/)

* [Git cheatsheet](http://www.ndpsoftware.com/git-cheatsheet.html)



#### Mobile



* [A tale of two viewports](http://www.quirksmode.org/mobile/viewports.html)

* [SpeedLimit](http://mschrag.github.io/), [SlowyApp](http://slowyapp.com/) Throttle a fast internet down (mac app)

* [CSS critical path snippet](http://paul.kinlan.me/detecting-critical-above-the-fold-css/)



#### Images

* [Tiny PNG](http://tinypng.org/) Shrink PNG files

* [Compress PNG](http://compresspng.com/)

* [Picture Slash!](http://pictureslash.com)

* [Tools for image optimization](http://addyosmani.com/blog/image-optimization-tools/)

* [Favicon generator](http://favicon.il.ly/) A really simple favicon generator (with mobile favicons)



#### Resources



* [Thestocks.im](http://thestocks.im/) The best royalty free

stock photos in one place

* [Pexels](http://www.pexels.com/) Best Free Photos In One Place



#### Others



* [Meet the Ipsums](http://meettheipsums.com) Plenty of Lorem Ipsums (still, use real content when you prototype)

* [Gridzzly](http://gridzzly.com/) Paper grid to print generator



#### Fonts & Typography



* [Typographisme](http://typographisme.net/)

* [Typo Guide](http://www.typogui.de/) Interesting Links & Resources

* [Font generator](http://prototypo.io/)

* [Born Typeface](http://www.carlosdetoro.com/born-en/) A beautiful Humanist Serif free Typeface

* [Adobe Blank Typeface](https://github.com/adobe/brackets-edge-web-fonts/blob/master/styles/adobe-blank.css) [Two clever usage](http://scottkellum.com/2013/10/25/the-new-kellum-method.html)

* [Norwester](http://jamiewilson.io/norwester/) A condensed geometric sans serif free Typeface

* [Grux](http://wegraphics.net/downloads/grux-hand-written-web-font/) A free Hand Written Web Font

* [Redacted font](https://github.com/christiannaths/Redacted-Font) Keep your wireframes free of distracting Lorem Ipsum



#### Colors



* [Color Scheme Designer](http://colorschemedesigner.com/)

* [Color Template](http://www.rocket-design.fr/color-template/)

* [Kuler](http://kuler.adobe.com/)



## Testing



* [Sauce Labs](https://saucelabs.com/)



#### Automation & workflow



* [Automating front-end workflow](https://speakerdeck.com/addyosmani/automating-front-end-workflow)