Difference between Spectre and Bootstrap?

[sandebert]

Hi,

Considering how very much Spectre looks like Bootstrap, both from a visual perspective and also naming convention, it would be good to have some info on what the actual difference is between them.

I understand Spectre is smaller, but what else? My thinking is that Bootstrap is bigger for a reason, but why..? Do they support older browsers, or what's the reason?

[picturepan2]

Hi. Thank you for asking.

Spectre.css is a side project from my years of work. Spectre is designed to be a much smaller basic CSS framework. It provides basic CSS style only and some different parts, like flexbox layout, buttons with loading state, empty states and responsive video, better Asian fonts etc. Also, I add some pure CSS components, like tooltips, to simplify coding. And there is a responsive test tool.

For naming habit, I hope Bootstrap developers can get used to Spectre without difficulties.

Next, I will add responsive email templates and tools for faster development. I know there are some other good frameworks and tools. It is fun to learn and make something new or at least some parts new.

[xori]

@sandebert be wary that you will have to handle mobile navbar collapsing yourself, as there isn't any javascript included in this framework.

[sandebert]

Hi,

Thanks for your reply. But I'm sorry, I still don't really understand the difference. I mean, look at Bootstrap 3.3.6, the minified version takes 118 KB. Looking at the minified version of Spectre, it takes 27 KB. That's 77% smaller than Bootstrap.

I'm having a real problem understanding what features Spectre doesn't have, compared to Bootstrap. After all, there's almost 100 KB difference - why?

Not trying to be a troll or anything, just eager to understand the difference. (And not skilled enough to understand it by looking at the css.)

I understand what @xori says, but I'm not even looking at the js, just the css. @xori, you seem to know a bit about Spectre and Bootstrap, can you explain the difference in features (and therefore size)?

[picturepan2]

@sandebert Because BootStrap provides more styles and options.

For example Table part, BootStrap has Basic, Striped rows, Bordered table, Hover rows, Condensed table, different color classes, Responsive tables. Spectre only provides Basic table, Striped rows and Hover rows.

And BootStrap includes more components than Spectre does.

[sandebert]

Ah, thanks. That clarified quite a bit.

Now I feel an even bigger urge to see a comparison matrix, but I understand if you'd rather focus on improving Spectre. :)

[abacaj]

I think its clear what the differences are... Bootstrap isn't really a library - it's a framework.

Spectre to me, is a library. What makes it a library and not a framework you ask?

• No JavaScript (100% smaller than Bootstrap).
• Uses less css (74% smaller than Bootstrap gzipped).
• Doesn't handle every browser.
• Doesn't handle every edge case.
• Provides a modern approach (Flexbox).
• (This is by far one of the biggest differences) Unopinionated and no dependencies... Bootstrap's JavaScript requires jQuery, a massive dependency.

From Bootstraps docs:

Please note that all JavaScript plugins require jQuery

Should clear it up for you, hopefully.

[sandebert]

Thanks for explaining, @picturepan2. Looking forward to following progress of Spectre.

[AlexByte]

Spectre is a framework.

[chauhankiran]

@abacaj : I don't think Spectre is library, it is a framework. The point that you mentioned are type of bug/enhancement, which does not make it library. Personally I think, whatever follow Hollywood principle are frameworks for me.