TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Milligram: A minimalist CSS framework

183 pointsby somecoderover 9 years ago

21 comments

franciscopover 9 years 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:<p>- Subtle animations. It doesn&#x27;t take many bytes, but it makes it look much better<p>- :active status gives visual feedback that you are clicking the element<p>- The grid doesn&#x27;t accept gutter nor reversing order by css, which makes it not really mobile-friendly for alternating patterns in a page. There&#x27;s not really a single good solution in css for both [2]<p>- &lt;select&gt; looks just like a normal input without down arrow in Firefox<p>Keep it up (:<p>[1] <a href="http:&#x2F;&#x2F;picnicss.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;picnicss.com&#x2F;</a> [2] <a href="https:&#x2F;&#x2F;github.com&#x2F;picnicss&#x2F;picnic&#x2F;issues&#x2F;58" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;picnicss&#x2F;picnic&#x2F;issues&#x2F;58</a>
评论 #10961879 未加载
x0over 9 years ago
Why do I need npm or bower to install it? It&#x27;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.
评论 #10961013 未加载
评论 #10961066 未加载
goatslackerover 9 years ago
Love seeing these microframeworks pop-up. I wrote my own a while back for kicks <a href="http:&#x2F;&#x2F;goatslacker.github.io&#x2F;lotus.css&#x2F;" rel="nofollow">http:&#x2F;&#x2F;goatslacker.github.io&#x2F;lotus.css&#x2F;</a><p>I would love to be able to make a custom builds of milligram by shedding some of the modules I don&#x27;t care about. This could also open it up to other modules being added like Modals or whatever.
评论 #10960907 未加载
nateberkopecover 9 years ago
For anyone keeping track at home, Bootstrap is 25KB, gzipped, with all modules included. If you don&#x27;t include all the modules&#x2F;stylesheets, you can easily get it down to half that. Milligram is 2.7KB.<p>Still, I like the flexbox-based grid.
评论 #10961342 未加载
CharlesWover 9 years ago
This is a very nice looking CSS stylesheet. Can someone explain what makes this a &quot;framework&quot;?<p>(I did look through the docs, but didn&#x27;t see the kind of modular or &quot;designed to be built on&quot; philosophy expressed in frameworks like Pure CSS.)
评论 #10960597 未加载
评论 #10960769 未加载
评论 #10960918 未加载
评论 #10961691 未加载
ademupover 9 years 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.
matiover 9 years ago
Also check out <a href="http:&#x2F;&#x2F;getskeleton.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;getskeleton.com&#x2F;</a>
评论 #10960650 未加载
sarrephover 9 years ago
Great to see this on the front page!<p>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.<p>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.<p>Looking forward to tracking its development but it already has everything I want to get a site up and running quickly.
jrapdx3over 9 years 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.<p>I&#x27;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.<p>For all Skeleton users, the project was forked a few months ago and now lives on as skeletonframework, available here: <a href="https:&#x2F;&#x2F;github.com&#x2F;skeletonframework&#x2F;skeletonframework" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;skeletonframework&#x2F;skeletonframework</a>
评论 #10962367 未加载
haxiomicover 9 years ago
Hey, bug report: the page doesn&#x27;t render correctly on iPhone, testing with iOS 7, the page height is many many times the height of the screen, it&#x27;s miles of scrolling emptiness before I get to content.<p>Can&#x27;t debug here but this usually caused by using the vh units in CSS: there&#x27;s a bug with iOS that causes the vh unit to behave improperly. This may have been fixed in later versions of iOS<p>Anyone running a later version of iOS seeing the same thing?
评论 #10960977 未加载
评论 #10960974 未加载
jbpetersenover 9 years ago
Anywhere good to browse a collection of things like this?
评论 #10961360 未加载
muzaniover 9 years ago
I really like this. I was about to ask what makes it better than bootstrap, skeleton, foundation etc. But it&#x27;s really straightforward, so I can focus on raw code instead of thinking of nice formatting.<p>Sometimes I just want a page to display data. This works perfect for that.
intrasightover 9 years ago
On my last web project (a couple years back now) I used GUSS (<a href="https:&#x2F;&#x2F;github.com&#x2F;guardian&#x2F;guss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;guardian&#x2F;guss</a>) which I liked because it was light-weight and modular. But it hasn&#x27;t had any activity recently and so I&#x27;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&#x27;ve dropped from my toolkit. Milligram looks promising. Are there other similar projects?
dredmorbiusover 9 years ago
Coming from a user&#x2F;CSS perspective -- I&#x27;m hugely disillusioned with most current web design, but this actually Isn&#x27;t Awful.<p>Particular kudos for going with REM units. My overall preference is to set:<p><pre><code> html { font-size: medium; } </code></pre> Then base subsequent sizes off of REM multiples. This ensures that users who <i>do</i> set default font size to something sane aren&#x27;t suffering, while those who don&#x27;t actually have a reasonable basis for zooming the page in and&#x2F;or out.<p>A slight margin for reasonably-large mobile sizes (10&quot; tablet here) would also help a bit.
nickysielickiover 9 years 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.<p>I&#x27;m going to be remaking my personal website soon with this. Thanks for posting.
Edmondover 9 years ago
love how those of us who are coders but not designers can now create good looking apps. These frameworks are very helpful.
评论 #10961740 未加载
mfulover 9 years 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&#x2F;functions in Milligram.<p>Also, defining pairs of CSS classes to accommodate the user rounding in either direction made me smile (ie .column-66 === .column-67).<p>Definitely going to try it out on my next project.<p>[1] getskeleton.com
评论 #10960763 未加载
andrewingramover 9 years ago
I like seeing CSS frameworks as a source of inspiration. Now that i&#x27;m using CSS Modules I can&#x27;t really see myself using any directly. It&#x27;d be interesting to see what types of frameworks crop up with CSS Modules in mind.
ekryskiover 9 years ago
Nice work! I&#x27;ve been using base (<a href="http:&#x2F;&#x2F;www.basscss.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.basscss.com&#x2F;</a>) for a couple years now. Any idea how it compares to this other than being ~1kb bigger?
mkoryakover 9 years ago
why do i keep seeing forms where labels use the `for` attribute instead of wrapping the input in the label?<p>relying on ids makes creating components a pain in the ass
评论 #10961874 未加载
评论 #10961645 未加载
jonathankorenover 9 years ago
I&#x27;m not a webdev, and the fascination with yet-another-framework for JavaScript is really cute, but I really really REALLY don&#x27;t get this. It&#x27;s it appears to be nothing more than a CSS stylesheet. So what?
评论 #10960965 未加载
评论 #10961118 未加载