Responsive web design is a term used in web development that aims at creating an optimized mobile version of a website. In fact developers follow a “Mobile-first” methodology when they begin designing a site and that’s majorly because more and more users access websites on their mobile devices in today’s time! Here is where “frameworks” come into play. They give a head start to development as they have prebuilt CSS which gives you CSS classes to apply to your elements that lets you have a responsive structure from the first point of development. Let’s look at some of the frameworks that are preferred by developers:
1. BOOTSTRAP 4
Bootstrap has been there since forever and refuses to go off the list! That’s majorly because of its ease of use and simple design. It basically makes use of a grid system that divides a page into 12 columns. They have updated to Bootstrap 4 and made quite a few changes like
- Browser support change like dropping IE8 etc
- Flex box based grid
- Improvised media queries
- Replaced LESS by SASS
- Utility Classes etc.
If you are beginning out in web development and want to get a hold of this framework, we offer a course in Twitter bootstrap here at ADMEC Institute which will teach you how to develop responsive websites.
2. MATERIALIZE CSS
In web development it’s almost impossible to not have come across this responsive UI Framework! Materialize CSS is created and designed by Google based on the “Material Design”. It makes an app or a website look good on any device.
- It also follows the 12 column grid system but does not make use of Flexbox.
- Materialize allows developers to customize it and fit their needs pertaining with the Material Design concept.
- Designers have an option of either downloading the CSS files or SASS file which can be edited and compiled.
- It has wide selection of CSS and JavaScript Components such as cards, collections, preloader, parallax, scrollfire, waves, slide-out drawer menu, toasts etc.
3. FOUNDATION
Foundation is developed by Zurb which is a design agency. It contains all the featured needed to develop a responsive application and this also follows the grid system.
- It makes use of rems as a measuring unit instead of pixels and with SASS pixels are internally converted to rems.
- This framework is available for Sites, Emails and Apps.
- Some of the other usable features are box grid, clearing lightbox, flex video, off canvas etc.
4. BULMA
This one’s a relatively newer framework on the block and is developed by Jeremy Thomas. The beauty of this framework is that it is pure CSS and no JavaScript which means you can only include a “.css” file and you are good to go.
- It is a modular framework which means import only the parts that you need thus making your application lightweight
- It makes use of a grid system which is flexbox based
- It is built with the SASS preprocessor
- Being new another factor that contributes to using it is that its documentation is pretty precise
- Provides many components such as cards, navbar, menus, dropdowns, messages, panels, tabs and features like pricing tables, timeline, calendar etc.
5. SEMANTIC UI
In this framework class names are just like how humans would speak, language words and class names are exchangeable in this framework. This makes your HTML intuitive. JavaScript is used in this framework and it makes use of terms called “behaviors” which are used to trigger functionalities.
- It allows debugging through performance logging
- Apart from buttons it provides different set of definitions like elements, collections, views, modules, behaviors.
- Semantic’s has predefined has predefined UI components such as Step, Feed, Divider, Menu, Segment etc
- It offers personalization and customizations as per need.
- You can load as many components from the framework as needed to avoid an added heavy overhead.
SUMMARY
The convenience of using a framework is realized only when you actually start using it! Not only does it speed up your development time but also makes your code pretty concise and manageable. There is no fuss of writing redundant CSS classes and maintain complex CSS files, and you can still add customizations as and when needed. Choosing a responsive design framework depends on many factors like complexity, ease of learning, browser compatibility, customizable, expertise level of a developer, technology used and also it majorly depends on what kind of a project one is working on.
Check out our web designing courses to start working on the given frameworks.
