Don’t you just enjoy starting work on a new project? The sense of adventure that comes with breaking new ground is nearly intoxicating, and I’m yet to meet a web designer who doesn’t derive a ton of excitement from bringing new ideas to life.
What is a Framework?
- Front-end frameworks – This type of framework is used to design the presentation (front-end) layer – the layer that users see. Front-end frameworks are further divided into two sub-categories: complete and simple frameworks.
- Back-end frameworks – This type of framework is used to build the application (back-end) layer – that behind-the-scenes layer that is never visible to users.
In today’s post, we will concern ourselves with front-end frameworks. Let’s start with a question for a subtitle.
Do You Really Need a Front-end Framework?
Now that you have a clue what a front-end framework is, do you really need to use one as a web designer? Yes, because of the following advantages:
Advantages of using front-end frameworks
- A framework speeds up the development process as you’re provided with plenty of starter code to work with
- Frameworks comes with ready-made solutions to common CSS issues
- A majority of front-end frameworks are responsive-ready allowing you to create browser-compatible websites
- Frameworks boost the maintainability of design projects
- Frameworks utilize the best web standards meaning you get clean code (No bloat)
- A framework can help you learn good web design practices
- Collaborating on projects is easier with frameworks
Disadvantages of using front-end frameworks
- There is a learning curve before you can use the framework like the pros
- Some frameworks mix content and presentation
Quite some disparity between the advantages and disadvantages, huh? My word is not the law though, so you can choose to continue writing code from scratch or adopt a framework (or better still, build your own) and save time and effort. If you choose to use a framework, you will find the following section quite resourceful.
Examples of Front-end Frameworks
Earlier, we found out that front-end frameworks are subdivided into Complete & Simple frameworks. In this section, we will summarize a couple of complete and simple frameworks to give you a nice collection from which to choose. Enjoy! Let us begin with…
Complete Front-end Frameworks
This type of framework offers plenty of features such as alerts, navigation, image frames,, popovers, HTML templates and much more.
Built with the powerful CSS preprocessor, Sass, Foundation 5 is a fully responsive front-end framework that is easy to learn (for beginners) and code. It’s the fastest build yet and ships with a ton of cool features to help you to develop websites and web apps faster than ever before.
Currently at version 2.6, Gumby is a highly flexible framework that is crafted with the power of Sass. According to gumbyframework.com, Gumby is syntactically awesome, brilliantly flexible and insanely simple. You simplly have to try it :).
This is the front-end framework you need as a professional developeer. It’s built using minimalist approach but it’s still enough what with its wide range of features. It’s fully responsive, uses the Revolution Grid and offers you great typography among other things. With this framework, you have plenty of custom styles and design freedom.
What a beauty! Skeleton is a wonderful (not to mention visually appealing) framework for creating beautiful, responsive and mobile-friendly websites. This is exactly what you need for rapid website development.
Other complete frameworks include:
Moving on, let’s look at some simple front-end frameworks just to balance the scale.
Simple Front-end Frameworks
Simple frameworks are commonly known as grid systems and offer lesser features compared to complete frameworks. All the same, they are just as suitable as other frameworks. Without further ado:
Responsive Grid System by Denis LeBlanc
Renowned web developer Denis LeBlanc has something for you: a fully responsive grid system that will help you to develop responsive sites faster than ever before. Believe responsive web design is challenging? You haven’t tried the responsive grid system by Denis.
Responsive Grid System by Graham Miller
This easy to use CSS framework is exactly what you need to take responsive web design by the horns. It was inspired by Ethan Marcotte, a web developer and author at A List Apart.
960 Grid System
Here comes the 960 Grid System, the framework of choice for many a developer. This framework gives you plenty of options to build any responsive website imaginable.
Based on Natalie Downe’s CSS systems, empowered by Sass and simplified with Compass, Susy is the framework you need to bring your new ideas to life. You can use it with various platforms including WordPress, Rails and Django.
Other simple frameworks include:
Are you still with me? If so, let’s move on to the next part; choosing the best (right) frameowrk for your projects.
How to Choose the Right Front-end Framework
Below, you will find a few considerations to keep in mind when choosing a front-end framework:
- Learning curve – Some frameworks are a breeze to learn and work with. Others, not so much. The rule of thumb here is to go for the framework you understand well.
- Ease of installation – There are frameworks that are easy to setup but others take time and effort to configure. I don’t need to tell you which to choose.
- Options – You should only go for a framework that offers plenty of options. This way, you can do so much more.
- Integration with other systems – Does your framework of choice play well with other systems? No? Throw that one away and get a better alternative.
- Support – We should all aim at acquiring a framework that guarantees lifetime support and updates.
With those five pointers, we end this guide hoping you can make the right choice as far as front-end frameworks go. Have something to add to the conversation? Don’t shy off, we live for the comments :). Ciao!