Spectre: a cool, lightweight CSS Framework

While Bootstrap is probably the most popular CSS framework, and easy to implement, it’s nice to branch out and experiment with different CSS libraries/frameworks every once in a while, just to know what else is out there.

There are many pros of Bootstrap, but the end results can be slower loading times and battery drains, and Bootstrap’s Javascript requires jQuery, a not-very-small dependency.

This is when I came across Spectre, a light-weight, easy-to-implement CSS framework (admittedly, I came across it more by force than choice, as I was working on a project for a company where Spectre was required… causing me to google what the heck it even was).

Some of the pros of Spectre:

1. It’s pretty… check it out; you’ll see.
2. Easy to implement.
3. Lightweight: no JavaScript (100% smaller than Bootstrap), and uses less CSS (74% smaller than Bootstrap gzipped).
4. Easy to use responsive design with a modern approach, with Flexbox.

How to Install:

You can either download the minified Spectre.css file directly, install from CDN, use npm, yarn, or bower to install it.

https://picturepan2.github.io/spectre/getting-started.html#installation

Or you can add it the Rails way with a super handy gem (a friend helped me come across this one):

“There’s a gem for that.”

So what can it do? Spectre covers all of the basic CSS expectations from Bootstrap, such as buttons, forms, icons, etc. It also has it’s own responsive layout grid system, as well as a flexbox grid, and a navbar layout.

It also has a really handy list of other cool, prettily(that’s a word, as far as I’m concerned) designed components, utilities and “experimentals” for you to use and implement just too easily, such as calendars, timelines, comparison sliders, all made of pure CSS.

Check it out, try it out, and let me know your thoughts, any other cool features you’ve found with it, or if you have any CSS frameworks you like using, that are lighter and lesser known than Bootstrap!

Please click 👏 button below a few times to show your support! ⬇⬇

Thanks! Don’t forget to follow Quick Code below.

Find out Free courses on Quick Code for various programming languages. Get new updates on Messenger.