OpenSourceVarsity

pdf icons

What Is A Responsive Framework?

A framework is a standardized set of concepts, practices and criteria which offers an acceptable solution to a common type of problem. Interestingly, a framework is often used as a reference, to help resolve new problems of a similar nature.

Now let’s map this idea into the world of web page design. IN the world of web page design, a framework can be explained as a complete package consisting of:

  • Folders containing
  • Files holding
  • Standardized HTML, CSS, JS codespec, which are used to develop web pages

Webpages being the basic building blocks of any website.

Luckily, websites are structurally almost identical in nature. Traditionally, the website is built around an index page (sometimes referred to as the gateway page) which displays links to the other web pages of the website.

Hence, the aim of a webpage/website framework is to provide a common standard structure so that developers do not have to build each website page from scratch but can happily reuse standardized HTML, CSS, JS codespec provided by the framework to craft the page.

Using any standardized framework empowers web page developers by cutting out a ton of often repetitive work thus helping them save a lot of time when building webpages.

To summarize: There is no need to reinvent the wheel each time a webpage needs to be crafted.

How Many Types Of Frameworks Are There?

Basically there are two types of frameworks backend frameworks and frontend frameworks.

Backend frameworks are those that are deployed at the Webserver that hosts the website and are accessed by the codespec created by the webpage developers. This framework does all the work necessary at the Webserver to ensure that the Browser that requested for the webpage gets exactly what was asked for.

The backend framework (i.e. programmer’s framework) usually consists of a server side scripting language eg: PHP, which connects to the website’s database to extract website content for display in the site visitor’s Browser on demand
AND
The frontend framework (i.e. designer’s framework), ensures that the website content extracted from the website database is displayed in the site visitor’s Browser correctly on demand. Frontend frameworks accompany the webpage to the Browser that requested the page. These play a vital role in ensuring that the webpage displays correctly in the site visitors Browser.

Frontend frameworks usually are made up of folders and files containing standardized code HTML, CSS, and JavaScript codespec. CSS source code, normally defines a 12 (or 16) column grid which allows the web page developer to position the different web page, design elements, in a simple and versatile manner.

The styling rules defined in the frontend framework’s CSS, bound to various HTML elements, defines the look and feel of the textual content of the web page.

The frontend framework also delivers standard CSS classes which are used to style the HTML components of the user interface such as text boxes, text areas, command buttons, radio buttons, check boxes, tabs, accordions, images and a whole lot more.

The frontend framework normally has in-built solutions for Browser incompatibility issues so the webpage displays adequately well in all major Browsers.

Responsive Frontend Frameworks

Today, with the demand for responsive web pages, which facilitate the development of websites that can adapt to various display screen resolutions ranging from mobile devices to the desktop being very high, multiple, frontend, responsive frameworks have emerged.

These responsive frontend frameworks, swiftly and conveniently, solve common problems experienced by web page developers when having to craft a responsive site.

Responsive, front end frameworks, offer an elegant and simple solution to web developers to craft responsive web pages from the ground up. Such frameworks ensure that world class coding standards are applied across all aspects of webpages making updation or maintenance pain free, while ensuring webpage responsiveness.

Selecting A Responsive Frontend Framework To Use

The multiple CSS based frontend frameworks available today, can be quickly divided in two lots. Simple frontend frameworks that define a responsive grid and complete frameworks that define a whole lot more than a responsive grid.

This does not mean that one frontend framework is automatically better than the other but rather differentiates one frontend frameworks from the other based on the fact that they offer different solutions for creating responsive web pages depending on the level of complexity and/or flexibility required by the web page developer.

Simple frameworks

These are often simply grid systems but are frameworks nonetheless. They are basically CSS style sheets which have specific column width definitions, which facilitate the placement of different web page elements, like text, images, video, audio and so on, across the real estate of the web page but bound to the columns defined in the CSS style sheet of the framework.

For example – The 1140 CSS Grid framework

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the Browser view port.

Beyond a certain point the 1140 grid CSS uses media queries to deliver a mobile device version of the web page, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Today web page developers must stop designing for a fixed design width of 1024pixels. By using the 1140 grid as the web page design framework they can create a web page once which will fit perfectly on a monitor having a display density of 1280pixels, and with very little extra work, the web page will automatically adapt itself to work on just about any display size and pixel density, even a tiny mobile phone displays.

Additional Simple Grid Based Frameworks

The Golden Grid System URL: http://goldengridsystem.com/

The Responsive Grid System, by Graham Miller URL: http://www.responsivegridsystem.com/

The Titan responsive grid system URL: http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

The 960 Grid System URL: http://960.gs/

And so on.

Complete frameworks

Complete frameworks usually offer configurable features like:

  • Styled-typography
  • Sets of forms
  • Buttons
  • Icons

And other reusable components built to provide:

  • Navigation
  • Alerts i.e. styled modal windows
  • Popovers
  • Tabs
  • Sliders
  • Image frames
  • HTML templates
  • Custom setting

And lots more.

Some complete front-end frameworks are:

The Bootstrap framework URL:
http://getbootstrap.com/ for Bootstrap version 3.X

http://foundation.zurb.com/ for Foundation framework

How Does One Choose The Right Framework To Develop With

Choosing the appropriate responsive framework to craft a webpage/website needs to be thought through.
Here are a few reasons why:

Every site is different
Each site has different characteristics. For example, using a complete framework for a single page site may deliver an adequate result in the site visitors Browser but would definitely make the one page website heavy to download to the Browser.

Speed of responsive framework installation and use
Some responsive frameworks are simple to install and start using. Others require time to install and configure prior use.

Ease of understanding
Some responsive frameworks are a bit of a pain to come to grips with. Others, by contrast, are comparatively more straightforward.

Options available
Some responsive frameworks are more complex than others. They offer more configuration options, more widgets and more interface options. These will perhaps allow you to do better things when building your responsive webpage/website.

Integration with other systems
Some responsive frameworks work beautifully well when integrated with other systems others do not.

Long-term support
Some responsive frameworks appear to lack regular updates and/or support services. It always makes the most sense to opt to adopt/use those responsive frameworks that offer continued updates and support.

Advantages Of Using Frameworks

  • Speeds up the web page mock-up process
  • Helps deliver clean and tidy code
  • Has a solution to many common CSS problems
  • Ensures Browser compatibility
  • Forces good coding practices
  • Thus helps project maintenance in the long run
  • Definitely helps in collaborative work

Disadvantages Of Using Frameworks

  • Mixes page content and its presentation
  • Makes the web page heavier because of a lot of unused CSS code being bound to the webpage
  • Has a steeper learning curve than vanilla HTML and CSS

NOTE: From now on this material singularly focuses on the Bootstrap 3.X.X framework.

April 5, 2016
Design by Ivan Bayross and Meher Bala © 2017 All Rights Reserved
X