
Mini.css: Minimal, responsive, style-agnostic CSS framework - zoria
https://chalarangelo.github.io/mini.css/index.html
======
jc4p
The framework being advertised as a minimal lightweight framework and having
its size compared to the biggest frameworks is a bit off-putting to me.

I get that they wouldn't want to advertise their competitors, but the
comparison matrix on the page makes mini.css seem tiny, where as a google
search shows it's the biggest popular framework like this.

Mini.css is 7KB gzipped, Milligram[0] (the first google result I see for
"minimalist css framework", mini.css is second) is 2KB gzipped. Pure.css[1]
(the third result) is 3.8KB gzipped.

[0] - [https://milligram.github.io/](https://milligram.github.io/) [1] -
[https://purecss.io/](https://purecss.io/)

~~~
franciscop
Such a pity you didn't include my own, Picnic CSS[2]. One of the main features
is _Lightweight_ (7kb min+gzip, same as mini), and it is also popular (2177
stars). It focuses on _beautiful_ and cohesive components out of the box:

[2] [https://picnicss.com/](https://picnicss.com/)

~~~
jc4p
Sorry I was mostly going off the google results. Your library looks really
nice, the SCSS variable changing is awesome!

~~~
franciscop
Thanks! It's a pity that the SCSS is basically undocumented, as I use it in
most projects and it has really awesome features that only I know. But the
time sink would be tremendous and I'm focusing on another project right now.

~~~
jeffjose
Pedantic. Wondering why you used 'its a pity' twice. I want to believe it was
pure luck, but otherwise it sounds snarky.

~~~
franciscop
I guess it's a translation issue, no need to insult me. The tone was intended
to be totally different, the first one like "hey take a look at this" and the
second one more like "I wish I could have done it" (and because of the
different feeling I didn't realize I had already written the same expression
before).

------
mwcampbell
To quote Joel Spolsky [1]:

> For review: Bloatware and the 80/20 myth. No matter how much it bothers you
> neat freaks, the market always votes for bloatware.

See also [2].

Basically, one peron's bloat is another person's necessary features.

Hell, I should have posted this on the Electron rant thread the other day.

[1]:
[https://www.joelonsoftware.com/2002/04/07/20020407/](https://www.joelonsoftware.com/2002/04/07/20020407/)

[2]:
[https://www.joelonsoftware.com/articles/fog0000000020.html](https://www.joelonsoftware.com/articles/fog0000000020.html)

~~~
matwood
This is the old argument about replacing Excel. No one uses all the features
offered by Excel, but every feature offered is used by someone.

~~~
jakewins
And a nice illustration for why startups often do well focusing on very
specific use cases first.

Replacing Excel for the general population is a moon-shot project; replacing
it for a well selected set of use cases hard but, as history showed, possible.

------
soyiuz
Most of the conversation here is about the front-end user experience. However,
for a developer, size is often a stand-in for complexity. I am attracted to
"minimal" CSS frameworks not because they are marginally faster for my
visitors, but because I hope they ease the pain of managing complex CSS
structures.

------
hardwaresofton
The mini frontpage seems to be comparing mini to the wrong frameworks... how
about:

[https://purecss.io/](https://purecss.io/)
[http://getskeleton.com/](http://getskeleton.com/)

~~~
Kequc
I love skeleton. Unfortunately it's difficult to change the colour scheme on
that framework. I wish a new version would come out which allows me to
uniformly change colours throughout the page.

Otherwise for all my needs it's pretty much perfect.

~~~
me_bx
The fork skeleton-framework [0] has variables [1] to easily customize colors
and other stuff.

[0]: [https://skeleton-framework.github.io](https://skeleton-
framework.github.io)

[1]: [https://github.com/skeleton-framework/skeleton-
framework/blo...](https://github.com/skeleton-framework/skeleton-
framework/blob/master/src/core/_root.css)

------
cel1ne
Another occasion to promote: [http://tachyons.io/](http://tachyons.io/)

Also available for react-native: [https://github.com/tachyons-css/react-
native-style-tachyons](https://github.com/tachyons-css/react-native-style-
tachyons)

I could write a long explanation on why I think tachyons is the final
destination of CSS-frameworks, but I save myself the time. Just try it.

I don't believe there's a simpler or more maintainable (read: "better") way of
handling CSS.

I use it for fresh web, electron/desktop and react-native projects since about
two years, and I don't think I'll ever have to use something else again.

------
nprescott
While I like the idea of lightweight UIs, this one seems to have some
problems[0] in Firefox 55.0, the responsive mode view looks better but still
has some issues with the menu. I thought I had failed to download a stylesheet
at first but the desktop view actually has all the assets for the page.

[0]: [http://imgur.com/a/On8hZ](http://imgur.com/a/On8hZ)

------
BafS
If you want to try something really lightweight (1kb in fact) I made "mu":
[https://github.com/BafS/mu](https://github.com/BafS/mu)

~~~
chmike
This is exactly what I was looking for. Thanks for creating and sharing it.
I'll give it a try.

------
jazoom
I've had a good time using Spectre (10kB):
[https://picturepan2.github.io/spectre/](https://picturepan2.github.io/spectre/)

~~~
noir_lord
This one looks really good. Cheers!

EDIT: and it's based on LESS which I currently use, double cheers!

~~~
jazoom
No worries.

And for the info of others, I just saw that someone posted an issue 3 hours
ago showing their Sass port, which I might switch to.

------
cocktailpeanuts
Does "minimal" really matter when you'll probably take this and run this
through all kinds of code bureaucracy (powered by NPM) which will end up with
probably like 1MB of JS files?

Also on top of that you'll probably include bunch of 3rd party javascript that
wastes tons of user traffic, such as ads, analytics, etc.

I'm being half sarcastic half realistic. When was the last time you cared
about 2KB reduction in your CSS files? If you did, you're probably focusing on
the wrong things. The only people who should be thinking about these size
reduction is sites on a scale of Google or Facebook or Amazon where every kb
matters in terms of their operational cost. But these companies probably roll
their own.

So who is the "minimal" selling point really for?

------
awaisraad
In case you don't know, W3css is much lighter than this. And it is a complete
css framework with no javascript required.

W3CSS 6.7KB (gzip)! Beat that.
[https://www.w3schools.com/lib/w3.css](https://www.w3schools.com/lib/w3.css)

------
Radle
It's important to note that most css frameworks are incredible smart when
gzipped. Nearly all users can afford to load a 50kb file. Keeping your page
lightweight is mostly about using your graphics right. And avoiding deep
dependencies in your JS frameworks.

------
candiodari
I just made a game in HTML5. You'd be surprised the speeds that can be
achieved by just having a large canvas element and drawing on it with
RequestAnimationFrame. Wtf.

~~~
giancarlostoro
Am I missing something with your comment? Sorry but I don't get where you're
coming from, or how the comment is relevant to a css framework.

~~~
candiodari
I felt like pointing this out because of the whole CSS framework that's
smaller and faster premise. A canvas app is faster still.

------
askjdlkasdjsd
This is excellent! Thanks for sharing this.

I wonder what even goes on behind other larger frameworks like bootstrap that
makes them so huge.

~~~
janpieterz
You could take a look at [1]. The sheer amount of edge cases and bugs they've
got covered are incredible.

Small kits can be great, but there are certainly drawbacks that you would
never even notice (or rarely notice) with a framework like Bootstrap.

[1]
[https://github.com/twbs/bootstrap/issues](https://github.com/twbs/bootstrap/issues)

~~~
franciscop
Partially agree. The big problem IMO is momentum in the code. While they _do_
solve many issues, once a browser is not supported anymore the library doesn't
get "cleaned up" to reflect it because _it just works_. So you end up with
this stark difference (disclaimer: Umbrella is my own):

\- jQuery's addClass(), 35 lines:
[https://github.com/jquery/jquery/blob/master/src/attributes/...](https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L16)

\- Umbrella JS's addClass(), 5 lines:
[https://github.com/franciscop/umbrella/blob/master/src/plugi...](https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js)

So the choice is either well-tested libraries that slows your users down so
you'll lose a % of them, optimize the hell out of them so you'll "waste"*
time, or use a smaller library which is a compromise between them you'll loose
a tiny % of users who you don't support, but you have to invest some time to
learn it.

It is not black and white, so luckily we have a choice here and different
scenarios warrant for different libraries.

* I specify waste since it's probably something you already know and just have to do it; if you're learning it for the first time then it's not wasted at all

~~~
dsp1234
Speaking of "edge" cases:

el.addClass("btn btn-primary")

works in JQuery and fails in UmbrellaJS

~~~
nilliams
jQuery's addClass 'does more', it can also take a callback:

    
    
        $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')

~~~
franciscop
Sorry to dissapoint you but Umbrella also takes a callback! It just has more
_sane_ (ES6-compatible) arguments :)

u('a').addClass((el, i) => (i % 2 == 0) ? 'odd' : '');

See example: [https://jsfiddle.net/r2f87hzk/](https://jsfiddle.net/r2f87hzk/)

Not only that, Umbrella will handle _many more_ class name separations
compared to jQuery. All of these (and more) are valid:

u('a').addClass('a,b c', 'd'); // No typo here, four classes added

u('a').addClass(['a'], ['b,c', ['d']]); // Again no typo, 4 classes added

Of course you normally don't use this, but you might have the class list in an
array or a comma-separated string or something else which makes it really
convenient and it was basically for free as the method is really reusable. See
the documentation:

[https://umbrellajs.com/documentation#addclass](https://umbrellajs.com/documentation#addclass)

~~~
nilliams
Heh, props, I'm not disappointed, and yes that's a much better callback! But
that is not implemented in the 5 lines of code you linked to is it? :)

~~~
franciscop
Nop, but if you want to be fair jQuery's addClass is also not implemented in
those 29 lines of code, it also uses these: _each_ , _jQuery.isFunction_ ,
_getClass_ and _stripAndCollapse_.

Umbrella's single eacharg() uses in exchange _.each()_ (which is public-
facing, so it really doesn't count) and _.args()_ , which is private but used
in MANY places through the code. At 11 lines for args(), I'd say
proportionally it'd be 1-3 lines corresponding to addClass. So worst-case
scenario it'd be the equivalent to 8 lines exclusive for a much more flexible
function with no internal dependencies which is still alot less than jQuery's
29 lines with 3 internal dependencies and 1 external.

* I wrongly counted spaces in jQuery's function while I didn't in Umbrella

Edit: the _magic_ for the size of Umbrella JS is really through _heavy code
reuse_ and _modern API usage_. For this example, el.classList.add(name);

~~~
franciscop
Cannot reply below, reached the limit of HN!

There is a case where jQuery cannot use it since they aim to support SVG in
all officially supported browsers, and _classList_ doesn't work properly
inside SVG in IE11 (Umbrella doesn't officially support SVG).

I tried refactoring a bit of the code of jQuery, but every thing I touched or
changed a lot of tests failed; so I'd have to do a ton of work ignoring the
tests and then fix a ton of bugs for a low chance of success (so it was not
cost-effective relatively to improving Umbrella).

------
robertlf
My first question whenever I see a new framework like this is, is it going to
be around for the long-run?

------
loganwedwards
I'm a fan of Basscss which claims it's 2.13Kb and seems comparable in
utilities provided.

------
moondev
With internet speeds only getting faster as time moves forward, does size
REALLY matter? Is there an honest tangible difference between a 7kb and 30kb
download? Also what about obsessing over a 10ms difference in render
performance? Is that even noticeable? I can't help but think it may be wasted
effort.

~~~
kevin_thibedeau
Yes. Especially for resource constrained IoT devices serving up their own web
pages. Smaller is always better. My current mission is to rebuild an embedded
site into a sub 100k single file SPA. I can't afford bloated CSS and
Javascript libs and I can't shove everything off to a CDN that may not exist
ten years from now.

~~~
franciscop
If you do so please send me a link, I'm compiling a list of all sub-100kb
sites I can find (so far I got 100kb.org and probably will make a display as a
side-project to showcase [https://serverjs.io/](https://serverjs.io/)
functionality).

------
red023
By reading the docs on the grid it seems like its the same as bootstraps 4.0
grid. The classes are exactly the same.

I will stick with bootstrap just because I am working with it a long time it
has WAY more exposure, people building on top of it, contributing...

The difference between 7 KB and 20 KB gzipped is not really that big of a deal
for me. Also you can obviously custom build bootstrap and just cut the modules
out you don't need.

Also in that context of this small size difference I think its perfectly fine
to compare it to the big frameworks out there.

