Cameron FrancisAugust 19,2014

Useful CSS Frameworks

Category: Site Design

CSS Frameworks

A great website design consists of a well-designed structure and there are many programming languages that are used for creating web documents. A good website style plays a necessary role within the overall performance of the website and the end result is of utmost importance. The web design and the language used depends on the web developer who is actually creating the websites. Of course, not all the websites that looks similar are developed in the same programming language. CSS is just one of these programming language options used for styling the web pages.

CSS language describes the formatting and the look of the documents created in mark-up languages. This style sheet language is more employed to style user interfaces and web pages written in XHTML and HTML. In the last few years the CSS programming language went through a large number of changes. Those changes and developments made CSS a more reliable programming language today, containing a large set of techniques and tools.

CSS Libraries or Frameworks are pre-prepared sets of code that can be used by developers in order to create more standardized compliant web pages by easily make use of features of CSS. There are a lot of CSS libraries and tools or frameworks already available for developers, and some of them are more commonly used. Most of these CSS libraries or frameworks include at least a grid. More functional CSS frameworks come with additional JavaScript based functions and more features, but they are mostly unobtrusive and design oriented. This differentiates the CSS frameworks from full JavaScript and functional frameworks.

Some widely used and notable examples of CSS frameworks are Bootstrap, Cube, Base, and Ivory framework.

CSS frameworks offer various tools and modules:

• web typography

• set of icons in sprites or icon fonts

• styling for buttons, tooltips, elements of forms

• reset-style sheet

• grid especially for responsive web design

• parts of graphical user interfaces like tabs, Accordion, Modal windows, or slideshow

• often used CSS helper classes

• equalizer to create equal height content

Cube CSS Frameworks


Cube is one of the most flexible and advanced CSS frameworks, built with technology and integrity in mind. This framework gives developers full power of choice and allows creativity, while not having to worry about all of the technology behind it. With Cube, developers can just focus on the design without boring routine.

Here are some of the benefits of using Cube CSS framework:

• Cross-browser

Cube framework can work on mobile devices and desktops in all modern browsers: IE9+, Safari, Firefox, Opera, and the latest Chrome.

• License

Cube CSS framework is licensed under MIT and is absolutely free to use for both commercial and personal applications.


• line height

All elements and text have applied to them a line-height of 1.618em. No matter what font size you use, this value is universal and perfect for line spacing.

• box-sizing

All elements in Cube framework have property set, border box, and box-sizing. Extra width is not added to elements with additional padding.

• variables.less

You can download the Cube framework with LESS, in order to get the variables.less file. With this file developers get all the settings for Cube, such as font size, font family, font colours, headers size, etc. You can also change any setting you want, of course, and rebuild completely Cube according to your taste and needs.

• grid

Cube is implementing the best practices with grids. No matter what you are working on, the grid behind a framework must be universal and simple. With Cube grid system, developers can project on a high level of abstraction, without the need to waste time on getting accustomed with artificial measurements and units.

Ivory Framework

Ivory CSS Framework

Among the front end CSS frameworks, Foundation and Bootstrap are the most complete and widely-used. However, Ivory framework is another good alternative in the field. Even if it may not be as complete as Foundation and Bootstrap, Ivory Framework is a simpler solution that may be preferred by some developers. It is simple, yet powerful and flexible. Ivory is a lightweight grid based front end fully responsive Web framework that can make front end development easier and faster by handling layouts from 1200px to 320px widths. Its 12 column grid comes with different styles for forms, typography, tables, buttons, pagination, tooltips, toggle-switches, tabs, accordion, and more.

The advantages of using Ivory Frameworks are:

• Flexible Layout

Ivory CSS framework allows for a flexible layout because it can easily adapt to any size screen from TVs to mobile phones. The framework comes with four different width layouts: 960px, 1024px, 1140px, and 1200px. Developers can also define their own width.

• Fluid Grid

Ivory CSS Framework consists of a 12 column fluid width grid. The 12 column is dividable by 2, 3, 4, 5, 6, 8, and 12 equal parts.

• Multi Device Mobility

With Ivory Framework, developers can easily and quickly create layouts that can work on any device.

• Lightweight

Ivory Framework is designed in a lightweight manner.

• Browser Support

Ivory works perfectly on all major browsers.

• More Features

Ivory CSS Framework comes with Buttons, Form controls, Typography, and many other UI components.


Base CSS Framework

Base is a CSS responsive framework that is super simple, and works well on all kind of devices. It is lightweight and fast and comes with all the necessary features that allow developers to get started on any web project.

The benefits of Base framework for web design are:

• Responsive Design
Base CSS framework was created to work on all type of devices and provides an easy way for responsive design.

• Awesome Foundation

Base framework is built on Normalize.css and includes all the styles for lists, forms, tables, typography, block quotes, and more.

• Cross Browser
Base can work as well with older browsers (IE7+) as with any modern browsers such as Opera, Firefox, Safari, or Chrome.

Check out this video to learn more:


Programmers may start coding any project with just a grid, and build from there. They may prefer to have control over as many variables as possible. There are times, however, when this just isn’t practical. If you are building an app, or an exceptionally large and complicated site, you may just not have time to style every single element from scratch, and you don’t need to. That’s when you want a complete framework, with extras.

Author: Cameron Francis Cameron Francis is the Director of eTraffic Group. He has been engaged in all aspects of online marketing for the past 8 years. He is actively involved in SEO, Paid Search, Social Media Optimisation, and Web Design.

Instant Website Analysis

We offer a FREE 20 page anaylsis of your website. This indicates areas that need improving or changed for a positive user experience and increase traffic volumes.

etraffic TV

<… name="allowfullscreen" value="true">

Join the etraffic community

Connect with us on the following social media platforms.


• Social Networks •

• Our Locations •

Click To View Our Contact Details

Level 1, 530 Little Collins Street, Melbourne VIC 3000, Australia | 1300 887 151

Level 2, 50 York Street, Sydney 2000 | 1300 788 679

Level 1, The Realm, 18 National Circuit, Barton Canberra ACT 2600 Australia | 1300 765 708

Level 1, 16 McDougall Street, Milton 4064 | 1300 765 709

220 Varsity Parade, Varsity Lakes QLD Australia 4227 | 1300 887 804

Level 1, Paspalis Centrepoint, 48-50 Smith Street, Darwin NT 0800 Australia | 1300 889 815

Level 18, Central Park. 152-158 St Georges Terrace Perth, WA 6000 Australia | 1300 550 753

Level 3, 97 Pirie Street, Adelaide 5000 | 1300 669 895

Level 6 Reserve Bank Building, 111 Macquarie Street, Hobart TAS 7000, Australia | 1300 885 870

We seek to create long-term relationships
Tell us about your business goals and we will contact you