BuddyCSS: A new CSS framework for people who love making websites

What is BuddyCSS?

BuddyCSS is a relatively new CSS framework, created by French developer Loic Sciampagna.

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.

Usage

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:

<!doctype html>
<html lang="en">
  <head>
    <title>BuddyCSS</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Go to  http://realfavicongenerator.net/ to get your own favicon readable on all platforms -->

    <meta name="author" content="Loïc Sciampagna">
    <meta name="description" content="CSS responsive framework to build awesome websites easily.">

    <meta property="og:url"                content="https://www.buddycss.com" />
    <meta property="og:type"               content="Website" />
    <meta property="og:title"              content="BuddyCSS" />
    <meta property="og:description"        content="CSS responsive framework to build awesome websites easily." />
    <meta property="og:image"              content="https://www.buddycss.com/images/sharer-1.jpg" />

    <link href='//fonts.googleapis.com/css?family=Roboto:400,300,600,700,800,900,300italic,600italic' rel='stylesheet' type='text/css'>

    <!-- All CSS files which are not included in NPM -->
    <link rel="stylesheet" type="text/css" href="css/buddy.plugins.min.css">

    <!-- Header, see component menu to know how it works -->
    <link rel="stylesheet" type="text/css" href="css/buddy.header.min.css">

    <!-- All SCSS files compiled into one CSS file -->
    <link rel="stylesheet" type="text/css" href="css/buddy.min.css">

    <script type="text/javascript" src="js/buddy.min.js"></script>
  </head>
  <body>
  </body>
</html>

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 Yarn or npm i to 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.

Conclusion

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.

Leave a Reply

Your email address will not be published. Required fields are marked *