Bootstrap stands as a leading, contemporary frontend/UI development framework, offering an extensive array of features essential for crafting responsive websites and applications. Its 12-column responsive grid, 13 custom jQuery plugins for UI elements like carousels and modals, a customizable Bootstrap interface, and additional functionalities make it a comprehensive tool for web development.Bootstrap is well-documented and widely discussed in various blogs and tutorial sites. Bootstrap Tutorials
Getting Started with Bootstrap (twitter.github.io)
Twitter Bootstrap 101: Introduction (webdesign.tutsplus.com)
Bootstrap Tools and Resources
Tools/Resources
Description
Bootswatch
Free, open-source Twitter Bootstrap themes
Built With Bootstrap
Portfolio of websites and apps utilizing Bootstrap
Bootstrap Browser Compatibility
Chart illustrating Bootstrap’s supported browsers
Building Twitter Bootstrap
Insights into Bootstrap’s development process
WP-Bootstrap
Open-source WordPress starter theme based on Bootstrap
Font Awesome
Icon fonts specifically designed for Bootstrap
Official Bootstrap documentation
Foundation, another popular responsive frontend framework, is developed by ZURB, a team of product designers specializing in web-based solutions. It offers mobile-first design approaches, rapid prototyping capabilities, and a robust responsive grid system.Foundation Tutorials
Foundation Docs: Getting Started (zurb.com)
A Beginner’s Guide to Zurb Foundation (designshack.net)
Dive into Responsive Prototyping with Foundation (alistapart.com)
Rapid Prototyping For Any Device With Foundation (smashingmagazine.com)
Quickly build a prototype to test on any device (netmagazine.com)
Foundation Tools and Resources
Tools/Resources
Description
Foundation: HTML Templates
Pre-built HTML layout patterns for immediate use
Foundation Icons Fonts
Comprehensive set of UI icons
Foundation: Omnigraffle Stencils
Template for creating wireframes
Official Foundation documentation
Skeleton is a minimalist responsive CSS boilerplate designed for HTML5 websites and applications. It provides only the necessary elements for development, eliminating unnecessary complexity. Key features include a responsive grid layout, standard media queries, responsive image scaling, a PSD template for design mockups, and support for older web browsers through an HTML5 shiv.For rapid implementation of responsive design, Skeleton is an excellent open-source project. Skeleton Tutorials
Build a Responsive, Mobile-Friendly Web Page With Skeleton (designshack.net)
Skeleton Boilerplate: PSD To HTML (1stwebdesigner.com)
Intro to Skeleton CSS Boilerplate (youtube.com)
Skeleton Tools and Resources
Tools/Resources
Description
Skeleton WordPress Theme
WordPress starter theme based on Skeleton
Skeleton Examples & Extensions
Exhibition of projects developed using Skeleton
Official Skeleton documentation
Introduced in 2010, HTML5 Boilerplate has emerged as one of the earliest and most prevalent open-source tools for front-end web development. It provides a collection of solutions to ensure compatibility with modern web browsers, including a mobile-friendly HTML template, placeholder icons, CSS resets, standard media queries, and support for non-modern browsers through an HTML5 shiv.HTML5 Boilerplate Tutorials
The Official Guide to HTML5 Boilerplate (net.tutsplus.com)
HTML5 Boilerplate Walkthrough (youtube.com)
HTML5 Quick Start with Boilerplate (teamtreehouse.com)
HTML5 Boilerplate Tools and Resources
Tools/Resources
Description
HTML5 Boilerplate Showcase
Tumblr blog featuring websites and apps using HTML5 Boilerplate
Mobile Boilerplate
Branch of HTML5 Boilerplate tailored for mobile apps
Sites Using HTML5 Boilerplate
Listing of websites that utilize HTML5 Boilerplate
Official HTML5 Boilerplate documentation
HTML5 KickStart is a streamlined package of HTML, CSS, and JavaScript files designed to save UI developers significant time. At approximately 300KB, it includes UI components, scalable icons, a responsive grid layout, a touch-enabled slideshow, and more.HTML KickStart Tutorials
HTML KickStart Getting Started Guide (99lime.com)
HTML KickStart Tools and Resources
Tools/Resources
Description
Official HTML KickStart documentation
Montage is an open-source HTML5 framework for crafting modern applications. It utilizes declarative binding to synchronize app data and UI, and features Blueprints for binding metadata to app objects, making it ideal for handling dynamic page elements.Montage Tutorials
Montage Quick Start (montagejs.org)
Montage JS Getting Started (youtube.com)
Montage Tools and Resources
Tools/Resources
Description
Apps Made with Montage
Gallery and showcase of live Montage-based apps
Mop
Open-source tool for minifying Montage files and customizing Montage bundles
Official Montage documentation
SproutCore is a frontend framework for rapidly developing HTML5 applications, adhering to the MVC architecture pattern. It promises to deliver native-like user experiences on the Web.SproutCore Tutorials
SproutCore Guides (sproutcore.com)
Build mobile applications with SproutCore (ibm.com)
SproutCore Tools and Resources
Tools/Resources
Description
SproutCore Showcase
Demos and examples available on SproutCore’s website
Official SproutCore documentation
Zebra is an open-source rich UI framework that utilizes HTML5 canvas for rendering. It claims to be user-friendly and can be up and running in just 5 minutes.Zebra Tutorials
Simple UI Zebra Application (github.com)
How to create a color picker with Zebra (zebkit.com)
Zebra Tools and Resources
Tools/Resources
Description
OOP cheat sheet
Resourceful guide to understanding Zebra’s object-oriented programming logic
Official Zebra documentation
CreateJS is a suite of open-source JavaScript libraries and tools for producing rich, interactive HTML5 content. It comprises five modular libraries and aids in animation, HTML5 audio support, and more.Sponsored by Adobe, Microsoft, and AOL, this project is a valuable resource for web development.CreateJS Tutorials
Show & Tell / Discussion Area (createjs.com)
CreateJS Tools and Resources
Tools/Resources
Description
EaselJS demos
Exhibition of the capabilities of one of CreateJS’s JS libraries
CreateJS CDN Libraries
Public CDN for serving CreateJS files
Official CreateJS documentation
Less Framework is a modern frontend framework for constructing responsive designs. Similar to Skeleton, it is a straightforward layout grid framework with four pre-built layouts: Default, Tablet, Mobile, and Wide Mobile.Less Framework Tutorials
Responsive Web Design with HTML5 and the Less Framework (sitepoint.com)
Less Framework Tools and Resources
Tools/Resources
Description
Frameless Grid
