Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

BuddyCSS: A New CSS Framework for People Who Love Making Websites

DZone's Guide to

BuddyCSS: A New CSS Framework for People Who Love Making Websites

We examine one of the newer CSS frameworks out there, BuddyCSS, and weigh the pros and cons of this interesting framework.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

CSS frameworks are a real time-saver when it comes to quickly and efficiently create beautiful websites. Today, let's have a look at BuddyCSS, a promising newcomer in the world of CSS frameworks.

What Is BuddyCSS?

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

The idea behind BuddyCSS is to keep coding fun. Therefore, the framework is mostly made for front-end developers who enjoy writing 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 the GitHub 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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

Topics:
css ,web dev ,front-end development ,web application development ,buddycss

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}