It’s no secret that there’s lots and lots going on in back-end web development these days. For instance, debates surrounding node and asynchronicity, have reached a fever pitch and have occasionally felt more like philosophical arguments than technical arguments.
Similarly, there are a lot of things going on in the world of front-end development. There are tons of frameworks available to help you to build your websites or web apps, in terms of functionality and look and feel. In this particular post, UI frameworks will be our topic of interest.
It was all pretty much started by Twitter Bootstrap. It has helped enable developers to whip up some quick templates for website or app without having to worry about getting involved in interface or app design. This will no doubt appeal to any seasoned web/app developer, as they could focus more on the functionality.
Since then, more and more frameworks are emerging. As much as back-end developers can choose their preferred languages, e.g. PHP, Java, Ruby, Python, front-end developers have a variety of frameworks that they can utilise too. Before we go into the pros and cons of using a UI framework, let’s take a look of the features that UI frameworks offer in general.
Features
Grids
Long gone are the days where we used tables to define website layouts. In this era of multi devices, responsive design, frameworks and all this stuff, CSS grids have become more and more popular. The main purpose of these tools is to define a baseline in order to have a consistent and predictable layout in all situations. Flexbox is going to make this even easier, but perhaps not so soon and especially if you need to support older browsers. Read up on Flexbox article by Chris Coyier here.
Responsive
Responsive design works hand in hand with Grids system. Most UI frameworks already help predefine major breakpoints and fluid layout, so that your websites will just flow naturally when the browser size reaches the breakpoints.
Cross Browser Compatibility
Never have to worry about how your websites will look on different browsers. The frameworks would have catered it for you. However, if you need to support older browsers, fret not. Most of UI frameworks won’t break your websites, there will be graceful fallback. For example, if the framework of your choice uses rounded-corners, on browsers that do not support it, you will just see sharp corners instead. However, do make sure that you test your websites or apps on browsers that you want to support.
Typography
Fonts, font sizes, spacing, all have been catered for you. Just type your tags, and ta-da~ You have just been turned into a professional typographer!
Web Components
Header, navs, tabs, tooltips, modals are some of the common web components that most frameworks support.
Buttons & Form Elements
Never have to worry that you forget to style your button states. UI frameworks have done it for you. You can usually choose different sizes and styles of buttons too. Beside buttons, forms are also an important part of the web. Every single website or app will implement them to certain extent.
Mobile First
More and more people are accessing websites using mobile devices. Hence, support for mobile is very crucial for websites and apps as mobile accounts for a huge portion of web traffic. Example for support that UI frameworks provide is larger buttons.
Icon Fonts
Websites are boring without graphical components. Easily include vector icons with an empty <span> or <i> and your products will look ten times better. Note that some frameworks do not include them out of the box in order to reduce the size of the framework. You might need to download the extension separately.
Pro
Rapid Prototyping
If you need to push out a new site or app in a matter of weeks or even days and have a tight budget, UI frameworks come to your rescue. You can grab one of the great templates available, make a few changes, throw in some images and a bit of interactivity and you are done! I mean it, real fast!
Consistency
One of the main reasons Twitter Bootstrap was developed was because Twitter saw big inconsistencies amongst developers working on their projects. This caused some issues both on the development front and the end-user front. Hence, one of the main features that most UI frameworks emphasizes is its consistency and cross-browser compatibility. Things will look more or less the same on Internet Explorer, Google Chrome, Firefox, Safari or other browsers.
Customisable & Extensible
You can customise a UI framework to suit your need and make it your own. You can keep what you need and throw away what you don’t. You can create themes and share them as open source (please do so :)) or even sell them and earn some bucks.
Supports and Updates
Most of modern UI frameworks are open source and available on Github, meaning they are ever-evolving with more regular and constant updates. As soon as web developers find a problem and create a ticket for it, the team working on the framework starts looking to fix it.
Cost Saving
As mentioned previously, most popular frameworks are open source and free, and since it also helps the developer to code faster, the cost will be much lower.
Cons
Uniformity
You must have noticed that most websites developed using UI framework, especially Bootstrap, look kind of the same. Your new website looks just like everyone else’s.
Heavy
This might not be exactly true. But some UI frameworks are bloated even with just the CSS components, not with the Javascript components yet. So, make sure that you choose one that suits your need and if possible just pick whatever components that you need.
Might Not Follow Best Practices
One of the major issues with UI frameworks is that you end up with a whole lot of DOM elements crammed full of classes. This breaks one of the fundamental rules of good web design, the HTML is no longer semantic and the presentation is no longer separate from the content. Front-end purists will find this rather irksome, as it makes scalability, reusability and maintenance that much more of a challenge.
For example, for just a button, you might end up having: <button class=”btn btn-large btn-primary” type=”button”>Large button</button>
Restricts Creativity
UI frameworks are mostly for developers and not designers, which is kind of true. When you base your design on frameworks, your mindset will be fixed. For example, you will tend to design your web pages based on fixed sets of grids because you know what is easy and possible to get done using the frameworks, instead of just coming up with design without having to care so much about the implementation.
You Learn About the Framework and Not the Technology
This is true for any framework, front-end or back-end, UI or functionality. When you use a framework, you learn about how to use it and not the core technology. You might be able to create a website using UI frameworks, but you do not necessarily know about CSS and Javascript.
Best UI Framework?
So what do I think is the best UI framework? Again, as any kind of framework, I don’t think if there is any thing such as best framework. It all depends on your requirements and needs. To find out what suits you best, just download different frameworks and give them a try, look at the documentation and how to use and customize them.
Below are some of the popular frameworks that you could try out.
Bootstrap
Twitter Bootstrap might be the tool you need. If features a very clean typography, form elements as well as almost all you need to design a modern website.
More info: http://getbootstrap.com/
Foundation
Foundation by Zurb is a very interesting framework which is suitable for creating responsive webpages. Foundation comes with a few different layout templates that you can use and save you time when starting a project.
More info: http://foundation.zurb.com/
Compass
Compass uses Sass, an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Definitely worth giving a try!
More info: http://compass-style.org/
TopCoat
A relatively young framework by Adobe for web apps that has been getting a lot of attention lately.
More info: http://topcoat.io/
Pure
A set of small, responsive CSS modules by Yahoo that you can use in every web project.
More info: http://purecss.io/
So, have you used any UI framework? If so, which one and how do you usually use it? If not, why not and do you intend to use it? Do share your view 🙂
cialis
Follow