
Milligram: A minimalist CSS framework - somecoder
http://milligram.github.io/
======
franciscop
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
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
That would explain the performance problems, thank you so much!

~~~
wanda
No problem.

------
x0
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
[https://github.com/milligram/milligram/tree/master/dist](https://github.com/milligram/milligram/tree/master/dist)

~~~
x0
Haha, cheers lad.

------
goatslacker
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
ahh goatslacker, keep up the good work! i love alt.

------
nateberkopec
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
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?

~~~
random_rr
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
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
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.

~~~
franciscop
awesome, I plan on launching 100kb.org when I get some free time with some
tips to get pages under 100kb. Would you be interested in giving some tips?

~~~
random_rr
Sure, here's some notes I have from building the Shittalk Generator

Minify HTML
([http://www.willpeavy.com/minifier/](http://www.willpeavy.com/minifier/))

Minify CSS (YUICompressor)

Minify JS (Google Closure Compiler)

Enable gzip compression

Replace jQuery (29kB) with Zepto (9.6kB)

Remove Bootstrap.js dependancy (usually, you don't need it)

Heavy reliance on async ajax calls (only load visible page content, load
everything else on scroll using a function like below)

    
    
      $(window).ready(function () {
              $(this).one('scroll', function () { //only executes once
                  // call this data when a user scrolls down for the first time
                  // only do this with below-the-fold content
              });
          });
    

Make efficient database queries, bundle them together when you can.

Use loadCSS to asynchronously load non-essential CSS after the page has been
loaded:
[https://github.com/filamentgroup/loadCSS](https://github.com/filamentgroup/loadCSS)

Try out different CDN's - some CDN's have bootstrap.min.css around 30kb, and
other services have it compressed to 19kB (CDNJS works best for me)

Use the following sites to find what's impacting load times/page size:

[http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com...](http://tools.pingdom.com/fpt/#!/dVQE7B/http://daviseford.com/shittalk/)

[https://gtmetrix.com/](https://gtmetrix.com/)

[https://developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/)

~~~
franciscop
This is an awesome list that will be really useful and mostly front-end or
cross-(back-end) like gzip, which is awesome. Also the tools are a great plus,
thanks (:

------
CharlesW
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.)

~~~
puppetmaster3
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
I see. So I don't have to do anything, just include the stylesheet and my
buttons will look like that?

Neat.

------
ademup
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.

------
mati
Also check out [http://getskeleton.com/](http://getskeleton.com/)

~~~
vonklaus
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
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
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
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.

------
sarreph
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.

------
jrapdx3
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)

------
haxiomic
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?

~~~
OberstKrueger
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.

------
jbpetersen
Anywhere good to browse a collection of things like this?

~~~
franciscop
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
Also:

\- Basscss [ [http://www.basscss.com/](http://www.basscss.com/) ]

\- Tachyons [ [http://tachyons.io/](http://tachyons.io/) ]

------
muzani
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.

------
intrasight
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?

------
dredmorbius
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.

------
nickysielicki
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.

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

~~~
vanadium
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.

------
mful
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
I used Skeleton, but now Kube due to grid:

<row>

<column ...

------
andrewingram
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
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?

------
mkoryak
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

~~~
memco
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
I dint style by id, but adding logic to make sure that the id is unique for
reusable components is the sucky part

------
jonathankoren
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
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
Yes lots of times. So it's exactly what it looks like, a boilerplate. I'm
still not convinced why this is noteworthy.

