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.
But after doing it for a while, you become tired of re-inventing the wheel every time you start a new project. I will explain. Every website utilizes a similar (not identical) base layout. We have the header, the main content area, the sidebar and ultimately, the footer. Some base layouts might include JavaScript extensions and so on but that’s besides the point. Coding this base layout every time you start working a new design can quickly take the fun out of your job. Enter frameworks and your day is saved.
What is a Framework?
According to Awwwards, “…a framework is a package made up of a structure of files and folders of standardized code (HTML, CSS, JavaScript etc) which can be used to support the development of websites, as a basis to start building a site.”
In layman’s language (for the sake of starters), a framework is a collection of tools for building websites and other web applications. It usually contains production-ready HTML, CSS and JavaScript files. And just to get it out of the way, there are two general types of frameworks:
- 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.
Foundation 5
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.
Bootstrap
This front-end framework is “…sleek, intuitive and powerful.” Are they just talking a big one? Let’s find out. Bootstrap is fully responsive and packed with cool features such as JavaScript plugins, forms, a web-based customizer and dozens of various other components.
Gumby Framework
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 :).
Kube
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.
Skeleton
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:
Mueller Grid System
Brought to you by vonautomatisch, Muller Grid system allows you to create responsive layouts with columns, templates and so on without ever breaking a sweat.
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.
Susy
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.
Conclusion
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!
