Caressing front-end design frameworks for web

In the past few years, the focus has moved a lot towards creating beautiful front-end designs for web pages and applications. With user experience being the central theme in creating web applications, it makes more sense to create a user interface that is sleek, beautiful, responsive and powerful. A lot of it can be attributed to the superior web browsers these days, which are not just web browsers, but actually powerful front-end web engines. Firefox was actually the first to look in this direction, but it was actually Chrome which completely developed and implemented it with the ‘webkit’ engine, which was eventually also incorporated by Safari. Microsoft too entered this domain with it’s powerful ‘Edge’ browser, which supports all the features that webkit supports. The idea these days is to take away some of the processing that was being done at the backend servers to the user’s web-page, which the browser already is capable of doing. At the same time, it is difficult for the back-end engineers, who are more used to developing applications that run on the server-side to develop something on the front-end

Frameworks

A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.

In the world of web design, to give a more straightforward definition, a framework is defined as a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.) which can be used to support the development of websites, as a basis to start building a site.

Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow to cut out much of the work and save a lot of time.

picture1

Types of frameworks

There are basically 2 types to differentiate: backend and frontend (this distinction is drawn depending on whether the framework is for the presentation layer or the application/ logical layer.

Front-end design frameworks

Front-end design frameworks were developed to address the problem discussed above and they have been able to do an excellent job. Another important concept that has been around for some time is responsive web-design, meaning, the web page will adjust all the elements in the page such as pictures, buttons, text-boxes, etc. according to the height and width of the page, or the browser window by using CSS media queries.

Frontend frameworks usually consist of a package made up of a structure of files and folders of standardized code (HTML, CSS, JS documents etc.)

The usual components are:

  • CSS source code to create a grid: this allows the developer to position the different elements that make up the site design in a simple and versatile fashion.
  • Typography style definitions for HTML elements.
  • Solutions for cases of browser incompatibility so the site displays correctly in all browsers.
  • Creation of standard CSS classes which can be used to style advanced components of the user interface.

Let us take a look into the top three responsive design frameworks:-

Bootstrap

This is my personal favorite. It is also world’s leading framework for developing mobile-first web pages. It is sleek, intuitive and powerful for faster and easier web development. Originally built by Twitter, it uses LESS. CSS is compiled via Node, and is managed through GitHub.

Foundation 6

This is an advanced responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows to much more quickly develop Foundation itself — and gives new tools to quickly customize and build on top of Foundation

Skeleton

Skeleton is a beautiful boilerplate for responsive, mobile-friendly development. It is a small collection of CSS files that can help rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Advantages of using frameworks

  • Speeds up the mock-up process
  • Clean and tidy code
  • Solutions to common CSS problems
  • Browser compatibility
  • Learn good practices
  • Having a single procedure to resolve common problems makes maintaining various projects more straightforward.
  • Helpful in collaborative work

Disadvantages of using frameworks

  • Mixes content and presentation
  • Unused code leftover
  • Slower learning curve
  • No learning by yourself

Should one use a framework?

Not necessarily. The developer must take the final decision on whether or not to use a framework. Frameworks are a resource that can be extremely useful for many people, like backend programmers,  but that does not mean they are necessarily useful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s