Why use a design framework?
When I first began coding, I decided to do it all myself. If I did not write out each bit of code myself, I felt I was cheating. It took me a while to realize what I was missing out on. A design framework is not necessary for every project, but in my opinion the benefits of using a good design framework make it close to necessary for any modern web application. While I seem to realize new benefits with every project, for this post I will limit myself to six.
Ease and speed of development
I am a JavaScript developer, not a full-time designer. While many designers like to build a site or application fresh from the ground-up each time, I prefer to hit the ground running.
Using Bootstrap (my prefered design framework), I can focus on functionality and build responsive, modern pages within minutes. All I have to do is build my HTML pages using the design classes provided to me by Bootstrap. I do not have to spend time thinking about paragraph margins or what font to use for code samples. I have a grid layout system available to me from the start, have stylish menus, and pre-built contextual buttons and notification boxes. Even forms are relatively painless. Plus, I have access to cool elements like badges, modals and high-quality glyphicons!
I can create any or all of those elements on my own, but I have to wonder why I would want to! With a good design framework, I can quickly and easily build the pages I need and have most everything I need already available at my fingertips. To put it another way, I rarely need to slow down my programming in order to rebuild design elements which have been built millions of times over by different developers. Why recreate the wheel?
Code Readability/Sharability
When we create our own custom set of style classes for each application we build, we put anyone who reads that code in the future at an unnecssary disadvantage. In my case, I can build an application using Bootstrap and anyone who has a passing familiarity with that framework will be able to look at my code in the future and know what they are seeing. Code readability is greatly increased when you can use a basic set of well-known classes.
Using a well-known design framework makes project collaboration and code sharing dramatically easier.
Modern standards
Some people are full-time designers who are able to keep on top of modern design standards. I do the best I can, but I spend much more time and energy researching and learning the latest JavaScript libraries and technologies. Few people have the time or energy to be on the cutting edge of everything.
A well-supported design framework under active development can give you easy access to the latest design features available. There have been times I did not even know a feature existed until I saw I could do it with Bootstrap. So even if I am not yet familiar with a new design feature available to me, I am able to begin using it quickly. The framework developers do the research, they implement the feature, and all I have to do is call a class!
Also, the world of internet development is a fast-moving and fast-changing world. Technology from one or two years ago is old-school. It is difficult to stay on top of the latest stylistic trends. If I was to rely on my own knowledge, my applications would most-likely look dated by many years. But using a design framework like Bootstrap allows me to create a modern-looking web application even if I am not completely familiar with modern design standards.
Cross-Browser support
One major problem I came across as I first began developing webites was inconsistencies across browsers. I would carefully craft my CSS code exactly to spec but find that what looked great in Firefox looked noticeably different in IE, Safari or even Chrome.
When I use a design framework, I allow the developers of the framework to deal with those problems and inconsistencies. So when I add a class to an HTML element I know that I am always going to get the desired effect! I don't have to personally know all the workarounds for different browsers. That allows me to focus on building a better application rather than spending my limited time and energy figuring out how to fix syling inconsistencies.
Mobile Responsiveness
These days it is always a challenge to make your application look good on the many different screens and displays that people use. Now, we all know how to float elements, how to size elements by percent rather than pixel, and how to use media queries when we need to. But a good design framework can take you 80% of the way there without any extra work on your part.
Bootstrap 3, for example, is designed to be mobile-responsive. I can easily specify how many columns a page should have on different size screens just by adding the rights classes. I can create a navbar will collapse into a hamburger without any extra work on my part. All that work is done for me by the design framework. So all I do is design my page, and then it just works on all devices! It is rarely perfect, but with a few custom classes and media queries I can tweak the page to be just right.
Easy Customization
The best part about a good design framework is that you can customize it to look exactly the way you want. I can download the Bootstrap 3 source code in Less or Sass (SCSS), make any changes I want and then compile it to regular CSS that I can use with my project. So if I want to change the colors, I can open the variables file and change the color variables. If I want to change the height of tabs I can open the navs file and change that. If I do not like the buttons, I can open the buttons file and customize them to my liking.
With a good design framework, I am in control.
So there you have it. Why use a design framework? I use one because it saves me valuable time and energy, it makes my code more readable and sharable, it helps my applications look modern with up-to-date interface syling, it takes much of the headache away from dealing with multiple browsers and multiple screens, and finally, I can easily customize it to look exactly the way I want it to.
Further resources:
Step By Step Bootstrap 3 by Riwanto Megosinarso. (available for Kindle Unlimited)