frontend-resources

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #llm #go #golang #deep-learning #linux #java #cli #awesome-list #pytorch #security

frontend-resources

(★ 22)

Front-end curated resources and tools

frontend-resources Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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)

frontend-resources

frontend-resources Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

frontend-resources

frontend-resources Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README