CSS and Javascript Libraries

6 min readJul 31, 2019

Part 1: CSS Libraries

What are libraries?

First off for the uninitiated, CSS is a styling language used to add aesthetics to websites while Javascript is a programming language built specifically to add interactivity and logic to the front-end.

Libraries are essentially bundles of code that are packaged to be used as an ‘easier path’ for achieving the results you want.
If you want to have a good selection of fonts, icons and visual detail on your site without spending the next two days writing multiple CSS pages. Then just attach a link tag to a CSS library and you can pick and choose what elements you want to affect, like selecting from a catalogue and by some kind of sorcery, there’s now a brand spanking new Jumbotron header that would’ve originally taken a good hour to code.

JS libraries take things up a couple more notches by appealing to many facets and requirements such as graphs, animations and even quicker, more responsive DOM manipulation.
You can effectively build web-based games and data visualisation components in the space of a few days.

Personally I was against libraries for a time, but when you realise the amount of time you save should you choose to use one, you also realise the perks of your decision.
On top of that, you have the option of adding your own code to customise your web application further and not just having to rely on a library.

Part 1: CSS

Difference between Less and Sass

I could honestly make a whole blog post about this, but its best to just keep
it short and sweet

Less and Sass are preprocessors… how do I explain this.
Imagine a novel, and i’m talking old school paperback. That’s your CSS.
Now imagine that same book is converted to digital format and is now on your ebook reader, this book can now have user notes, multiple bookmarks, in-built definitions, find by word feature and many more. But in the end, it’s still the same book. This is what a preprocessor does.
It takes the fundamental concept and houses it in a new shiny armour that has a bunch more bells and whistles despite that the person wearing the armour is still the same person.

Less stands Leaner Style Sheets and its usually the choice for those who want to focus on more Javascript within their web pages.
Expect your CSS code to be more syntactically sweet as well as the ability to use mix-ins, calculations and functions.
It comes with its own JS file. While recommended not to edit it, there’s no problem tinkering with the properties if you know what you’re doing.

Sass stands for Syntactically Awesome Style Sheet, yeh I know it’s a little silly.
Sass is essentially the same as Less but better implemented for Ruby on Rails applications, so you’d be integrating the functionality in to your project through a Gemfile.
There are syntactical differences, for example, Sass uses $ for variables whereas less uses @.

Libraries

The two most well known CSS libraries are Bootstrap and Foundation.

They both give you the ability to instantly enhance visual aspects of your web page with by attaching the stylesheet directly to your HTML file in within the <head> </head> tags and attaching a class to your elements to create the effect you desire.

For example, this is a dropdown menu that uses Bootstrap. It also has the ability to resize adaptively with window resolution changes.

While the code below doesn’t refer to the animation above. It does provide a similar functionality that you can use for your own website.

// HTML<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">    <a class="navbar-brand" href="#">Animated Dropdown</a>    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">    <span class="navbar-toggler-icon"></span>
  </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Click Me!        </a>
          <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
          <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container text-center">
  <h1 class="mt-5 text-white font-weight-light">Animated Bootstrap Navbar Dropdowns</h1>
  <p class="lead text-white-50">An attractive yet subtle dropdown animation for dropdown menus loacated within a Bootstrap navbar</p>
</div>

It looks like a lot to take in but all you really need to take from this is the use of classes which when coupled with Bootstrap’s library, will give you the extra menu capabilities

The CSS file is more manageable to read.

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

Don’t worry, there isn’t a JS file for this.
But do keep in mind that Bootstrap uses jQuery, as do many CSS libraries out there, so it’s helpful to learn some jQuery to understand whats going on under the hood.

Comparisons

I’ll be honest, due to my lack of experience with libraries, the information within this section was taken from www.skysilk.com and the library home sites. They provide more thorough pros and cons than I could at this point.

Bootstrap

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mix-ins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Pros

Easy to learn
Ability to make great looking sites in a small amount of time
Hundreds of templates and resources online to learn from and use
Great documentation

Cons

Harder to learn at an advanced level
Adding too many classes from Bootstrap can make it harder/messy for custom styles
Sometimes feels as if there’s too much — can create complexity

Some businesses that make use of Bootstrap are Spotify, Twitter, Intel, Walmart and Udemy.

Foundation

A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customisable.

Pros

No need to specify heights and widths as it uses REMs by default
Extremely responsive design for websites with simple UI and more straight-forward design
Offers services for sites as well as emails.

Cons

Not beginner friendly — Many will recommend you have prior experience with vanilla CSS and/or other frameworks
While the design components are easier to customise, they’re not as attractive out-of-the-box

Some businesses that make use of Foundation are Mini Cooper, Subaru, Pixar, Amazon Careers and Barclays.

Other notable CSS libraries include:

Materialize CSS
Semantic UI
UIKIT
Material UI
Bulma

Summary

While it can take some time to learn a new library. It’s usually worth the effort when you see how quick and effective the results are.
It’s recommended to start with a library that has plenty of popularity and support so if you ever get stuck, you can quickly find the solution to your problem.

It’s understandable if it feels a bit like cheating by using a library but remember that developers are lazy and it seems both non-sensical and counter-productive if you were to code some functionality in to your website that could have been referenced in much easier and resourceful way.
If the capabilities of a library interest you, then by all means you should take some time to try one out.

I hope you enjoy all the new possibilities made available to you.
Stay tuned for part 2, which covers JS libraries.

— Code in Peace