Awesome
Frontend Tools & Resources
A list of selected front-end resources, articles and tools by zedix.
Originally inspired by the Landscaping With Front-end Tools by codylindley.
Web Platform
- Move the Web Forward
- Extensible Web Manifesto
- Browser technologies The Web platform: Browser technologies
- Google's curated resource for building modern websites
- Specifiction Conversations about Web standards
Latest news and resources
- Chrome Status Tracking HTML5 feature implementations for Chrome
- IE status What’s available or what’s coming in Internet Explorer
- Peter Beverloo WebKit changes
- SidebarIO Curated 5 best design links, every day (★)
- Collective News Weekly resources curated by Codrops (★)
- Pixels & code Weekly resources curated by walterstephanie
- Web Platform Daily Open Web Platform Daily Digest (★)
- HTML5 Bookmarks Daily news articles and bookmarks
- Reddit Web Design
- Curated resources for everything creative
Weekly newsletters
- HTML5 Weekly
- Web Design Weekly
- Responsive Design Weekly
- JavaScript Weekly
- CSS Weekly
- Web Tools Weekly
Web Application Frameworks
Web Components
- Are We Componentized Yet?
- Web Components Resources by Eric Bidelman
- HTML5 Rocks
- Polymer JS Set of polyfills
- X-Tags
- Mozilla Brick UI Components for Modern Web Apps
- CustomElements.io Web Components Gallery
- Building Next Generation Widgets with Web Components
HTML5 Boilerplate
- Google 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 (★)
- HTML5 Bones
- FireShell Front-end boilerplate and workflows, HTML5, Grunt, Sass
- dCodes Shortcodes
- Meteor
CSS
CSS Frameworks (comparison)
- Bootstrap Set of minimal, responsive CSS modules by Twitter
- Pure Set of minimal, responsive CSS modules by Yahoo (05/2013)
- Topcoat Open source CSS library by Adobe (06/2013) Guidelines
- Foundation Responsive front-end framework
- UIkit
- Init
- Effeckt.css UI-less, performant transitions & animations
- Inuit Sass-based, BEM, OOCSS framework.
- TypePlate Sass-based typographic kit
CSS Scalability and Modularity
- OOCSS (Object-Oriented CSS)
- Separate structure and skin.
- 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)
- DRY CSS
- Keep style separate from content
- Avoid specificity by harnessing the cascade
- BEM (Block, Element, Modifier) topcoat.io example
- MCSS (Multilayer CSS) Multilayer CSS organization methodology (based on BEM/OOCSS principles)
- ACSS (Atomic CSS) My Yahoo Blog post "Style things without always having to write more CSS rules"
- AMCSS Attribute Modules for CSS
- Organic CSS
- CSS Guidelines High-level advice and guidelines for writing sane, manageable, scalable CSS
- A Scalable CSS Reading List
CSS Processors
- Myth A postprocessor that polyfills CSS.
CSS Tools
- Critical Path CSS Generator
- StyleStats CSS Statistics
- UIGradient Beautiful colour gradients
CSS Guidelines
- CSS Guidelines, high-level guidelines for writing manageable, maintainable CSS
- Maintainable CSS with BEM
- Scalable And Maintainable CSS
- Front-end and UI style guides
- Google HTML/CSS Style Guide
- Principles of writing consistent, idiomatic CSS
- @mdo’s CSS code guide By the creator of Bootstrap
CSS Flexbox
- Flexbox CSS Reference
- W3C Spec Changes
- Flexbox Please! Flexbox playground
- Flexy boxes Flexbox playground and code generator
- A thorough presentation on Flexbox
- Solved by Flexbox Showcase of what flexbox can solve on the web
JavaScript
Performance
#####Coding Standards
#####Documentation generators (comparison)
Librairies
UX & UI
- A Good User Interface Shared ideas by Jakub Linowski (★)
- UI Patterns UI Design Pattern library (★)
- UX Movement
- UX Myths
- UI Engineering
- Boxes and Arrows
- WebDesign Practises
- Should I use a carousel? - Carousel Interaction Stats
- Float Label Pattern
Responsive Design (RWD)
- Responsive Design Knowledge Hub (★)
- This is responsive Patterns, resources and news for creating responsive web experiences (★)
- RWD resources Articles and resources on responsive design approaches and workflows
- Future-Friendly Thinking
- Responsive Images Community Group
- Responsive Navigation Patterns
- Responsive Embed (iframe)
- The State Of Responsive Design
- A proof-of-concept for a Flexbox-driven responsive layout
- The responsive typography framework behind Words App
- RESS: Responsive Design + Server Side Components
- srcset is “good enough”
- RESS: REsponsive Web design + Server Side components BBC: Cutting the mustard
- Picture element polyfill
- Smashing Conf: Real Life Responsive Design
Responsive Design (RWD) > Typography
Web Design
Inspiration (UI)
- Pattern Tap UI pattern library
- Links to Inspire Links to inspire you all in one place
- UI Animations
- Daily Dose of Inspiring 6sec Transitions and Animations Saved for Reference
- Mobile App transitions
- Type Hunting
- App designs and icons made for iOS 7
- Capptivate: iOS UI Animations
WebDesign Tools
- Google Web Designer (★)
- Macaw The code-savvy Web Design Tool
- WebFlow Responsive Web Design Tool
- Typecast Typography-first Web Design Tool
- Optimizely A/B testing
ebDesign Reviews
Tools & Generators
Color & Schemes
- Online Style Guide Generator
- Color Hexa Information and conversion
Generators
- CSP Is Awesome Generate a Content-Security-Policy header
References & Cheat sheets
- Favicon cheatsheet A painfully obsessive cheat sheet to favicon sizes/types (★)
- Mobile + Tablet Device Dimensions
- iOS Design Cheat Sheet
- iOS 7 Design Resources Official guidelines all in one place
- HTML5 compatibility on mobile
- DevDocs
- JavaScript Keycodes
- Master of the :nth-child
- Git cheatsheet
Mobile
- A tale of two viewports
- SpeedLimit, SlowyApp Throttle a fast internet down (mac app)
- CSS critical path snippet
Images
- Tiny PNG Shrink PNG files
- Compress PNG
- Picture Slash!
- Tools for image optimization
- Favicon generator A really simple favicon generator (with mobile favicons)
Resources
- Thestocks.im The best royalty free stock photos in one place
- Pexels Best Free Photos In One Place
Others
- Meet the Ipsums Plenty of Lorem Ipsums (still, use real content when you prototype)
- Gridzzly Paper grid to print generator
Fonts & Typography
- Typographisme
- Typo Guide Interesting Links & Resources
- Font generator
- Born Typeface A beautiful Humanist Serif free Typeface
- Adobe Blank Typeface Two clever usage
- Norwester A condensed geometric sans serif free Typeface
- Grux A free Hand Written Web Font
- Redacted font Keep your wireframes free of distracting Lorem Ipsum