Defining CSS Frameworks and Tips on Choosing the Right One for Your Web Portal

Are you planning to develop a website with quite a few numbers of pages included? If so, it is better to use some kind of pre-built framework or system to help you move smoothly with the proceedings. The inclusion of Frameworks provides necessary support like setting the typographic rhythms, computing widths for columns, while ensuring that every single page included feature the right scripting language, correct doc type and proper character set. But then, with thousands of frameworks readily available, which one would you choose to work best with your website?


Defining CSS Framework

CSS Framework or Web Framework, can be defined as a specific group of tools and libraries that can be used for website development and designing. It also comprises the best practices for framing of web pages. CSSS Framework can be a highly complex group of HTML, CSS, JavaScript, and various server-side programs and set of files required for managing an entire site’s architecture. On the other hand, it can also be extremely simple, a single page template that can be used as a starting page for every single page included in your portal. Whether it is complex or simple, every CSS framework would include a mandatory set of elements. These are:

• CSS resets
• CSS grids
• Typography
• Colors
• Plug-ins and custom user interface (UI) elements

Let’s try to understand each of these elements with a bit of detailing.


CSS Resets

Modern browsers try to differentiate themselves from older ones by tweaking on their ability to display site features. Say for example, one browser indents the list by 40 pixels and then there may another that does it by 42 pixels. There are also browsers that come with border on HTML tag. On the other hand, there are also others that include padding. No matter how explicit CSS you use for developing a page, they still may look different in different browsers. This is a critical problem that CSS Resets attempt to fix. It simply tries to bring entire set of website elements to a fixed baseline without the inclusion of any styles on these elements. Once every single element is displayed in a similar fashion, you can start from scratch using the CSS to provide the look you want for each of these pages. CSS Reset of one type or other is present with most of the web frameworks.

There are certain CSS reset that makes every single element identical virtually. One common example of such a CSS rest is Eric Meyer’s CSS Reset. Then, there are also other types of CSS resets that leave certain style (the tag for bold and tag for italic) as per your preference but normalize several other tags. Also, you can opt for this simple CSS Reset: * { padding: 0; margin: 0; }
This is an instruction that helps in clearing out default padding and margin on every element present, ignoring every other thing that’s considered standard about the tags.


Managing Grids is another extremely tedious part of any website design. Those who prefer building their own grid would become more familiar with the best calculative proportions for gutters and columns on the site. Although many stay out of it, but without grids your web design would suffer severely. Grids help the web designs look easy on eyes and perfectly consistent. They provide a certain clarity and structure to the design. Also, using grid makes it a lot easier to replicate the design at a later stage.


It can be really challenging to create appealing typographic rhythms on websites. There are several frameworks available that include different typographic adjustments like adding and removing element padding, fixing line height, and also ensuring headings flow through in size and font family.


A lot of web designers prefer having total control of color on website designing projects they are working on. Unless you have detailed knowledge about analogous or complementary color elements, it is better to consider using CSS frameworks that provide the perfect baseline to use colors in a more effective way.

Plug-Ins and Other Custom UI Elements

You will find several complex frameworks that offer custom user interface, scripts, and plug-ins. If you want to include special features like tooltips, gallery, collapsible sections, or some other kind of scripted UI elements, the best option is to look for a framework comprising of such custom built-in elements.

Things you should consider prior to selecting a framework

When looking for a framework, there are several factors that must be considered. Have a look at the list below:
• What kind of framework do you prefer for the site?
• What should be the framework language?
• What necessary features must be included in the Framework?
• Can the framework be customized?
• Is the framework modular?

Type of framework for the site

You need to sort out whether your site actually requires a framework or not. Websites having multiple pages usually benefit from specific frameworks.

The language part

Some frameworks use only basic HTML languages. These are mostly simple frameworks. However, there are also more complex ones that use JavaScript and CSS. There are also those frameworks that use SAAS and LESS for compiling the CSS. There are also those frameworks that use RUBY or some other kind of similar programming language to compile the pages. Unless you have proper understanding of the type of language to be used, handling the framework can be quite challenging.

Features to be included

Some of the common features to be expected from a Framework are RWD (responsive web design), multi-browser support, mobile-friendly and mobile-first supportive designs, and JavaScript requirements.

Customizable or not

If you use a customizable framework, it helps you to add your own preferred coding structure while designing the web pages to create an original appearance for the site. Without a customizable framework, you may have to develop the site from the scratch.

Modular design or not

Modular frameworks work best with customization concept. These frameworks offer a kind of base system to which new features can be added as per the needs.

A look at some popular CSS Frameworks

• Blueprint
• 960 Grid System
• Compass
• Foundation
• Bootstrap
• Pure CSS
• Kube
• HTML 5 Boilerplate
• Skeleton
• Responsive Grid System

These are not the only options available. There are plenty more to find with a little bit of research and deep searching through the web as you land upon the top website design company that offers an array of such services to clients worldwide. You simply need to know your requirements to make the searching process a bit easier and less time-consuming.

1 Comment
  1. Reply
    Tasha Wlodarczyk July 16, 2017 at 7:45 pm

    Great read.

    Leave a reply