9 ms·

Mini.css: Minimal, responsive, style-agnostic CSS framework

189 points by zoria 9y ago

askjdlkasdjsd 9y ago
This is excellent! Thanks for sharing this. I wonder what even goes on behind other larger frameworks like bootstrap that makes them so huge.
- nilliams 9y ago
  As I explain in this comment [1], Bootstrap is modular, you shouldn't be using the whole thing. The simple answer why it is larger is because it offers far more features/components (and browser support is considerably better). [1] https://news.ycombinator.com/item?id=14121631 https://news.ycombinator.com/item?id=14121631
- janpieterz 9y ago
  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 9y ago
    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/classes.js#L16 https://github.com/jquery/jquery/blob/master/src/attributes/... - Umbrella JS's addClass(), 5 lines: https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js https://github.com/franciscop/umbrella/blob/master/src/plugi... 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 9y ago
      Speaking of "edge" cases: el.addClass("btn btn-primary") works in JQuery and fails in UmbrellaJS
      - nilliams 9y ago
        jQuery's addClass 'does more', it can also take a callback: $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')
        franciscop 9y ago
        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 9y ago
        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 9y ago
        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);
  - crucialfelix 9y ago
    The biggest bloat is that for every component you are always sending all the css for every possible combination of feature that might be used on that component. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scs... .card-outline-warning .card-blockquote .card-footer / .card-header .card-footer &:last-child .card { > .list-group:first-child { .list-group-item:first-child { etc. etc. It's 280 lines of source code (before you even run auto-prefixer) Each one of these components repeats styling that other components will use. Because they want it easy to use so you just apply .card instead of individually composing all the style effects you want. The other day I used semantic-ui, just added in a few components and it was 56k compressed. Because the component ships with support for all options, not just what you use.
    - janpieterz 9y ago
      True, all those variants to allow the developer flexibility. That's why plugins like purifycss[1] etc are interesting. When properly used and configured, a developer has the full framework under his fingers, while not outputting anything unused to the users. [1]: https://github.com/webpack-contrib/purifycss-webpack https://github.com/webpack-contrib/purifycss-webpack
      - crucialfelix 9y ago
        For that to really work we need a way for react components, Ng directives etc to export classes they use so that purify can parse them. Do you know or use such a setup ? Edit. Oh it does read react and classNames. I'm sold!
nprescott 9y ago
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
mwcampbell 9y ago
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
- xs 9y ago
  I think if there are two sites with the same content and functionality, people would hands down prefer the faster page.
  - always_good 9y ago
    The thing is that, there aren't. Only in our wet dreams exists a competitive edge where you copy a website 1:1 but use vanilla JS over their jQuery so things load a tiny bit faster and their users flock over to your website, chanting your name.
    - candiodari 9y ago
      Really ? https://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/ https://blog.gigaspaces.com/amazon-found-every-100ms-of-late... http://glinden.blogspot.com.au/2006/11/marissa-mayer-at-web-20.html http://glinden.blogspot.com.au/2006/11/marissa-mayer-at-web-... I'm sure I read essentially the same from ebay as well at some point. It's worse than being a competitive advantage : extra milliseconds seem to matter a lot for the size of the market in the first place.
      - always_good 9y ago
        Nowhere upstream did someone say "smaller isn't better".
      - 9y ago
BafS 9y ago
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 9y ago
  This is exactly what I was looking for. Thanks for creating and sharing it. I'll give it a try.
moondev 9y ago
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.
- LoSboccacc 9y ago
  Right now I'm on a train, browsing with the train wifi along with thousand other users in the middle of the Italian campaigns. Hn is one of the few sites that loads and works. There's plenty person that for a reason or another are temporarily or long term broadbandless.
- kevin_thibedeau 9y ago
  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 9y ago
    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).
  - SparkyMcUnicorn 9y ago
    Someone is doing IoT development correctly!?
- erickhill 9y ago
  It matters if you are a large website pushing content to hundreds of thousands of users (or millions). Those KB do add up over time in cost. For the vast majority of sites out there, though - no, not really.
- 9y ago
hardwaresofton 9y ago
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 9y ago
  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.
  - badthingfactory 9y ago
    https://github.com/WhatsNewSaes/Skeleton-Less/blob/master/less/skeleton.less https://github.com/WhatsNewSaes/Skeleton-Less/blob/master/le... Give that a try. I used that and broke it into modules for a website redesign I'm working on. It's going quite well. I love using skeleton as the starting point for projects rather than picking some css framework to build on top of.
  - me_bx 9y ago
    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/blob/master/src/core/_root.css https://github.com/skeleton-framework/skeleton-framework/blo...
- me_bx 9y ago
  N.B.: Skeleton is not maintained anymore since December 2014. Skeleton framework [0] is an actively maintained fork. [0]: http://skeleton-framework.github.io/ http://skeleton-framework.github.io/
jc4p 9y ago
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/
- nilliams 9y ago
  Also a lot of the frameworks compared against are totally modular, so comparing against the full framework size doesn't really mean a lot, because it almost never makes sense to include every framework module. E.g. in Bootstrap 3 if you only want typography, it's 9kb min/2.8kb gz, for typography+forms+buttons it's 27kb min/5.kb gz, for all 'common CSS' (incl grid + responsive utilities) it's 46kb min/8.8kb gz. The comparison size of 20kb gz is only if you pulled in every additional component available.
- franciscop 9y ago
  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 9y ago
    Sorry I was mostly going off the google results. Your library looks really nice, the SCSS variable changing is awesome!
    - franciscop 9y ago
      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.
candiodari 9y ago
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 9y ago
  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 9y ago
    I felt like pointing this out because of the whole CSS framework that's smaller and faster premise. A canvas app is faster still.
soyiuz 9y ago
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.
- deleted 9y ago
  [deleted]
awaisraad 9y ago
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
robertlf 9y ago
My first question whenever I see a new framework like this is, is it going to be around for the long-run?
deleted 9y ago
[deleted]
cel1ne 9y ago
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.
jazoom 9y ago
I've had a good time using Spectre (10kB): https://picturepan2.github.io/spectre/ https://picturepan2.github.io/spectre/
- noir_lord 9y ago
  This one looks really good. Cheers! EDIT: and it's based on LESS which I currently use, double cheers!
  - deleted 9y ago
    [deleted]
  - jazoom 9y ago
    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.
- adtac 9y ago
  That is absolutely beautiful. Thank you for that, I know what I'll be using the next time I need to use HTML (I'm terrible with JS/CSS - I usually spend 15+ minutes trying to center something).
Radle 9y ago
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.
cocktailpeanuts 9y ago
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?
red023 9y ago
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.
loganwedwards 9y ago
I'm a fan of Basscss which claims it's 2.13Kb and seems comparable in utilities provided.

189 points by zoria 9y ago

This is excellent! Thanks for sharing this. I wonder what even goes on behind other larger frameworks like bootstrap that makes them so huge.

nilliams 9y ago
As I explain in this comment [1], Bootstrap is modular, you shouldn't be using the whole thing. The simple answer why it is larger is because it offers far more features/components (and browser support is considerably better). [1] https://news.ycombinator.com/item?id=14121631 https://news.ycombinator.com/item?id=14121631
janpieterz 9y ago
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 9y ago
  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/classes.js#L16 https://github.com/jquery/jquery/blob/master/src/attributes/... - Umbrella JS's addClass(), 5 lines: https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js https://github.com/franciscop/umbrella/blob/master/src/plugi... 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 9y ago
    Speaking of "edge" cases: el.addClass("btn btn-primary") works in JQuery and fails in UmbrellaJS
    - nilliams 9y ago
      jQuery's addClass 'does more', it can also take a callback: $el.addClass((i, existingClass) => (i % 2 == 0) ? 'odd' : '')
      - franciscop 9y ago
        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 9y ago
        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 9y ago
        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);
- crucialfelix 9y ago
  The biggest bloat is that for every component you are always sending all the css for every possible combination of feature that might be used on that component. https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scs... .card-outline-warning .card-blockquote .card-footer / .card-header .card-footer &:last-child .card { > .list-group:first-child { .list-group-item:first-child { etc. etc. It's 280 lines of source code (before you even run auto-prefixer) Each one of these components repeats styling that other components will use. Because they want it easy to use so you just apply .card instead of individually composing all the style effects you want. The other day I used semantic-ui, just added in a few components and it was 56k compressed. Because the component ships with support for all options, not just what you use.
  - janpieterz 9y ago
    True, all those variants to allow the developer flexibility. That's why plugins like purifycss[1] etc are interesting. When properly used and configured, a developer has the full framework under his fingers, while not outputting anything unused to the users. [1]: https://github.com/webpack-contrib/purifycss-webpack https://github.com/webpack-contrib/purifycss-webpack
    - crucialfelix 9y ago
      For that to really work we need a way for react components, Ng directives etc to export classes they use so that purify can parse them. Do you know or use such a setup ? Edit. Oh it does read react and classNames. I'm sold!

nprescott 9y ago

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

mwcampbell 9y ago

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

xs 9y ago
I think if there are two sites with the same content and functionality, people would hands down prefer the faster page.
- always_good 9y ago
  The thing is that, there aren't. Only in our wet dreams exists a competitive edge where you copy a website 1:1 but use vanilla JS over their jQuery so things load a tiny bit faster and their users flock over to your website, chanting your name.
  - candiodari 9y ago
    Really ? https://blog.gigaspaces.com/amazon-found-every-100ms-of-latency-cost-them-1-in-sales/ https://blog.gigaspaces.com/amazon-found-every-100ms-of-late... http://glinden.blogspot.com.au/2006/11/marissa-mayer-at-web-20.html http://glinden.blogspot.com.au/2006/11/marissa-mayer-at-web-... I'm sure I read essentially the same from ebay as well at some point. It's worse than being a competitive advantage : extra milliseconds seem to matter a lot for the size of the market in the first place.
    - always_good 9y ago
      Nowhere upstream did someone say "smaller isn't better".
    - 9y ago

BafS 9y ago

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 9y ago
This is exactly what I was looking for. Thanks for creating and sharing it. I'll give it a try.

moondev 9y ago

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.

LoSboccacc 9y ago
Right now I'm on a train, browsing with the train wifi along with thousand other users in the middle of the Italian campaigns. Hn is one of the few sites that loads and works. There's plenty person that for a reason or another are temporarily or long term broadbandless.
kevin_thibedeau 9y ago
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 9y ago
  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).
- SparkyMcUnicorn 9y ago
  Someone is doing IoT development correctly!?
erickhill 9y ago
It matters if you are a large website pushing content to hundreds of thousands of users (or millions). Those KB do add up over time in cost. For the vast majority of sites out there, though - no, not really.
9y ago

hardwaresofton 9y ago

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 9y ago
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.
- badthingfactory 9y ago
  https://github.com/WhatsNewSaes/Skeleton-Less/blob/master/less/skeleton.less https://github.com/WhatsNewSaes/Skeleton-Less/blob/master/le... Give that a try. I used that and broke it into modules for a website redesign I'm working on. It's going quite well. I love using skeleton as the starting point for projects rather than picking some css framework to build on top of.
- me_bx 9y ago
  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/blob/master/src/core/_root.css https://github.com/skeleton-framework/skeleton-framework/blo...
me_bx 9y ago
N.B.: Skeleton is not maintained anymore since December 2014. Skeleton framework [0] is an actively maintained fork. [0]: http://skeleton-framework.github.io/ http://skeleton-framework.github.io/

jc4p 9y ago

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/

nilliams 9y ago
Also a lot of the frameworks compared against are totally modular, so comparing against the full framework size doesn't really mean a lot, because it almost never makes sense to include every framework module. E.g. in Bootstrap 3 if you only want typography, it's 9kb min/2.8kb gz, for typography+forms+buttons it's 27kb min/5.kb gz, for all 'common CSS' (incl grid + responsive utilities) it's 46kb min/8.8kb gz. The comparison size of 20kb gz is only if you pulled in every additional component available.
franciscop 9y ago
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 9y ago
  Sorry I was mostly going off the google results. Your library looks really nice, the SCSS variable changing is awesome!
  - franciscop 9y ago
    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.

candiodari 9y ago

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 9y ago
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 9y ago
  I felt like pointing this out because of the whole CSS framework that's smaller and faster premise. A canvas app is faster still.

soyiuz 9y ago

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.

deleted 9y ago
[deleted]

awaisraad 9y ago

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

robertlf 9y ago

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

deleted 9y ago

[deleted]

cel1ne 9y ago

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.

jazoom 9y ago

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

noir_lord 9y ago
This one looks really good. Cheers! EDIT: and it's based on LESS which I currently use, double cheers!
- deleted 9y ago
  [deleted]
- jazoom 9y ago
  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.
adtac 9y ago
That is absolutely beautiful. Thank you for that, I know what I'll be using the next time I need to use HTML (I'm terrible with JS/CSS - I usually spend 15+ minutes trying to center something).

Radle 9y ago

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.

cocktailpeanuts 9y ago

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?

red023 9y ago

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.

loganwedwards 9y ago

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