{"id":13516251,"url":"https://github.com/zedix/frontend-resources","last_synced_at":"2025-06-12T05:32:11.601Z","repository":{"id":10904947,"uuid":"13200902","full_name":"zedix/frontend-resources","owner":"zedix","description":"Front-end curated resources and tools","archived":false,"fork":false,"pushed_at":"2020-08-29T12:57:03.000Z","size":10,"stargazers_count":22,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T20:48:01.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zedix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-09-29T22:11:58.000Z","updated_at":"2025-02-10T23:59:03.000Z","dependencies_parsed_at":"2022-08-29T19:31:45.438Z","dependency_job_id":null,"html_url":"https://github.com/zedix/frontend-resources","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zedix/frontend-resources","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zedix%2Ffrontend-resources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zedix%2Ffrontend-resources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zedix%2Ffrontend-resources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zedix%2Ffrontend-resources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zedix","download_url":"https://codeload.github.com/zedix/frontend-resources/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zedix%2Ffrontend-resources/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259404403,"owners_count":22852181,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:01:20.723Z","updated_at":"2025-06-12T05:32:11.564Z","avatar_url":"https://github.com/zedix.png","language":null,"readme":"Frontend Tools \u0026 Resources\n==========================\n\n\u003e A list of selected front-end resources, articles and tools by [zedix](https://twitter.com/zedix).\n\nOriginally inspired by the [Landscaping With Front-end Tools](https://github.com/codylindley/frontend-tools) by [codylindley](https://github.com/codylindley).\n\n---\n\n## Web Platform\n\n* [Move the Web Forward](http://movethewebforward.org/)\n* [Extensible Web Manifesto](http://extensiblewebmanifesto.org/)\n* [Browser technologies](http://platform.html5.org/) The Web platform: Browser technologies\n* [Google's curated resource for building modern websites](https://developers.google.com/web/fundamentals/)\n* [Specifiction](http://specifiction.org/) Conversations about Web standards \n\n#### Latest news and resources\n\n* [Chrome Status](http://www.chromestatus.com/) Tracking HTML5 feature implementations for Chrome\n* [IE status](http://status.modern.ie/) What’s available or what’s coming in Internet Explorer\n* [Peter Beverloo](http://peter.sh/) WebKit changes\n* [SidebarIO](http://sidebar.io/) Curated 5 best design links, every day (★)\n* [Collective News](http://tympanus.net/codrops/collective/) Weekly resources curated by [Codrops](http://tympanus.net/codrops/) (★)\n* [Pixels \u0026 code](http://www.inpixelitrust.fr/blog/en/useful-links/) Weekly resources curated by [walterstephanie](https://twitter.com/walterstephanie)\n* [Web Platform Daily](http://webplatformdaily.org/) Open Web Platform Daily Digest (★)\n* [HTML5 Bookmarks](http://www.html5bookmarks.com/) Daily news articles and bookmarks\n* [Reddit Web Design](http://www.reddit.com/r/web_design/)\n* [Curated resources for everything creative](http://oozled.com/resources/latest)\n\n#### Weekly newsletters\n\n* [HTML5 Weekly](http://html5weekly.com/)\n* [Web Design Weekly](http://web-design-weekly.com/)\n* [Responsive Design Weekly](http://responsivedesignweekly.com/)\n* [JavaScript Weekly](http://javascriptweekly.com/)\n* [CSS Weekly](http://css-weekly.com/)\n* [Web Tools Weekly](http://webtoolsweekly.com/)\n\n\n#### Web Application Frameworks\n\n* [Web Application Frameworks](https://github.com/showcases/web-application-frameworks?s=stars)\n\n\n#### Web Components\n\n* [Are We Componentized Yet?](http://jonrimmer.github.io/are-we-componentized-yet/)\n* [Web Components Resources](http://ebidel.github.io/webcomponents/) by Eric Bidelman\n* [HTML5 Rocks](https://www.google.com/#fp=501e3a7c68104311\u0026q=(site%3Ahtml5rocks.com+inurl%3Awebcomponents)+OR+(site%3Aupdates.html5rocks.com+webcomponents))\n* [Polymer JS](http://polymer-project.org/) Set of polyfills\n* [X-Tags](http://www.x-tags.org/)\n* [Mozilla Brick](http://mozilla.github.io/brick/) UI Components for Modern Web Apps\n* [CustomElements.io](http://customelements.io/) Web Components Gallery\n* [Building Next Generation Widgets with Web Components](http://tech.pro/tutorial/1421/building-next-generation-widgets-with-web-components)\n\n#### HTML5 Boilerplate\n\n* [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.\n* [HTML5 Boilerplate](http://html5boilerplate.com/) (★)\n* [HTML5 Bones](http://html5bones.com/)\n* [FireShell](http://getfireshell.com/) Front-end boilerplate and workflows, HTML5, Grunt, Sass\n* [dCodes Shortcodes](http://www.dcodes.net/2/docs/index.html)\n* [Meteor](http://www.meteor.com/)\n\n\n---\n\n## CSS\n\n* [z-index](http://philipwalton.com/articles/what-no-one-told-you-about-z-index/)\n* [Justified and Vertically Centered Header Elements](http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements)\n\n#### CSS Frameworks ([comparison](http://usablica.github.io/front-end-frameworks/compare.html))\n\n* [Bootstrap](http://twitter.github.com/bootstrap/) Set of minimal, responsive CSS modules by Twitter\n* [Pure](http://purecss.io/) Set of minimal, responsive CSS modules by Yahoo (05/2013)\n* [Topcoat](http://topcoat.io/) Open source CSS library by Adobe (06/2013) [Guidelines](https://github.com/topcoat/topcoat/wiki/Coding-Guidelines#4-selectors)\n* [Foundation](http://foundation.zurb.com/) Responsive front-end framework\n* [UIkit](http://www.getuikit.com/)\n* [Init](http://use-init.com/)\n* [Effeckt.css](http://h5bp.github.io/Effeckt.css/dist/) UI-less, performant transitions \u0026 animations\n* [Inuit](http://inuitcss.com/) Sass-based, BEM, OOCSS framework.\n* [TypePlate](http://typeplate.com/) Sass-based typographic kit\n\n\n#### CSS Scalability and Modularity\n\n* [OOCSS (Object-Oriented CSS)](https://github.com/stubbornella/oocss/wiki)\n    1. Separate structure and skin.\n    2. Separate container and content.\n    -\u003e A class defined by itself is later redefined as a child of something else.\n* [SMACSS (Scalable and Modular Architecture for CSS)](http://smacss.com/)\n* [DRY CSS](http://vimeo.com/38063798)\n    1. Keep style separate from content\n    2. Avoid specificity by harnessing the cascade\n* [BEM (Block, Element, Modifier)](http://bem.info/) [topcoat.io example](http://topcoat.io/topcoat/#radio-button)\n* [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)\n* [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\"\n* [AMCSS](http://glenmaddern.com/articles/introducing-am-css) Attribute Modules for CSS\n* [Organic CSS](https://github.com/krasimir/organic-css)\n* [CSS Guidelines](http://cssguidelin.es/) High-level advice and guidelines for writing sane, manageable, scalable CSS\n* [A Scalable CSS Reading List](https://github.com/davidtheclark/scalable-css-reading-list)\n\n\n#### CSS Processors\n\n* [Myth](http://www.myth.io/) A postprocessor that polyfills CSS.\n\n#### CSS Tools\n\n* [Critical Path CSS Generator](http://jonassebastianohlsson.com/criticalpathcssgenerator/)\n* [StyleStats](http://www.stylestats.org) CSS Statistics\n* [UIGradient](http://uigradients.com/) Beautiful colour gradients\n\n\n---\n\n#### CSS Guidelines\n\n* [CSS Guidelines, high-level guidelines for writing manageable, maintainable CSS](https://github.com/csswizardry/CSS-Guidelines)\n* [Maintainable CSS with BEM](http://integralist.co.uk/Maintainable-CSS-with-BEM.html)\n* [Scalable And Maintainable CSS](http://www.vanseodesign.com/css/scalable-maintainable/)\n* [Front-end and UI style guides](http://sideproject.io/front-end-and-ui-style-guides/)\n* [Google HTML/CSS Style Guide](http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Section_Comments)\n* [Principles of writing consistent, idiomatic CSS](https://github.com/necolas/idiomatic-css)\n* [@mdo’s CSS code guide](http://mdo.github.io/code-guide/) By the creator of Bootstrap\n\n---\n\n#### CSS Flexbox\n\n* [Flexbox CSS Reference](http://ptb2.me/flexbox/)\n* [W3C Spec Changes](http://dev.w3.org/csswg/css-flexbox/#changes)\n* [Flexbox Please!](http://demo.agektmr.com/flexbox/) Flexbox playground\n* [Flexy boxes](http://the-echoplex.net/flexyboxes/) Flexbox playground and code generator\n* [A thorough presentation on Flexbox](http://zomigi.com/blog/flexbox-presentation/)\n* [Solved by Flexbox](http://philipwalton.github.io/solved-by-flexbox/) Showcase of what flexbox can solve on the web\n\n## JavaScript\n\n##### Performance\n\n* [The 4 JavaScript Load Times](http://fr.slideshare.net/nzakas/enough-withthejavascriptalready)\n\n#####Coding Standards\n\n* [JavaScript Style Guide In the Wild](https://github.com/airbnb/javascript#in-the-wild)\n\n#####Documentation generators ([comparison](http://blog.fusioncharts.com/2013/12/jsdoc-vs-yuidoc-vs-doxx-vs-docco-choosing-a-javascript-documentation-generator/))\n\n* [JSDoc](https://github.com/jsdoc3/jsdoc)\n* [Docco](http://jashkenas.github.io/docco/)\n* [Doxx](https://github.com/FGRibreau/doxx)\n* [YUIDoc](http://yui.github.io/yuidoc/)\n\n---\n\n##### Librairies\n\n* [Micro frameworks](http://microjs.com/)\n* [Ractive.js](http://www.ractivejs.org/)\n* [Component.io](http://component.io/) [Component module list](https://github.com/component/component/wiki/Components)\n\n---\n\n## UX \u0026 UI\n\n* [A Good User Interface](http://www.goodui.org) Shared ideas by Jakub Linowski (★)\n* [UI Patterns](http://ui-patterns.com/patterns) UI Design Pattern library (★)\n* [UX Movement](http://uxmovement.com/)\n* [UX Myths](http://uxmyths.com/)\n* [UI Engineering](http://www.uie.com/articles/)\n* [Boxes and Arrows](http://boxesandarrows.com/)\n* [WebDesign Practises](http://webdesignpractices.com/)\n* [Should I use a carousel?](http://shouldiuseacarousel.com) - [Carousel Interaction Stats](http://weedygarden.net/2013/07/carousel-interaction-stats/)\n* [Float Label Pattern](http://bradfrostweb.com/blog/post/float-label-pattern/)\n\n---\n\n#### Responsive Design (RWD)\n\n* [Responsive Design Knowledge Hub](http://www.ugurus.com/responsive-design) (★)\n* [This is responsive](http://bradfrost.github.io/this-is-responsive/) Patterns, resources and news for creating responsive web experiences (★)\n* [RWD resources](https://gist.github.com/stowball/6577178) Articles and resources on responsive design approaches and workflows\n* [Future-Friendly Thinking](http://futurefriend.ly/thinking.html)\n* [Responsive Images Community Group](http://responsiveimages.org/)\n* [Responsive Navigation Patterns](http://responsivenavigation.net/)\n* [Responsive Embed (iframe)](http://embedresponsively.com/)\n* [The State Of Responsive Design](http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/) \n* [A proof-of-concept for a Flexbox-driven responsive layout](http://codepen.io/indyplanets/pen/LFocp)\n* [The responsive typography framework behind Words App](http://starburst1977.github.io/out-of-words/)\n* [RESS: Responsive Design + Server Side Components](http://www.lukew.com/ff/entry.asp?1392)\n* [srcset is “good enough”](https://docs.google.com/document/d/1xqqbd5u8Gudjs7Ubp3sBOIssbmtenY9t_te48or2_Ok/edit)\n* [RESS: REsponsive Web design + Server Side components](http://ress.io/) [BBC: Cutting the mustard](http://responsivenews.co.uk/post/18948466399/cutting-the-mustard)\n* [Picture element polyfill](https://github.com/scottjehl/picturefill) \n* [Smashing Conf: Real Life Responsive Design](http://www.lukew.com/ff/entry.asp?1792)\n\n#### Responsive Design (RWD) \u003e Typography\n\n* [Responsive Typography techniques](http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/)\n* [Responsive Typography roundup](http://www.awwwards.com/responsive-typography-a-roundup-of-the-best-articles-and-tutorials.html)\n\n---\n\n## Web Design\n\n#### Inspiration (UI)\n\n* [Pattern Tap](http://patterntap.com/) UI pattern library\n* [Links to Inspire](http://www.linkstoinspire.co.uk/) Links to inspire you all in one place\n* [UI Animations](http://ui-animations.tumblr.com/)\n* [Daily Dose of Inspiring 6sec Transitions and Animations Saved for Reference](http://sixux.com/)\n* [Mobile App transitions](http://capptivate.co)\n* [Type Hunting](http://typehunting.com/)\n* [App designs and icons made for iOS 7](http://madeforios7.tumblr.com/)\n* [Capptivate: iOS UI Animations](http://capptivate.co/)\n\n---\n\n#### WebDesign Tools\n\n* [Google Web Designer](http://www.google.com/webdesigner/) (★)\n* [Macaw](http://macaw.co/peek/) The code-savvy Web Design Tool\n* [WebFlow](http://www.webflow.com/) Responsive Web Design Tool\n* [Typecast](http://typecast.com/) Typography-first Web Design Tool\n* [Optimizely](https://www.optimizely.com/) A/B testing\n\n---\n\n#### ebDesign Reviews\n\n* [Red Pen](http://redpen.io/) Effing fast feedback\n* [InVison](http://www.invisionapp.com/)\n\n---\n\n## Tools \u0026 Generators\n\n#### Color \u0026 Schemes\n\n* [Online Style Guide Generator](http://stylifyme.com/)\n* [Color Hexa](http://www.colorhexa.com/) Information and conversion\n\n#### Generators\n\n* [CSP Is Awesome](http://cspisawesome.com/) Generate a Content-Security-Policy header\n\n#### References \u0026 Cheat sheets\n\n* [Favicon cheatsheet](https://github.com/audreyr/favicon-cheat-sheet) A painfully obsessive cheat sheet to favicon sizes/types (★)\n* [Mobile + Tablet Device Dimensions](http://stefhatcher.com/projects/device-dimensions/)\n* [iOS Design Cheat Sheet](http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/)\n* [iOS 7 Design Resources](https://developer.apple.com/library/ios/design/index.html#//apple_ref/doc/uid/TP40013289) Official guidelines all in one place \n* [HTML5 compatibility on mobile](http://mobilehtml5.org/)\n* [DevDocs](http://devdocs.io/)\n* [JavaScript Keycodes](http://keycodes.atjayjo.com/)\n* [Master of the :nth-child](http://nthmaster.com/)\n* [Git cheatsheet](http://www.ndpsoftware.com/git-cheatsheet.html)\n\n#### Mobile\n\n* [A tale of two viewports](http://www.quirksmode.org/mobile/viewports.html)\n* [SpeedLimit](http://mschrag.github.io/), [SlowyApp](http://slowyapp.com/) Throttle a fast internet down (mac app)\n* [CSS critical path snippet](http://paul.kinlan.me/detecting-critical-above-the-fold-css/)\n\n\n#### Images\n* [Tiny PNG](http://tinypng.org/) Shrink PNG files\n* [Compress PNG](http://compresspng.com/)\n* [Picture Slash!](http://pictureslash.com)\n* [Tools for image optimization](http://addyosmani.com/blog/image-optimization-tools/)\n* [Favicon generator](http://favicon.il.ly/) A really simple favicon generator (with mobile favicons)\n\n\n#### Resources\n\n* [Thestocks.im](http://thestocks.im/) The best royalty free\nstock photos in one place\n* [Pexels](http://www.pexels.com/) Best Free Photos In One Place\n\n#### Others\n\n* [Meet the Ipsums](http://meettheipsums.com) Plenty of Lorem Ipsums (still, use real content when you prototype)\n* [Gridzzly](http://gridzzly.com/) Paper grid to print generator\n\n#### Fonts \u0026 Typography\n\n* [Typographisme](http://typographisme.net/)\n* [Typo Guide](http://www.typogui.de/) Interesting Links \u0026 Resources\n* [Font generator](http://prototypo.io/)\n* [Born Typeface](http://www.carlosdetoro.com/born-en/) A beautiful Humanist Serif free Typeface\n* [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)\n* [Norwester](http://jamiewilson.io/norwester/) A condensed geometric sans serif free Typeface\n* [Grux](http://wegraphics.net/downloads/grux-hand-written-web-font/) A free Hand Written Web Font\n* [Redacted font](https://github.com/christiannaths/Redacted-Font) Keep your wireframes free of distracting Lorem Ipsum\n\n\n#### Colors\n\n* [Color Scheme Designer](http://colorschemedesigner.com/)\n* [Color Template](http://www.rocket-design.fr/color-template/)\n* [Kuler](http://kuler.adobe.com/)\n\n## Testing\n\n* [Sauce Labs](https://saucelabs.com/)\n\n#### Automation \u0026 workflow\n\n* [Automating front-end workflow](https://speakerdeck.com/addyosmani/automating-front-end-workflow)\n\n","funding_links":[],"categories":["Technical"],"sub_categories":["ramanihiteshc@gmail.com"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzedix%2Ffrontend-resources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzedix%2Ffrontend-resources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzedix%2Ffrontend-resources/lists"}