What is BuddyCSS?
The idea behind BuddyCSS is to keep the coding fun. Therefore, the framework is mostly made for front-end developers who enjoy to write their own code and see a CSS framework as a starting point instead than a complete solution. The name Buddy comes from the fact that its creator sees the framework as a work buddy, helping you with tasks, but letting you work your own way.
As a result, BuddyCSS is pretty lightweight, which is very good news now that website speed optimization is so important in order to guarantee a good usability for your visitors as well as to keep your SEO rankings high.
Pros and cons
Now that I’ve introduced you to BuddyCSS, let’s have a closer look at its main features, pros, and cons.
For starters, BuddyCSS looks great. The look and feel is what users generally notice first when using a website, so it’s great news that BuddyCSS looks amazing out of the box. The framework uses Google fonts and FontAwesome 5 (free), for a beautiful end-result.
Secondly – BuddyCSS is well written, easy to use and well documented. If you have some HTML/CSS experience, no way you’re gonna get lost. Featuring the most used website components (navigations, flex grids, fullscreen, paginations, form elements, etc) BuddyCSS will help you make websites that look great, quickly and efficiently.
BuddyCSS is not dependant on jQuery. While I really like jQuery, I love the idea of not being forced to use it in just like any projects, as you sometimes just don’t need it.
And at last but not least, BuddyCSS is free and updated frequently, so there are many things to expect in the near future.
So now that we have seen what we can do with Buddy, how about using it and get a new project started?
There are two main ways to use BuddyCSS in your project. The first way is the “ready to use” mode, which simply consists of importing the BuddyCSS files into your project. Buddy’s website features a HTML starter, which I’ve reproduced below:
If you have little experience with front-end development, you should already know what to do: Download Buddy, put it on your server and start editing the HTML starter provided. Simple as that, your project is ready and now only needs your creativity.
The second mode is for more advanced users and is provided with Gulp, SASS, and Babel. Installing the full-mode version isn’t complicated, all you have to do is to follow the following steps:
- You can go to the github repository page or just copy/paste the URL below:
git clone https://github.com/BuddyCSS/BuddyCSS.git
- Once BuddyCSS is on your computer, use
npm ito install it.
- Now use the command line gulp to build your project and open automatically a new tab with a ready website.
- Don’t forget to check the files structure.
That’s it. Now you can explore the documentation to see how BuddyCSS components work and how to use them in your own projects.
So what to think about Buddy? Well, I must admit that I had a very good time playing with it for this review. The ease of use, flexibility and its gorgeous look are, in my opinion, its biggest strong points. If you enjoy making websites, give it a try – You won’t regret it.