Responsive Web design is where it’s at right now. That’s a style of web page design whereby the page layout dynamically adjusts the layout to look good on all devices, from desktops to tablets to phones. This end result is achieved using a combination of CSS and HTML to resize, hide, shrink, enlarge, or move content to make it look good on any size screen, and, in the case of mobile devices, in either letter of landscape orientation. Luckily, most websites share a very similar structure, so a framework that includes a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) can be utilized as a basis to start building a site. Here are 10 frameworks that will help you to cut out a lot of development time and make your site look great to boot!
Foundation is a front-end framework for sites, emails, and apps. It includes a wide range of modular and flexible components that are easily styled. These versatile and lightweight building blocks make it easy to bring your ideas to life. Their new companion app, Yeti Launch, can quickly generate Sass projects. Compared to version 5, version 6 in only half the size. The total file size of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components.
HTML5 Boilerplate was launched by Paul Irish back in 2010, shortly after HTML5 came onto the scene. It subsequently became one of the most popular open source front-end web development frameworks for getting HTML5 websites and web apps up and running fast. Much more than a responsive CSS framework, it’s a collection of web development tools that enable sites to better support the myriad of modern web browsers and devices. These include a mobile-friendly HTML template, placeholder icons, CSS resets for standardizing your stylesheet property values, standard media queries for popular viewing screens, and an HTML5 shiv script for older browsers.
The Pure framework is comprised of a set of small, responsive CSS modules. The authors of Pure are obsessed with keeping file sizes as small as possible for the benefit of mobile devices. As a result, the framework is tiny, with the entire set of modules clocking in at 4.0KB when minified and gzipped.
Pure builds on Normalize.css and provides layout and styling for native HTML elements, plus the most common UI components. Moreover, Pure is highly extendable and encourages you to override its application styles with your own.
Beautiful responsive layouts for all screen sizes are achieved by using a combination of Grids, Menus, and other flexible GUI elements.
Skeleton is a responsive boilerplate kit that provides basic styles for your project that are designed to be a starting point for your projects. It consists of a small collection of CSS files that make your site look great at any resolution. Skeleton also provides support for layout grids, typography, buttons, and forms.
Skeleton is distributed under MIT License and is maintained on their GitHub page.
The framework that we now know as Bootstrap was initially developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across their own internal tools. Eventually, the framework was renamed from Twitter Blueprint to Bootstrap, and released as an open source project on August 19, 2011. Bootstrap has since become the most popular HTML, CSS, and JS framework for developing responsive websites in the world.
Bootstrap has a lot of features, including a 12-grid responsive layout, 13 custom jQuery plugins for common UIs like carousels and modal windows, a Bootstrap customizer, and more. Bootstrap is well-documented, and this open source project has plenty of coverage in blogs and tutorial sites. It has continued to be maintained by Mark Otto, Jacob Thornton, and a small group of core developers, as well as a large community of contributors.
UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It includes a comprehensive collection of HTML, CSS, and JS components
which is simple to use, easy to customize and extendable.
UIkit is developed in LESS and Sass so that you can write well-structured, extendable code that is also easy to maintain.
It also includes a collection of small, responsive components built using consistent and conflict-free naming conventions.
YAML, which stands for “Yet Another Multicolumn Layout”, is a cross-browser CSS framework that offers web designers the ability to build a website with a minimum of effort. Integrations of the YAML layouts have been created for various content management systems as well, including WordPress, LifeType, TYPO3, Joomla, xt: Commerce, and Drupal.
YAML was released way back in October 2005. At that time, it was conceived as a base for developing flexible layouts, consisting of flexible (elastic, fluid) containers and varying units. Over the years, the framework has been continually improved and extended, based on the feedback and needs of developers.
The Less Framework’s roots can be traced back to an early adaptive CSS grid system circa 2010-2011 whose author described as “a CSS grid system for designing adaptive websites”. It was basically a fixed-width grid that adapted to popular screen widths of the day by shedding some of its columns. Eventually, the Less Framework evolved from fixed-width grid system to a fully fluid-width one.
The idea behind the Less Framework is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore the additional layouts, and will use the default one instead.
The framework also includes a few sets of typography presets for enhancing your fonts.