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
Read on for a survey of five top responsive web design frameworks in use today.
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.
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
Version 6 is currently available.
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.
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.
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.
- 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