Responsive Web Design (RWD) is the approach that suggests that website design and development should enable each site to respond automatically to a user’s behavior and environment—that is, whether that person is using a laptop, iPad, Android phone or other device, viewing in portrait or landscape mode, and so on.1 In the case of public displays, recent work also considers the viewer’s distance from the screen within the context of RWD.2
Typically, an RWD framework contains a variety of JavaScript files or libraries, Cascading Style Sheet (CSS) files containing predefined code, and basic HTML files.3
Read on for a survey of five top responsive web design frameworks in use today.
Bootstrap
First released in 2011, this free, open-source CSS framework is directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
According to its website, Bootstrap features Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.4
One reviewer notes that Bootstrap’s real power is in its documentation, as it gives developers access to a vast content library, providing a detailed look at code and output. He recommends Bootstrap for beginners and seasoned developers alike.5
Bootstrap 5 Alpha was released in June of 2020, and version 4.5.3 is now available.
Foundation
Also launched in 2011, this open-source project provides a responsive grid, HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions.
Its website promotes Foundation as a framework “for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.”6
Foundation’s education focus has garnered notice. Its three learning paths, from beginner to certified Foundation pro, take the user from best-use practices through JavaScript customization and Sass. In addition, the framework is becoming known for business use. Subaru, Hewlett Packard, Barclay Bank, Perry Ellis, Disney, Amazon, and Pixar use it for building websites.5
Version 6 is currently available.
Bulma
A 2016 arrival, this free, open-source framework is based on Mozilla’s MDN Flexbox module. It’s focused entirely on CSS—no HTML, JavaScript or siloed platforms. Wholly modular, it allows users to download only the features they need, from a complement that includes layout, typography, forms, buttons, navigation, .sass files and easy-to-learn syntax.
Reviewers have lauded Bulma’s layout feature, among others. “While other frameworks will give you a lot of the basics like styling, forms, and buttons,” says one, “Bulma sets itself apart by providing layout components. These are a big reason you won’t have to write much custom CSS when writing your own apps/sites.”7
Version 0.9.1 is now available.
Pure
Another modular option created with the aim of keeping file sizes small, Pure debuted in 2014. It features a minimal footprint and “lightweight framework,” which makes it “great for getting up and running with CSS quickly.”5 It builds on Normalize.css and provides layout and styling for native HTML elements and the most common UI components.
Highly focused on a grid layout and driven by responsive layout design, Pure is only 3.7KB when zipped, which can make it especially useful for mobile-first developers and those creating progressive web apps.
Pure has made a wide range of CSS components available, and it boasts a customization feature that gives developers the option of creating and using their style sheets.
Version 2.0.3 is currently available.
Semantic UI
As its name suggests, this framework employs a semantic, descriptive language for its classes and naming conventions. Instead of using abbreviations, as other frameworks do, it utilizes real words in a manner closer to plain English.
After its 2014 launch, Semantic UI quickly became popular with designers—in part because it allows the incorporation of third-party style guides, even from other frameworks.8
Powered by LESS and jQuery, Semantic UI has a sleek, flat design look that provides a lightweight user experience. Its features include loaders, buttons and divers, as well as collections such as breadcrumbs and forms. Developers also get complex modules such as sticky bones and popups.8
Version 2.4.2 is currently available.
Start Creating Your Success.
There’s a rewarding UX Design career ahead of you. Get ready for it in the Kent State online MS in UXD program: the ideal combination of essential core skills, electives tailored to your interests and the opportunity to create a professional UX design portfolio. Talk with an Admissions Advisor today.
Sources:
- Retrieved on October 28, 2020 from smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
- Tafreshi, Amir E. Sarabadani; Marbach, Kim; Norrie, Moira C. (June 5, 2017). Proximity-Based Adaptation of Web Content on Public Displays. International Conference on Web Engineering (ICWE):Web Engineering. Lecture Notes in Computer Science.
- Retrieved on October 28, 2020 from os-templates.com/journal/responsive-web-design-framework#
- Retrieved on October 28, 2020 from getbootstrap.com/
- Retrieved on October 28, 2020 from insights.dice.com/2020/07/09/5-great-css-frameworks-for-web-developers/
- Retrieved on October 28, 2020 from get.foundation/
- Retrieved on October 28, 2020 from scotch.io/bar-talk/get-to-know-bulma-my-current-favorite-css-framework
- Retrieved on October 28, 2020 from websitemagazine.com/blog/top-responsive-web-design-frameworks
