Sometimes you should ask yourself, why you need to do the same thing everyday when there’s a new bridge to shorten the path. Think of web frameworks as bridges that will help you code faster and easier. Did you notice I didn’t include the word “better” in the last sentence? Faster and easier doesn’t always mean better, but we will get to that later.

First things first, so what is a framework really? It actually depends on the context it is used. It can be defined as an abstraction tool that makes it easier to develop applications and reuse code.

“The framework aims to alleviate the overhead associated with common activities performed in Web development… and they often promote code reuse.”

Like everything else, when it comes to its use, a framework has advantages and downsides. Below is a list of some important facts you should consider, before you decide to start learning or using one.


Table of Contents:

  1. Pros And Cons Of Using Web Frameworks!
  2. 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates
  3. Chris Coyier Shares Web Design Opinions That Might NOT Be for You

Pros And Cons Of Using Web Frameworks!

Like all things in life, web frameworks have their pros and cons. So here we are going to take a look a them.


 

Pros

Pros of using a framework

Efficiency

Tasks that usually would take you hours and hundreds of lines of code to write, can now be done in minutes with pre-built functions. Development becomes a lot easier, so if it’s easier it’s faster, and consequently efficient.

Security

A widely used framework has big security implementations. The big advantage is the community behind it, where users become long-term testers. If you find a vulnerability or a security hole, you can go to the framework’s website and let the team know so they can fix it.

Cost

Most popular frameworks are free, and since it also helps the developer to code faster, the cost for the final client will be smaller.

Support

As any other distributed tool, a framework usually comes with documentation, a support team, or big community forums where you can obtain quick answers.

Cons

Cons

You learn the framework, not the language

I believe this to be the major problem. If you’re using a framework and you know very little about the language behind it, you will learn the framework and not the language itself. The way you code jQuery is different from the way you code javascript. Simple put, if you know jQuery, it doesn’t mean you know javascript.

Limitation

The framework’s core behaviour can’t be modified, meaning that when you use a framework, you are forced to respect its limits and work the way it is required. Make sure you choose a framework that suits your needs.

Code is public

Since the framework is available to everyone, it is also available to people with bad intentions. It can be studied in order to know how things work and to find flaws that can be used against you.

JavaScript Frameworks

jQuery

http://jquery.com/

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery


Prototype

http://www.prototypejs.org/

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Prototype


Mootools

http://mootools.net/

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

Mootools


PHP Frameworks

CodeIgniter

http://codeigniter.com/

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.

Codeigniter


CakePHP

http://cakephp.org/

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

CakePHP


Symfony

http://www.symfony-project.org/

Symfony is a full-stack framework, a library of cohesive classes written in PHP.

Symfony


Mobile Frameworks

jQuery Mobile

http://jquerymobile.com/

Query mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS.

jQuery Mobile


iWebKit

http://snippetspace.com/projects/iwebkit/

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

iWebKit


DHTMLX Touch

http://www.dhtmlx.com/touch

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touchscreen devices.

DHTMLX


Ruby Frameworks

Ruby on Rails

http://rubyonrails.org/

Ruby on Rails is an open-source web framework that’s optimized for programmer happiness and sustainable productivity.

Ruby on Rails


Padrino

http://www.padrinorb.com/

Padrino is a ruby framework built upon the excellent Sinatra Microframework. Sinatra is a DSL for quickly creating simple web applications in Ruby.

Padrino


Bowline

http://bowlineapp.com/

Bowline is a framework for making cross platform desktop applications in Ruby, HTML and JavaScript.

Bowline


CSS Frameworks

Blueprint

http://www.blueprintcss.org/

Blueprint is a CSS framework, which aims to cut down on your development time.

Blueprint


960 Grid System

http://960.gs/

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

960 Grid System


YUI2

http://developer.yahoo.com/yui/grids/

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.

Yui2


Considerations

Now you understand why I didn’t include the word “better” on my first sentence. A framework can bring you several advantages and may suit your needs, but it also brings downsides to your projects. There are hundreds of frameworks out there, so be sure to choose carefully, if you plan to use one in the future.

Now we are going to share some more frameworks that could cut off the time to create your next project.


20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point. This time we will talk a little about frameworks and other tools, like generators and templates.


HTML5 Boilerplate – Templating that fits all needs

This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).

Cool features:

  • Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
  • Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
  • Custom install setup – So you can choose what you want in “your” boilerplate
  • Cross-Browser compatible
  • HTML5 Ready
  • Print stylesheet ready to use

52framework – Supports almost anything

I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and  are planning to use almost all power of HTML5.

What do I like:

  • Almost anything you want with HTML – Local Storage, video player, canvas, forms…
  • A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
  • Video Tutorials – Yeah, it makes even easier to understand 52’s workflow

G5 Framework – Good tools collection

Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.

As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.

Perkins – Lighweight and LESS

I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.

Sprites.js – Animation framework (HTML5 support, of course)

Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?

Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.

Lime.js – Gaming framework

Just take a look at the demo games, and tell me if it isn’t amazing.

Some features (HTML5) that you can use on it:

  • Optional install – For mobile users it is really good, just bookmark your game and you’re done
  • KeyFrame animations
  • Full support of sprite sheets
  • Stroke support – So you can draw a stroke around shapes
  • Good documentation – Just take a look at all classes you can use with it, pretty cool :D

HTML5 multimedia framework for WordPress

If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.

The framework currently supports:

  • mp4 (h.264,aac)
  • ogg (theora,vorbis)
  • mp3 (audio only)
  • webm (vp8,vorbis).
  • wmv (via MediaElement.js)
  • flv (via MediaElement.js)
  • wma (via MediaElement.js)

Modernizr – HTML5 & CSS3 with fallbacks

Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.

Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.

It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.

Select[ivizr] – CSS3 Selectors for IE

IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.

You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.

CSS3 button framework

With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.

They are all CSS3 ready, and can be easily customized.

Templates – General HTML5 and CSS3 samples

Coming Soon Template

Design Company

Real State

Free HTML5 & CSS3 theme

Create An Elegant Website With HTML 5 And CSS3

Starter Pack

Much more inspiration at HTML5 Gallery

Some useful tools

CSS3 Button Maker

CSS Transforms code generator

CSS3 Gradient generator

CSS3 Drop Shadow Generator

CSS Generator for radius, shadows, rgba, @font-face, columns and more

The best @font-face generator I’ve ever seen

HTML5 Visual Cheat Sheet

I certainly have missed some other good resources. Why don’t you comment and share what you know?

In the next section Chris Coyier will share some off his thoughts on web design option, regarding frameworks and some other things.


Chris Coyier Shares Web Design Opinions That Might NOT Be for You


The Podcast Episode with Chris Coyier

Chris Coyier is a man who wears many hats. This might not sound very surprising as there are a lot of people who can do the same. However, not all people can look good in different types of hats and that’s where the comparison ends because Chris Coyier manages to look good wearing each one of them.

The hats in question are, of course, the things Chris is involved in – that of a designer at CodePen, as a writer at CSS-Tricks, and as a podcaster at ShopTalk. You can also include in the list as that of a ukulele player. Oftentimes compared to Jeffrey Zeldman, Chris is considered as one of the top guns in the web design industry. For a lot of web designers, he is the modern-day web design god whose very path they unabashedly worship.

Worship might be too strong a word to use and Chris Coyier might not like the description, but you cannot deny the significant impact he has made in the web design industry. Evidence of it was the reaction of community members had when they heard that 1stWebDesigner is going to have a podcast interview with him.

On Themes and Frameworks

[ctt title=”People want an answer but an unsatisfying answer is irresponsible. In order to give a concrete answer that will satisfy your clients, you have to know who you are, your abilities, your client, and your client’s needs. ~ Chris Coyier” tweet=”People want an answer but an unsatisfying answer is irresponsible. In order to give a concrete answer that will satisfy your clients, you have to know who you are, your abilities, your client, and your client’s needs. ~ Chris Coyier http://ctt.ec/UxQ4V+” coverup=”UxQ4V”]

One of the most talked about topics in the web design community, especially in the 1stWebDesigner community, is WordPress. And when the subject of WordPress is brought out, you cannot avoid talking about themes and frameworks.

So, we asked Chris which is better in delivering custom solutions to clients in the fastest way possible – themes or frameworks?

Every web designer or web developer knows the difference between these two – the framework is used to develop the theme while the theme allows you to customize the base. To simply put it, the framework is the base while the theme is the finished product.

However, even though web designers know the differences, it seems that it stopped their understanding to the definition; thus, the debate. The key that every web designer should bring to heart is – DIFFERENCE. Therefore, there should not be any comparison because there is nothing to compare. Moreover, one cannot exist without the other. And even if you can use each separately, you won’t be able to achieve the same results as when these two meld together.

As Chris Coyier said, it is irresponsible to give your client an incomplete answer without trying to know every aspect of your business, your talents, and your clients. There is too much missing information in this conversation to ever prescribe a solution.

The most important answer rather is what does the framework do or what kind of functionality does it bring to the table. No matter what kind of things it offer if you think it will help your client, then you can use it.

Why WordPress?

[ctt title=”Just because I have trouble once every six months is indicative to move platforms. ~ Chris Coyier” tweet=”Just because I have trouble once every six months is indicative to move platforms. ~ Chris Coyier” coverup=”2bQ8j”]

Aside from the fact that WordPress powers some of the big-name websites, there is a lot going on in some websites that only WordPress can handle. Yes, there are other amazing platforms out there but there are specific features that can only be delivered by WordPress. A good representation of what WordPress can do is CSS Tricks, which is both a blog and a forum.

As a forum, CSS Tricks use the plugin bbPress which is powered by WordPress. Then, there’s also Restrict Content Pro, a membership content log in area which works well for both blog admin and community members. This plugin enables you to control which posts can be accessed by what type of readers you have. It also help you create and track subscription level members.

Aside from this, it also has an authentication and user rights features which allows you to  manage the site, editors work with content, authors and contributors write that content, and subscribers have a profile that they can manage. This lets you have a variety of contributors to your website, and let others simply be part of your community.

I agree with some people saying that a static site generator is much better than WordPress because there’s nothing for hackers to hack in there. Security is the main strength of static generators because no matter how badly designed it is, it does not affect the security and performance of the site. However, just because I have trouble once every six months is indicative to move platforms.

On Building Themes and Frameworks

When asked why he doesn’t build his own theme since he has the expertise and experience to build a really great one, Chris said that he feels envious of people who make a lot of money and running their own company selling these themes on ThemeForest. However, it doesn’t feel right for him to do so. He doesn’t have anything against people who let people sign up so they can have as many themes as possible but how many themes do people really need?

It is a given that when you designed a theme loaded with features it will sell more. Simply, the more it can do, the more money it could make. On the other hand, the most ideal thing to do is create a performance-focused WordPress theme but it won’t sell as much as the theme loaded with features.

There is a lot of debate going on about this issue. It is probably a hot-button topic in the web design community but it happens – those themes who make a lot of money usually makes money for the wrong reasons. It is easier to make money for the wrong reasons.

Also, most features-loaded themes tend to slow down the site. However,  you can still make a performance-driven theme with lots of features without slowing down the website by offering 50 features with back end codes that know which features are enabled at the moment. There is a trade-off when you’re talking about performance – the number and size of the request. The size of the request will be bigger but at least we are only loading a single resource but Jetpack also have these issues.

Chris Coyier can surely build a performance-driven site for the right reasons but that would become his full-time job because it will consume all his time from the coding to the marketing aspect. However, he doesn’t want to give-up all the things he’s doing now because he loves what he’s doing now.

That is also the same reason why he doesn’t build a framework. He is more than happy to build a performance theme or bare bones which people can use for their  mobile first website, or create an artist theme with artist-like features, like carousel or store.

For Chris Coyier, he simply wants to build something that would help people solve their specific problems.

3 Must-Haves in 2015

Aside from WordPress, we also asked Chris what his 3 must-haves are for 2015 aside from performance and technicality. They are – https, SVG, and front-end arhitecture

HTTPS is very important for websites first and foremost for  security reasons. The longer your website exists on the Internet, the more people will view it in a screwed-up way, like snooping into your topic and hacking into your database. HTTPS protects you from all these risks because it runs on SSL and for people who try to get into your system must have a code in order to decrypt it.

Another item that should be on your radar is SVG or scale vector graphics which makes the file size smaller and renders crisper.  Nowadays, most of the solutions that exist to fix resolution-based issues, such as retina screens, involve either a large amount of unnecessary data downloaded or compromise for one browser or the other. This makes us rely on the speed of the data download-speed bottleneck to bring higher resolution images to devices that are often on wireless data networks. Not a very ideal solution. This is where SGV comes in because it offers a way to do full resolution graphical elements, no matter what size screen, what zoom level, or what resolution your user’s device has.

If you want to know more about SVG and what it can do, visit CSS Tricks and read Chris Coyier’s article called, A Compendium of SVG Information. Here you can learn precious nuggets as well as tips and tricks about SVG.

The third is front-end architecture, such as BEM, OOCSS, and more. This has become a trend because every time you mention it, comments on forums just flare up. It is also important when you’re thinking long-term as you build your website without it ending as a disaster. The answer- you have to make the right decisions when you’re designing your front end. Therefore, if you don’t understand the front end stuff, you’ll end up with a disaster.

Conclusion

Web designers, in reality, are a little “mono-cultural.” Just look at the conferences for web designers and everybody is using Macs and Chromes. This has to change and see people developing an IE on Windows to give us a wider perspective.

 

 

Editorial Team

Written by Editorial Team

  • Mikul

    did you ask if you could use this photo? I have my photos all marked all rights reserved and with my name on them. You have removed my name.
    It has been sold through Getty images and they have licensing rights that pay me when it is used.
    If you’d like to pay me royalties for it, then I will allow you to use it.

    • JoeCasa

      I was curious when I saw this comment so I followed the link in the photo and this one is marked “some rights reserved” and you don’t seem to have your name water marked on it. You did reserve the right of attrition so they do need to acknowledge the source of the image. If you really want it to be all rights reserved, you should go mark it as such.

  • Fabulous post. Thanks for putting all this work where we can benefit from it!

  • novini

    Firstly if you are working for a web company you must know how php frameworks are working and you must to learn about that. May be php frameworks are fastter than traditional php programming codes but you must spend some days or weeks learn them.

  • Sonia

    Great post with learning ideas some of which is really new information for. However, i am learning. Thanks for the post. Your blog is very interesting.

  • Mikul

    This photo is not a creative commons license and is available from Getty images.
    Please contact me

  • Ruben D’Oliveira

    Thank you for the suggestions, Gregory. I’ve just included a few for the sake of simplicity. There are hundreds of frameworks and everyone has their favourites. But thank you for the reference.

  • Wype

    User of Ruby On Rails and jQuery, I’m of course an advocate of frameworks. I understand people who are concerned about performance, but when a web application becomes complex, these cons attenuate. In fact in a large project, it can be more optimized to use a framework and its well-coded methods!

  • Jasmine

    I think the biggest advantage on using frameworks is that it gets the job done more quickly. I like jQuery the most and have been using it in many of my projects. I have yet to try CSS frameworks though… need to check on that. :)

    • Ruben D’Oliveira

      Hi Jasmine.
      Yes, efficiency is definitely the big advantage. Thanks for reading :)

  • Toutix

    Worst blog post ever on frameworks. You’re a designer not a programmer… How can someone know JQuery and not know Javascript?!? Please learn programming before posting another word on frameworks…

    • Ruben D’Oliveira

      Hi Toutix.
      First of all, inputs are always welcome.
      Despiste the fact that you like to “assume” things, I will try to post one more word on frameworks for you.
      Let’s first read things as they are: “The way you code jQuery is different from the way you code javascript. Simple put, if you know jQuery, it doesn’t mean you know javascript.”

      I actually should have written “if you know javascript, it doesn’t mean you know jQuery”. However, instead of pointing the “error”, you decided to take things down, and that’s a shame.. for you. Nevertheless, I believe the idea behind the sentence is pretty clear, and isn’t totally an error.

      • aditia

        Hi Ruben, nice read, but I think a framework can help us to learning the core language itself, for example from my experience i’m using jquery and there is something that jquery cannot handle, it forcing me to learn how to do it in pure javascript, framework really saving time if your project in hurry,if you want to learn the deeper the language like pure javascript or php yup it’s better without framework

      • Hey,
        I think even your first observation was right, it just depends on what do we mean by not knowing.. we have taught our programmers how to use jQuery w/o teaching them native JS, and afterwards they were not able to reproduce the same functionality in native JS…
        Just to give a very basic example, jQuery has built-in validation and error checking everywhere, something you have to add explicitly to your native JS code, so they code just stopped working at the first error.
        I wanted to add a note on the speed as well, but that would be another page so I just finish it here :P

        Cheers

  • Elliot

    A whole other framework worth considering are CSS ones like Less for writing dynamic CSS & using variables http://lesscss.org/

    • Ruben D’Oliveira

      Thanks for the suggestion, Elliot :)

  • Dominik

    There’s one important “Con” you overlook: Performance.

    Frameworks often come with a ton of functionality and you usually need only a tiny bit of that in your app. You need to load (and compile) includes, functions could handle various special cases while you need just one, …

    Every page loads jQuery nowadays – to do what? A little fade and innerHTML replacement?

    Want to use the Zend Framework MVC? Get ready to force your webserver to load 25 (!) includes on every page.

    Call me old-school, but is optimizing your code dead?

    • I totally agree Dominik

      This is one of the things I don’t get….

      Why use a massive code library to e-mail a form…!!

    • Ruben D’Oliveira

      Thank you for your input.. you are absolutely right. I’ve missed that one.
      The purpose is to list just the main pros and cons, and get criticized with people’s own ideas.. but performane is definitely a major con. I will include that one later.

      Thanks

    • I completely agree with this comment, in fact, that is one of the main reasons I myself choose not to use frameworks where possible. 70kb of jquery for an image rotator? Pfft You can easily accomplish the same in ~2kb of javascript. (I don’t think people remember that page speed is a factor when it comes to SEO,etc) Instead of learning someone elses framework I consider it good practice to learn the underlying language and perhaps develop your own framework or list of functions / objects which can then be easy apated to customers websites without requiring 5 extra javascript includes.

    • Shane

      What does it matter when my internet downloads at 700kbps? I can download that extra JQuery file in seconds and it’s in my cache for the rest of the site.

  • “You learn the framework, not the language” – totally agree. First you need to learn a programming language. And only then can think how to make writing programs easier to use ready-made solution.

  • Craig

    In our opinion, the pros definitely out weigh the cons.

    • Ruben D’Oliveira

      Every case is different. On a general concept, frameworks exists to simplify your work so yes, from that point of view you are correct. Thanks for reading

  • chux

    Add to php frameworks yii. Is by far the best out there

    • Ruben D’Oliveira

      Hi Chux. For the sake of simplicity I’ve just included a few, so I hope you understand. Thank you for your input :)

  • Fabio

    What do you think about sencha and sencha touch (ext js)?? Why no one words abput them? I have to choose one framework to learn for mobile/tablet development (after trying to solve too many problems through css coding) and I’d like to know your opinion..

    Always a great work, thank you

    • Ruben D’Oliveira

      Hi Fabio.
      I didn’t try Sencha yet.. but I believe it is indeed one of the best frameworks out there for that purpose.

      Let me know if you have any more questions. Thank you