8 ms·

Milligram: A minimalist CSS framework

183 points by somecoder 11y ago

sarreph 11y ago
Great to see this on the front page! Was fed up with a template-driven site I built a few months ago and was looking for CSS frameworks to base a redesign on. Only downloaded Milligram the other day and have been having a blast getting it set up. Has a great mobile-first approach with absolutely minimal code in order to build fast, responsive sites with ease. Looking forward to tracking its development but it already has everything I want to get a site up and running quickly.
CharlesW 11y ago
This is a very nice looking CSS stylesheet. Can someone explain what makes this a "framework"? (I did look through the docs, but didn't see the kind of modular or "designed to be built on" philosophy expressed in frameworks like Pure CSS.)
- dexwiz 11y ago
  The use of bootstrap style CSS classes.l, but it's a strech. Seems like every new layer of abstraction that does more than one thing is now a framework.
- puppetmaster3 11y ago
  In HTML dev, CSS base classes that explain your going to create pages is a framework, ex: BootStrap, Foundation, etc. This is just a light one, that is the point.
  - yelnatz 11y ago
    I see. So I don't have to do anything, just include the stylesheet and my buttons will look like that? Neat.
- kazinator 11y ago
  Too much packaging. I just went here: https://github.com/milligram/milligram/blob/master/dist/milligram.css https://github.com/milligram/milligram/blob/master/dist/mill... Selected the 500+ lines of CSS, switched to my terminal window: $ cat > milligram.css [paste] [Ctrl-D] I just developed a small web app that has no CSS, and this fortuitously appeared on HN, so I'm giving it a shot. --- Result: Hate it. Everything is huge, and pink. A compact table that took up about 1/4 of the browser window is now spaced all over the screen. $ git reset --hard ; rm milligram.css Sorry!
  - cooper12 11y ago
    The point of a framework is that you're supposed to build on top of it. Expectedly, color would be one of the first things anyone would change. Though the spacing issue itself might be difficult to address. Looking at the SASS files, _Color.sass has the values you'd need to modify in one place and _Spacing.sass might take care of the other issue.
    - kazinator 11y ago
      I'm not going to tweak something that is "dead on arrival". It has to be usable first with zero configuration; then the integrator gets excited and is inspired to weak. What I like about this is the idea of a generic style sheet that just works with standard elements. It's successful in that basically it worked for me as designed; it applied its style to all the elements. Only, its idea of style is to make the fonts a bigger, and turn a simple table into something that needs scroll bars in both dimensions. I would definitely like to try some other "just drop it in" stylesheet like this. Or maybe this one too, six months from now. Or its emerging forks (the project encourages forking).
      - cooper12 11y ago
        Hmm, I agree that zero configuration would be ideal, but everyone has different needs. Design can especially be opinionated, with a person deciding "this is how this should be done." Of course picking a purple color doesn't help at all in that matter (I assume it's a reference to bootstrap's default color) and one person's minimal styling is another person's obtrusive styling. It's been a while since I've personally tried it, but Skeleton might be worth a try; it's quite minimal.
- simple10 11y ago
  It not a framework per se. The post title calls it a framework, but the README is clear that it's not. Good question though, what makes a framework?
  - sam_goody 11y ago
    I think the more common name for something like this is "boilerplate". (Sorta how html5boilerplate.com doesn't pretend to be a framework.)
mati 11y ago
Also check out http://getskeleton.com/ http://getskeleton.com/
- vonklaus 11y ago
  I didn't want to be a dick, and milligram seems like a nice minimal grid which I don't think we have enough of, but it serms like they changed .btn-primary to purple and shipped skeleton.
  - shocks 11y ago
    It does seem so, but Milligram seems a lot more usable. It's written in sass and everything seems nicely organised. Skeleton is just a single css file. Skeleton also seems somewhat dead.
    - vonklaus 11y ago
      I like skeleton. It has been ported to sass as well. > it seems somewhat dead The beauty of skeleton is that it still accomplishes exactly what it is meant to, without needing attention. To be fair, it is only html and css, so there aren't huge security concerns or dependencies like a big project would have. But that is the point. You can make a super quick website without using a bootstrap and it is very logical and minimal.
      - shocks 11y ago
        That's true, but there are lot of issues and even PRs that IMO should be dealt with/merged. Forms are another thing. They are a pain and it's useful to have something like this to form a base. But what if you only want the forms aspect and not the rest? Seems like you could do that with Milligram but not Skeleton.
  - daveguy 11y ago
    If that fixes the problem of "hey, is this abandoned?", then it might be worth it: https://github.com/dhg/Skeleton/issues/275 https://github.com/dhg/Skeleton/issues/275
deleted 11y ago
[deleted]
jonathankoren 11y ago
I'm not a webdev, and the fascination with yet-another-framework for JavaScript is really cute, but I really really REALLY don't get this. It's it appears to be nothing more than a CSS stylesheet. So what?
- x0 11y ago
  Have you ever written any CSS? This sort of framework just does the basics for you, it's the first 500 lines you'd otherwise have to write (and CSS can be quite painful to get right). It's not really just a stylesheet, it's a solid starting point meant to be expanded upon.
  - jonathankoren 11y ago
    Yes lots of times. So it's exactly what it looks like, a boilerplate. I'm still not convinced why this is noteworthy.
- brianzelip 11y ago
  This project has nothing to do w js, only css.
mful 11y ago
By default I reach for Skeleton[1] on side projects, which is similar in a lot of ways, but I really like the way the grid looks/functions in Milligram. Also, defining pairs of CSS classes to accommodate the user rounding in either direction made me smile (ie .column-66 === .column-67). Definitely going to try it out on my next project. [1] getskeleton.com
- puppetmaster3 11y ago
  I used Skeleton, but now Kube due to grid: <row> <column ...
nateberkopec 11y ago
For anyone keeping track at home, Bootstrap is 25KB, gzipped, with all modules included. If you don't include all the modules/stylesheets, you can easily get it down to half that. Milligram is 2.7KB. Still, I like the flexbox-based grid.
- franciscop 11y ago
  Note that bootstrap also requires jquery for many things which adds another 33kb for the 2.x version Is 25kb for the single .css file or the .css and .js combined?
  - nateberkopec 11y ago
    Just the CSS, I don't think it would be fair to include the JS bit in the comparison if we're going to try to compare features on an equal footing.
  - random_rr 11y ago
    Bootstrap only requires jQuery if you're using bootstrap.js - which is 37kB. So, if you want to use bootstrap CSS + JS + jQuery, you're immediately looking at ~75kB worth of stuff. Side note: I was recently dealing with this, and found Zepto to be a suitable jQuery replacement for small single page apps.
    - datashaman 11y ago
      An item about jQuery vs Zepto was posted recently, worth reading since you're in the same situation. http://zurb.com/article/1293/why-we-dropped-zepto http://zurb.com/article/1293/why-we-dropped-zepto
      - random_rr 11y ago
        Thanks, I found this same article when I was looking at making the switch! In my case, I'm running just a few operations on selectors, so the performance benefit of jQuery doesn't matter to me as much as a small footprint. Link to my project if you're curious http://daviseford.com/shittalk http://daviseford.com/shittalk With Zepto, the page size comes in around 80kB. I also had to rewrite some Ajax calls (base Zepto download doesn't include deferred modules), but since one of my personal goals was to have the page under 100kB, Zepto made sense for me.
goatslacker 11y ago
Love seeing these microframeworks pop-up. I wrote my own a while back for kicks http://goatslacker.github.io/lotus.css/ http://goatslacker.github.io/lotus.css/ I would love to be able to make a custom builds of milligram by shedding some of the modules I don't care about. This could also open it up to other modules being added like Modals or whatever.
- bahador 11y ago
  ahh goatslacker, keep up the good work! i love alt.
nickysielicki 11y ago
This is awesome man. I hate how many frontend web frameworks require javascript to look decent on mobile and on desktop. There is no reason that a personal website serving static pages needs to be running anything on the remote end. This looks great on mobile and on desktop. I'm going to be remaking my personal website soon with this. Thanks for posting.
haxiomic 11y ago
Hey, bug report: the page doesn't render correctly on iPhone, testing with iOS 7, the page height is many many times the height of the screen, it's miles of scrolling emptiness before I get to content. Can't debug here but this usually caused by using the vh units in CSS: there's a bug with iOS that causes the vh unit to behave improperly. This may have been fixed in later versions of iOS Anyone running a later version of iOS seeing the same thing?
- jayrhynas 11y ago
  iOS 9 - looks fine, other than the logo being under the toolbar. Probably needs a min-height on the header section
- OberstKrueger 11y ago
  iOS 9 here, and no issues. According to http://caniuse.com/#feat=viewport-units http://caniuse.com/#feat=viewport-units , iOS 7 is the only one with buggy vh calculations.
Edmond 11y ago
love how those of us who are coders but not designers can now create good looking apps. These frameworks are very helpful.
- vanadium 11y ago
  Such is almost invariably the case with most CSS frameworks until you work with a designer that seeks differentiation. That's the point where everything generally falls apart, for better and for worse, depending on who's responsible for reconciling it. Fortunately, this seems more easily amenable to that scenario than the typical framework due to its smaller footprint.
ademup 11y ago
Problems like eg: the docs dropdown not able to be fully viewed in landscape mode on my phone always bring me back to larger projects like bootstrap. Extensive testing across multiple devices, browsers, and oses is crucial to me.
x0 11y ago
Why do I need npm or bower to install it? It's a 2kb css file. Now I do know what npm and bower are, however another web designer might not. So I think a link to the file itself would be handy.
- notinreallife 11y ago
  https://github.com/milligram/milligram/tree/master/dist https://github.com/milligram/milligram/tree/master/dist
  - x0 11y ago
    Haha, cheers lad.
- trengrj 11y ago
  While I agree a link to the file would be better, the frontend move towards npm and bower is due to greater professionalism in this area. It is fair easier to manage versions and automate installations by using npm and bower.
  - sametmax 11y ago
    Moving to bower recently ? Are you sure it's not Yeoman ? Or Webpack ? Or maybe it's maybelline.
    - tragic 11y ago
      Yes, I know everyone's affecting to be jaded about JS tooling these days, but good luck downloading a package with webpack (build runner) or yeoman (application scaffolder). Your comment is a bit like sarcastically asking "what do we build C projects with these days? Make? Lint? Valgrind?"
      - dingdingdang 11y ago
        Except C actually NEEDS building whereas JS do not. But then using all of these command-line tools makes JS start to look more like a 'real' programming language and now any noob can't just walk in and take my job since I obfuscated the hell out of something essentially simple. It is simple Machiavellian protectionism applied at rapid pace. Back in the day it was done within the purposely obscure UNIX environment (not just anyone can be sysadmin!) and now its being re-applied to web environment.
jbpetersen 11y ago
Anywhere good to browse a collection of things like this?
- franciscop 11y ago
  I know this one for JS, but not for CSS: http://microjs.com http://microjs.com However when I published my own css library few recommendations popped up: - Pure CSS [ http://purecss.io/ http://purecss.io/ ] - Min CSS [ http://mincss.com/ http://mincss.com/ ] - Skeleton [ http://getskeleton.com/ http://getskeleton.com/ ] - Picnic CSS (my own) [ http://picnicss.com/ http://picnicss.com/ ]
  - grosskur 11y ago
    Also: - Basscss [ http://www.basscss.com/ http://www.basscss.com/ ] - Tachyons [ http://tachyons.io/ http://tachyons.io/ ]
franciscop 11y ago
Hi there, I am the creator of Picnic CSS [1], a 5kb library similar to this one. I love the page and the logo, really minimalist and clean. A couple of tips for the library: - Subtle animations. It doesn't take many bytes, but it makes it look much better - :active status gives visual feedback that you are clicking the element - The grid doesn't accept gutter nor reversing order by css, which makes it not really mobile-friendly for alternating patterns in a page. There's not really a single good solution in css for both [2] - <select> looks just like a normal input without down arrow in Firefox Keep it up (: [1] http://picnicss.com/ http://picnicss.com/ [2] https://github.com/picnicss/picnic/issues/58 https://github.com/picnicss/picnic/issues/58
- wanda 11y ago
  A tip for you: please don't use background-attachment:fixed because it forces a repainting and the resultant drop below 60fps does your lib no credit. If you alter your approach you can still achieve the same effect by making use of position:fixed with either transform:translateZ(0) or will-change:transform to establish a new paint layer and enable hardware acceleration, so scrolling down (a common activity) doesn't drop below 60fps.
  - franciscop 11y ago
    That would explain the performance problems, thank you so much!
    - wanda 11y ago
      No problem.
intrasight 11y ago
On my last web project (a couple years back now) I used GUSS (https://github.com/guardian/guss https://github.com/guardian/guss) which I liked because it was light-weight and modular. But it hasn't had any activity recently and so I'm in the market for a new CSS framework. I was looking at Bootstrap 4, which certainly has a lot going for it. It has created a community - including template developers. But Bootstrap is big and it presumably still uses JQuery, which I've dropped from my toolkit. Milligram looks promising. Are there other similar projects?
mkoryak 11y ago
why do i keep seeing forms where labels use the `for` attribute instead of wrapping the input in the label? relying on ids makes creating components a pain in the ass
- scarecrowbob 11y ago
  IIRC, the name attribute on the input element serves to tie it to its label as well as the id. I don't think that you need an id on the input element if you have a name.
  - vbezhenar 11y ago
    No, you must use id. Check it out: https://jsbin.com/yevuzejebi/edit?html,output https://jsbin.com/yevuzejebi/edit?html,output
- memco 11y ago
  One reason might be for styling. Otherwise you may have to resort to wrapping the label's text in a span or something to target the label's text separately. You wouldn't use the id for styling, just to link the label and the input for accessibility.
  - mkoryak 11y ago
    I dint style by id, but adding logic to make sure that the id is unique for reusable components is the sucky part
  - mkoryak 11y ago
    I dint style by id, but adding logic to make sure that the id is unique for reusable components is the sucky part
dredmorbius 11y ago
Coming from a user/CSS perspective -- I'm hugely disillusioned with most current web design, but this actually Isn't Awful. Particular kudos for going with REM units. My overall preference is to set: html { font-size: medium; } Then base subsequent sizes off of REM multiples. This ensures that users who do set default font size to something sane aren't suffering, while those who don't actually have a reasonable basis for zooming the page in and/or out. A slight margin for reasonably-large mobile sizes (10" tablet here) would also help a bit.
muzani 11y ago
I really like this. I was about to ask what makes it better than bootstrap, skeleton, foundation etc. But it's really straightforward, so I can focus on raw code instead of thinking of nice formatting. Sometimes I just want a page to display data. This works perfect for that.
jrapdx3 11y ago
Several comments mention Skeleton as possible alternative to Milligram. Unfortunately, as pointed out, Skeleton appears to be dead, i.e., no project activity for a year. I've also used Skeleton in several projects though it required customization of UI element sizes, max grid width, etc. On the whole Skeleton worked well enough and sufficiently lightweight. For all Skeleton users, the project was forked a few months ago and now lives on as skeletonframework, available here: https://github.com/skeletonframework/skeletonframework https://github.com/skeletonframework/skeletonframework
- deleted 11y ago
  [deleted]
andrewingram 11y ago
I like seeing CSS frameworks as a source of inspiration. Now that i'm using CSS Modules I can't really see myself using any directly. It'd be interesting to see what types of frameworks crop up with CSS Modules in mind.
ekryski 11y ago
Nice work! I've been using base (http://www.basscss.com/ http://www.basscss.com/) for a couple years now. Any idea how it compares to this other than being ~1kb bigger?

183 points by somecoder 11y ago

Great to see this on the front page! Was fed up with a template-driven site I built a few months ago and was looking for CSS frameworks to base a redesign on. Only downloaded Milligram the other day and have been having a blast getting it set up. Has a great mobile-first approach with absolutely minimal code in order to build fast, responsive sites with ease. Looking forward to tracking its development but it already has everything I want to get a site up and running quickly.

CharlesW 11y ago

This is a very nice looking CSS stylesheet. Can someone explain what makes this a "framework"? (I did look through the docs, but didn't see the kind of modular or "designed to be built on" philosophy expressed in frameworks like Pure CSS.)

dexwiz 11y ago
The use of bootstrap style CSS classes.l, but it's a strech. Seems like every new layer of abstraction that does more than one thing is now a framework.
puppetmaster3 11y ago
In HTML dev, CSS base classes that explain your going to create pages is a framework, ex: BootStrap, Foundation, etc. This is just a light one, that is the point.
- yelnatz 11y ago
  I see. So I don't have to do anything, just include the stylesheet and my buttons will look like that? Neat.
kazinator 11y ago
Too much packaging. I just went here: https://github.com/milligram/milligram/blob/master/dist/milligram.css https://github.com/milligram/milligram/blob/master/dist/mill... Selected the 500+ lines of CSS, switched to my terminal window: $ cat > milligram.css [paste] [Ctrl-D] I just developed a small web app that has no CSS, and this fortuitously appeared on HN, so I'm giving it a shot. --- Result: Hate it. Everything is huge, and pink. A compact table that took up about 1/4 of the browser window is now spaced all over the screen. $ git reset --hard ; rm milligram.css Sorry!
- cooper12 11y ago
  The point of a framework is that you're supposed to build on top of it. Expectedly, color would be one of the first things anyone would change. Though the spacing issue itself might be difficult to address. Looking at the SASS files, _Color.sass has the values you'd need to modify in one place and _Spacing.sass might take care of the other issue.
  - kazinator 11y ago
    I'm not going to tweak something that is "dead on arrival". It has to be usable first with zero configuration; then the integrator gets excited and is inspired to weak. What I like about this is the idea of a generic style sheet that just works with standard elements. It's successful in that basically it worked for me as designed; it applied its style to all the elements. Only, its idea of style is to make the fonts a bigger, and turn a simple table into something that needs scroll bars in both dimensions. I would definitely like to try some other "just drop it in" stylesheet like this. Or maybe this one too, six months from now. Or its emerging forks (the project encourages forking).
    - cooper12 11y ago
      Hmm, I agree that zero configuration would be ideal, but everyone has different needs. Design can especially be opinionated, with a person deciding "this is how this should be done." Of course picking a purple color doesn't help at all in that matter (I assume it's a reference to bootstrap's default color) and one person's minimal styling is another person's obtrusive styling. It's been a while since I've personally tried it, but Skeleton might be worth a try; it's quite minimal.
simple10 11y ago
It not a framework per se. The post title calls it a framework, but the README is clear that it's not. Good question though, what makes a framework?
- sam_goody 11y ago
  I think the more common name for something like this is "boilerplate". (Sorta how html5boilerplate.com doesn't pretend to be a framework.)

mati 11y ago

Also check out http://getskeleton.com/ http://getskeleton.com/

vonklaus 11y ago
I didn't want to be a dick, and milligram seems like a nice minimal grid which I don't think we have enough of, but it serms like they changed .btn-primary to purple and shipped skeleton.
- shocks 11y ago
  It does seem so, but Milligram seems a lot more usable. It's written in sass and everything seems nicely organised. Skeleton is just a single css file. Skeleton also seems somewhat dead.
  - vonklaus 11y ago
    I like skeleton. It has been ported to sass as well. > it seems somewhat dead The beauty of skeleton is that it still accomplishes exactly what it is meant to, without needing attention. To be fair, it is only html and css, so there aren't huge security concerns or dependencies like a big project would have. But that is the point. You can make a super quick website without using a bootstrap and it is very logical and minimal.
    - shocks 11y ago
      That's true, but there are lot of issues and even PRs that IMO should be dealt with/merged. Forms are another thing. They are a pain and it's useful to have something like this to form a base. But what if you only want the forms aspect and not the rest? Seems like you could do that with Milligram but not Skeleton.
- daveguy 11y ago
  If that fixes the problem of "hey, is this abandoned?", then it might be worth it: https://github.com/dhg/Skeleton/issues/275 https://github.com/dhg/Skeleton/issues/275

deleted 11y ago

[deleted]

jonathankoren 11y ago

I'm not a webdev, and the fascination with yet-another-framework for JavaScript is really cute, but I really really REALLY don't get this. It's it appears to be nothing more than a CSS stylesheet. So what?

x0 11y ago
Have you ever written any CSS? This sort of framework just does the basics for you, it's the first 500 lines you'd otherwise have to write (and CSS can be quite painful to get right). It's not really just a stylesheet, it's a solid starting point meant to be expanded upon.
- jonathankoren 11y ago
  Yes lots of times. So it's exactly what it looks like, a boilerplate. I'm still not convinced why this is noteworthy.
brianzelip 11y ago
This project has nothing to do w js, only css.

mful 11y ago

By default I reach for Skeleton[1] on side projects, which is similar in a lot of ways, but I really like the way the grid looks/functions in Milligram. Also, defining pairs of CSS classes to accommodate the user rounding in either direction made me smile (ie .column-66 === .column-67). Definitely going to try it out on my next project. [1] getskeleton.com

puppetmaster3 11y ago
I used Skeleton, but now Kube due to grid: <row> <column ...

nateberkopec 11y ago

For anyone keeping track at home, Bootstrap is 25KB, gzipped, with all modules included. If you don't include all the modules/stylesheets, you can easily get it down to half that. Milligram is 2.7KB. Still, I like the flexbox-based grid.

franciscop 11y ago
Note that bootstrap also requires jquery for many things which adds another 33kb for the 2.x version Is 25kb for the single .css file or the .css and .js combined?
- nateberkopec 11y ago
  Just the CSS, I don't think it would be fair to include the JS bit in the comparison if we're going to try to compare features on an equal footing.
- random_rr 11y ago
  Bootstrap only requires jQuery if you're using bootstrap.js - which is 37kB. So, if you want to use bootstrap CSS + JS + jQuery, you're immediately looking at ~75kB worth of stuff. Side note: I was recently dealing with this, and found Zepto to be a suitable jQuery replacement for small single page apps.
  - datashaman 11y ago
    An item about jQuery vs Zepto was posted recently, worth reading since you're in the same situation. http://zurb.com/article/1293/why-we-dropped-zepto http://zurb.com/article/1293/why-we-dropped-zepto
    - random_rr 11y ago
      Thanks, I found this same article when I was looking at making the switch! In my case, I'm running just a few operations on selectors, so the performance benefit of jQuery doesn't matter to me as much as a small footprint. Link to my project if you're curious http://daviseford.com/shittalk http://daviseford.com/shittalk With Zepto, the page size comes in around 80kB. I also had to rewrite some Ajax calls (base Zepto download doesn't include deferred modules), but since one of my personal goals was to have the page under 100kB, Zepto made sense for me.

goatslacker 11y ago

Love seeing these microframeworks pop-up. I wrote my own a while back for kicks http://goatslacker.github.io/lotus.css/ http://goatslacker.github.io/lotus.css/ I would love to be able to make a custom builds of milligram by shedding some of the modules I don't care about. This could also open it up to other modules being added like Modals or whatever.

bahador 11y ago
ahh goatslacker, keep up the good work! i love alt.

nickysielicki 11y ago

This is awesome man. I hate how many frontend web frameworks require javascript to look decent on mobile and on desktop. There is no reason that a personal website serving static pages needs to be running anything on the remote end. This looks great on mobile and on desktop. I'm going to be remaking my personal website soon with this. Thanks for posting.

haxiomic 11y ago

Hey, bug report: the page doesn't render correctly on iPhone, testing with iOS 7, the page height is many many times the height of the screen, it's miles of scrolling emptiness before I get to content. Can't debug here but this usually caused by using the vh units in CSS: there's a bug with iOS that causes the vh unit to behave improperly. This may have been fixed in later versions of iOS Anyone running a later version of iOS seeing the same thing?

jayrhynas 11y ago
iOS 9 - looks fine, other than the logo being under the toolbar. Probably needs a min-height on the header section
OberstKrueger 11y ago
iOS 9 here, and no issues. According to http://caniuse.com/#feat=viewport-units http://caniuse.com/#feat=viewport-units , iOS 7 is the only one with buggy vh calculations.

Edmond 11y ago

love how those of us who are coders but not designers can now create good looking apps. These frameworks are very helpful.

vanadium 11y ago
Such is almost invariably the case with most CSS frameworks until you work with a designer that seeks differentiation. That's the point where everything generally falls apart, for better and for worse, depending on who's responsible for reconciling it. Fortunately, this seems more easily amenable to that scenario than the typical framework due to its smaller footprint.

ademup 11y ago

Problems like eg: the docs dropdown not able to be fully viewed in landscape mode on my phone always bring me back to larger projects like bootstrap. Extensive testing across multiple devices, browsers, and oses is crucial to me.

x0 11y ago

Why do I need npm or bower to install it? It's a 2kb css file. Now I do know what npm and bower are, however another web designer might not. So I think a link to the file itself would be handy.

notinreallife 11y ago
https://github.com/milligram/milligram/tree/master/dist https://github.com/milligram/milligram/tree/master/dist
- x0 11y ago
  Haha, cheers lad.
trengrj 11y ago
While I agree a link to the file would be better, the frontend move towards npm and bower is due to greater professionalism in this area. It is fair easier to manage versions and automate installations by using npm and bower.
- sametmax 11y ago
  Moving to bower recently ? Are you sure it's not Yeoman ? Or Webpack ? Or maybe it's maybelline.
  - tragic 11y ago
    Yes, I know everyone's affecting to be jaded about JS tooling these days, but good luck downloading a package with webpack (build runner) or yeoman (application scaffolder). Your comment is a bit like sarcastically asking "what do we build C projects with these days? Make? Lint? Valgrind?"
    - dingdingdang 11y ago
      Except C actually NEEDS building whereas JS do not. But then using all of these command-line tools makes JS start to look more like a 'real' programming language and now any noob can't just walk in and take my job since I obfuscated the hell out of something essentially simple. It is simple Machiavellian protectionism applied at rapid pace. Back in the day it was done within the purposely obscure UNIX environment (not just anyone can be sysadmin!) and now its being re-applied to web environment.

jbpetersen 11y ago

Anywhere good to browse a collection of things like this?

franciscop 11y ago
I know this one for JS, but not for CSS: http://microjs.com http://microjs.com However when I published my own css library few recommendations popped up: - Pure CSS [ http://purecss.io/ http://purecss.io/ ] - Min CSS [ http://mincss.com/ http://mincss.com/ ] - Skeleton [ http://getskeleton.com/ http://getskeleton.com/ ] - Picnic CSS (my own) [ http://picnicss.com/ http://picnicss.com/ ]
- grosskur 11y ago
  Also: - Basscss [ http://www.basscss.com/ http://www.basscss.com/ ] - Tachyons [ http://tachyons.io/ http://tachyons.io/ ]

franciscop 11y ago

Hi there, I am the creator of Picnic CSS [1], a 5kb library similar to this one. I love the page and the logo, really minimalist and clean. A couple of tips for the library: - Subtle animations. It doesn't take many bytes, but it makes it look much better - :active status gives visual feedback that you are clicking the element - The grid doesn't accept gutter nor reversing order by css, which makes it not really mobile-friendly for alternating patterns in a page. There's not really a single good solution in css for both [2] - <select> looks just like a normal input without down arrow in Firefox Keep it up (: [1] http://picnicss.com/ http://picnicss.com/ [2] https://github.com/picnicss/picnic/issues/58 https://github.com/picnicss/picnic/issues/58

wanda 11y ago
A tip for you: please don't use background-attachment:fixed because it forces a repainting and the resultant drop below 60fps does your lib no credit. If you alter your approach you can still achieve the same effect by making use of position:fixed with either transform:translateZ(0) or will-change:transform to establish a new paint layer and enable hardware acceleration, so scrolling down (a common activity) doesn't drop below 60fps.
- franciscop 11y ago
  That would explain the performance problems, thank you so much!
  - wanda 11y ago
    No problem.

intrasight 11y ago

On my last web project (a couple years back now) I used GUSS (https://github.com/guardian/guss https://github.com/guardian/guss) which I liked because it was light-weight and modular. But it hasn't had any activity recently and so I'm in the market for a new CSS framework. I was looking at Bootstrap 4, which certainly has a lot going for it. It has created a community - including template developers. But Bootstrap is big and it presumably still uses JQuery, which I've dropped from my toolkit. Milligram looks promising. Are there other similar projects?

mkoryak 11y ago

why do i keep seeing forms where labels use the `for` attribute instead of wrapping the input in the label? relying on ids makes creating components a pain in the ass

scarecrowbob 11y ago
IIRC, the name attribute on the input element serves to tie it to its label as well as the id. I don't think that you need an id on the input element if you have a name.
- vbezhenar 11y ago
  No, you must use id. Check it out: https://jsbin.com/yevuzejebi/edit?html,output https://jsbin.com/yevuzejebi/edit?html,output
memco 11y ago
One reason might be for styling. Otherwise you may have to resort to wrapping the label's text in a span or something to target the label's text separately. You wouldn't use the id for styling, just to link the label and the input for accessibility.
- mkoryak 11y ago
  I dint style by id, but adding logic to make sure that the id is unique for reusable components is the sucky part
- mkoryak 11y ago
  I dint style by id, but adding logic to make sure that the id is unique for reusable components is the sucky part

dredmorbius 11y ago

Coming from a user/CSS perspective -- I'm hugely disillusioned with most current web design, but this actually Isn't Awful. Particular kudos for going with REM units. My overall preference is to set: html { font-size: medium; } Then base subsequent sizes off of REM multiples. This ensures that users who do set default font size to something sane aren't suffering, while those who don't actually have a reasonable basis for zooming the page in and/or out. A slight margin for reasonably-large mobile sizes (10" tablet here) would also help a bit.

muzani 11y ago

I really like this. I was about to ask what makes it better than bootstrap, skeleton, foundation etc. But it's really straightforward, so I can focus on raw code instead of thinking of nice formatting. Sometimes I just want a page to display data. This works perfect for that.

jrapdx3 11y ago

Several comments mention Skeleton as possible alternative to Milligram. Unfortunately, as pointed out, Skeleton appears to be dead, i.e., no project activity for a year. I've also used Skeleton in several projects though it required customization of UI element sizes, max grid width, etc. On the whole Skeleton worked well enough and sufficiently lightweight. For all Skeleton users, the project was forked a few months ago and now lives on as skeletonframework, available here: https://github.com/skeletonframework/skeletonframework https://github.com/skeletonframework/skeletonframework

deleted 11y ago
[deleted]

andrewingram 11y ago

I like seeing CSS frameworks as a source of inspiration. Now that i'm using CSS Modules I can't really see myself using any directly. It'd be interesting to see what types of frameworks crop up with CSS Modules in mind.

ekryski 11y ago

Nice work! I've been using base (http://www.basscss.com/ http://www.basscss.com/) for a couple years now. Any idea how it compares to this other than being ~1kb bigger?