
Mini.css – Minimal, responsive, style-agnostic CSS framework - zoria
http://minicss.org/
======
nateberkopec
One of the reasons I've switched to a microframework (Milligram) is that the
source is extremely easy to read and understand.

Compare mini.css
([https://github.com/Chalarangelo/mini.css/blob/master/src/min...](https://github.com/Chalarangelo/mini.css/blob/master/src/mini/_input_control.scss#L83))
to Milligram
([https://github.com/milligram/milligram/blob/master/src/_Form...](https://github.com/milligram/milligram/blob/master/src/_Form.sass)).

Unless you're planning on inlining your CSS in the head tag, IMO the network
difference between 7kb and 20kb of CSS is just splitting hairs. I've gotten
far more out of optimizing my CSS for programmer understanding than network
size (though the two tend to be correlated!).

~~~
sidmitra
Milligram sounds great for my blog, which i want to keep minimal.

Are there any examples of sites(gallery) of sites built with milligram? I'd
like to see some real-world examples.

~~~
nateberkopec
Not sure. My blog uses Milligram inlined into the head tag:
[https://www.speedshop.co/blog/](https://www.speedshop.co/blog/)

------
dmix
This looks nice. I like the name. But poking through the code it seems to be
more of a slimmed-down Bootstrap rather than a fresh/new approach to
minimalist CSS. Which has it's uses no doubt.

I personally love [http://basscss.com/](http://basscss.com/) for a minimal and
side-effect free (the real goal) CSS framework, as it has one of the best
class naming schemes I've seen.

Each component is focused on doing one thing and one thing well. You basically
build up the styles with each class you add to an element. Composed via a
combinations of smaller pieces, unix style, rather than complex multi-layered
components with deep nesting. Which is an interesting approach when you try to
apply the same idea to your own CSS. See the Design Principles for more:
[http://basscss.com/v7/docs/reference/principles/](http://basscss.com/v7/docs/reference/principles/)

The code is also very readable and integrates perfectly with PostCSS. They
also have a React version.

~~~
ninjaranter
I liked basscss in principle, but I feel like the following examples from the
homepage are missing the point/ will lead to un-maintainable code.

    
    
      <h2 class="h1">Larger than default h2 style, but semantically correct</h2>
    

... why not just use a h1?

I also don't see how

    
    
      <p class="bold text-decoration-none caps">Bold</p>
    

is a big step up from doing

    
    
      <p style="font-weight: bold; text-transform: uppercase; text-decoration: none">Bold</p>
    

Am I missing the appeal here?

~~~
randomsofr
> <h2 class="h1">

wow, i just threw up in my mouth

~~~
mikegioia
Yea, it should be:

    
    
        <h2 class="larger">
    

or something. Using elements as class names is insane.

------
sfilargi
Offtopic but honest question: Is submitting something daily until you get
enough points to get to the front page something that is acceptable in HN?

Are there any rough guidelines about how often can one submit something?

PS: Only asking for my own education for my future submissions.

[https://news.ycombinator.com/item?id=14255809](https://news.ycombinator.com/item?id=14255809)

[https://news.ycombinator.com/item?id=14244693](https://news.ycombinator.com/item?id=14244693)

[https://news.ycombinator.com/item?id=14227177](https://news.ycombinator.com/item?id=14227177)

[https://news.ycombinator.com/item?id=14218777](https://news.ycombinator.com/item?id=14218777)

[https://news.ycombinator.com/item?id=14163754](https://news.ycombinator.com/item?id=14163754)

~~~
detaro
This even had a discussion already 2.5 weeks ago...
[https://news.ycombinator.com/item?id=14120796](https://news.ycombinator.com/item?id=14120796)

No, that's not ok.

(Things that don't get attention can be reposted, but 5 times within a week
feels a bit much to me)

------
vikingcaffiene
I love stuff like this and it looks fantastic, but without support for at
_least_ IE10 I would be loath to use it. IMHO the value proposition of a CSS
framework is that it saves time and looks good without having to think about
it. If I have to spend time fighting browser bugs and writing CSS hacks to
deal with incompatibilities and/or layout issues, that's the opposite of that.
Hopefully the developers will add support for some legacy browsers perhaps as
an optional addition similar to how JQuery does it.

Fantastic work so far to the developers that said. I will be keeping an eye on
this. Good luck!

~~~
usaphp
With automatic windows update there aren't really that many users left who are
using IE version lower than 11. Browser stats metrics show that only 0.1% of
all users are on IE < version 11.

~~~
extra88
What really matters are the stats for one's own users but who's stats say
<IE11 is less than 0.1%? NetMarketShare reports of global desktop browsers for
April [0] says:

IE11 13.62% IE8 2.25% IE9 1.32% IE10 1.06%

Wikimedia global all-device browsing for April says:

IE11 4.8% IE7 3.0% IE9 0.43% IE6 0.38% IE8 0.25% IE10 0.23% IE4 0.22% (! I
don't know what this is about, maybe an old mobile version?)

[0] [https://www.netmarketshare.com/browser-market-
share.aspx?qpr...](https://www.netmarketshare.com/browser-market-
share.aspx?qprid=2&qpcustomd=0)

[1] [https://analytics.wikimedia.org/dashboards/browsers/#all-
sit...](https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-
browser)

~~~
Zenbit_UX
Yes exactly, I know I'm late to the discussion but I hate when people state
you font have to support a browser because it only has x% market share.

It's all about your own users. I'm doing UX and front-end for a company that
deals with a lot of IE8 users... -_-

The ongoing theory is that they are on hacked XP copies since that traffic is
coming out of China.

~~~
extra88
I wish they could somehow learn about Firefox, which is still supported on
Windows XP. Then it would basically be just the people with old phones and
6-7+ year-old Macs that would require fallbacks.

------
batmansmk
Interesting. The promise of making a small CSS is a bit overblown. With a
build step or module mechanism, most frameworks can be smaller than this.

On another note, we had a great blast using
[http://tachyons.io/](http://tachyons.io/) It was a game changer for me, and
made me remarry CSS. And spoiler alert, it was way smaller after a build step
than 7KB, while not feeling like working in tight pants.

~~~
cel1ne
I just logged in just to upvote this.

Tachyons is where you go when you finally want to be happy with CSS.

I ported it for react-native, so you can style mobile-apps with it as well:
[https://github.com/tachyons-css/react-native-style-
tachyons](https://github.com/tachyons-css/react-native-style-tachyons)

------
sAbakumoff
"So far, the Infinite monkey theorem is just giving us an infinite number of
CSS frameworks, and no Shakespeare"

------
asaibx
People interested in minimal CSS frameworks might want to check out
[https://github.com/dohliam/dropin-minimal-
css](https://github.com/dohliam/dropin-minimal-css)

It's a CSS switcher for previewing minimal frameworks, which you can drop in
to any page or site to quickly preview what it would look like in 50 or 60
different CSS frameworks (including mini, pavilion, basscss, milligram, and
others mentioned in this thread). There's even a bookmarklet to preview
switching the css on any site.

~~~
xweb
This is a great tool, thanks for posting this! I had not seen this before, and
I will find it very useful for prototyping.

------
anilshanbhag
I feel this is wrong way to optimize: First, bootstrap gzipped is <100KB after
removing font. Check any reasonable site from youtube to amazon, they download
~ 1MB gzipped data on load and do just fine. Second, if you are really
concerned, you can just remove a lot of components from bootstrap to reduce
its size. I do it for my project where i don't need for example the glyphicon,
carousel, etc.

When using a framework, you want it to just work on all platforms. When I look
at bootstrap issues, I see so many issues of the form X does not work on Y and
then it gets fixed. These little kinks are hard to get right and I am not sure
its worth reinventing the wheel unless there is a clear benefit other than
size.

~~~
tclancy
>Check any reasonable site from youtube to amazon, they download ~ 1MB gzipped
data on load and do just fine.

For users with high-speed connections on computers or newer phones. In normal
first-world conditions. Your users are not everyone else's users.

------
StavrosK
Ah, this will be a nice addition to
[https://www.lightentheweb.com/libraries/](https://www.lightentheweb.com/libraries/),
thanks. You can also find other libraries like this one on that page.

~~~
allover
Could I suggest adding 'use bootstrap properly' to this list (and perhaps link
to [1] and/or the LESS/Sass source). Bootstrap is modular. There's no need for
a 'light' alternative, and in many cases I believe using Bootstrap 3 from
Sass/LESS source is still the better option compared to the majority of these
mini CSS frameworks. More comprehensive, better browser compat, likely 1000s
more hours of dev braincycles (just go take a look at all the Github issues
for Bootstrap to see all the work that has gone into it).

(Edited to be nicer/more-helpful).

[1] [http://getbootstrap.com/customize/](http://getbootstrap.com/customize/)

~~~
amichal
This is what saved bootstrap as our goto framework in our shop. Every new
project starts with most modules commented out and some early attention to
setting the global variables and using the mixing. This keeps things small
while new modules are a simple uncomment away.

Edit: examples

[https://github.com/greenriver/boston-
cas/blob/master/app/ass...](https://github.com/greenriver/boston-
cas/blob/master/app/assets/stylesheets/helpers/_variables.scss)

[https://github.com/greenriver/boston-
cas/blob/master/app/ass...](https://github.com/greenriver/boston-
cas/blob/master/app/assets/stylesheets/_bootstrap-custom.scss)

~~~
allover
Yep, exactly what I do, +1 for using bootstrap's variables as much as possible
too, I don't think a lot of people realise how powerful bootstrap's variables
are, and can greatly cut down the amount of CSS you write.

------
AdmiralAsshat
This would be great for a static, CSS-only site I'm developing
([http://www.nothingofvalue.org](http://www.nothingofvalue.org)).

However, the framework says its responsive, yet the navigation menu doesn't
resize on small screens. That's a bit disappointing. I'd like to have
something that will give a chevron or hamburger navigation menu without
resorting to Javascript.

~~~
naasking
Take a look at PicnicCSS. It does what you want.

------
reynoldsbd
At first I got this confused with mincss [1], which is my go-to for quick and
dirty sites. This looks like it could be a good option too!

[1] [http://mincss.com/](http://mincss.com/)

~~~
owenversteeg
That's great to see! I'm the creator of Min. I'm working on a new version, any
suggestions?

~~~
reynoldsbd
Not sure if it's already possible, but it would be nice to have nested
navigation (like with drop-down sections).

Even without that, though, Min is really exactly what I think of when I need a
lightweight framework that gets out of my way.

Maybe some better sea monster repellent? ;-)

------
vinceguidry
Why is IE missing from the support diagram? Are makers of new libraries not
expected anymore to support it?

~~~
taormina
Should they always have to?

~~~
vinceguidry
No, and that's what I was asking. Have we reached the point where we can
ignore IE?

~~~
bpicolo
IE8/9/10 for most purposes, yep. IE11, no (IE11 is used more than Edge as far
as I've seen)

~~~
vinceguidry
Which means the answer is no, we can't ignore IE yet and that means I won't be
touching this library with a 10 foot pole.

------
matt4077
The time of CSS frameworks has really come and gone. There were four use
cases, and all of those are more and more obsolete:

\- "The Grid", which at this point has migrated to the browsers with Flexbox
and (soon) Flex Grids

\- A pretty skin replacing the browsers' default rendering of elements. These
have improved, albeit only slightly. CSS has also become easier and you can
easily do this yourself in 50 lines or so

\- Fixing browser bugs/inconsistencies, which have diminished to a fraction of
where we used to be

\- "Components", which may the last remaining use case, but which have also
become much easier to do yourself due to sane grid layouts

~~~
teleclimber
> and (soon) Flex Grids

If you mean CSS Grid, and you can afford to target only modern browsers (with
usable fallback CSS for the others) then you're good to go right now. Even
Edge is working on bringing their implementation up to the spec right now[2].

I agree with your other points too. CSS frameworks don't bring that much, and
end up clouding your ability to write and understand raw css IMO.

[1] [http://caniuse.com/#search=grid](http://caniuse.com/#search=grid) [2]
[https://wpdev.uservoice.com/forums/257854-microsoft-edge-
dev...](https://wpdev.uservoice.com/forums/257854-microsoft-edge-
developer/suggestions/6514853-update-css-grid)

------
colept
It looks neat but I'm left wondering what sets this one apart from the many
others in what seems like a flavor of the week.

It's minimal indeed, but almost too minimal. In my experience working with CSS
frameworks, the "there's a class for that" pattern is almost always not enough
and it's much easier to write rules to handle customization. That leaves out
both developers that aren't designers and designers that develop.

Applications aside, the semantics of some of the content is not up to date
(for example <section> vs <div class="section">).

~~~
zoria
The semantics are reasonably outdated, but I wonder if part of this is due to
certain things like using <section> might affect content placement and/or
nesting (section classes are used only for cards so what if a card is inside a
<section>?).

------
Achshar
I am convinced now that these micro frameworks are not the way to go (in my
very humble experience). CSS is super easy and simple. And unless you want to
support IE, it's not nearly the main pain point, especially in contrast with
JS which has room for much more trouble.

A week of genuine effort in learning the small nits and bits of CSS will go a
long way.

~~~
rhencke
What would you recommend as a learning resource? If you had a week, and wanted
to dig in and learn CSS in the way you describe, what would your ideal
curriculum look like?

~~~
Achshar
A static website I think is a good way. The most important part is layout.
Once you master flex and css selectors, everything else is a derivative one
way or another.

It's probably not a good idea to focus an entire week on CSS alone. It's more
economical and practical to spend a week's worth of hours in an otherwise
broader project. That gives you real, practical experience in building real-
world UI.

------
ablomen
It looks great at first glance. A big problem though is that it styles basic
elements. If for example you want to use a <table>, <mark> or <nav> where it
would make sense in a custom element you'll have to reset all the styles of
the library before adding your own.

~~~
spankalee
If your custom elements put their internals in shadow roots they'll be
protected from page styling.

~~~
ablomen
Sorry custom elements might have been the wrong term to use. I mean custom
interfaces, say an image gallery or a realtime search box where you would use
elements like buttons and input's in a different way then the usage this
framework defines for you. Using a nav both in your header and sidebar is a
different example where these are not good defaults

------
slamus
IE EDGE 12 for Minimum Support ? Thanks but no thanks !

~~~
jwarren
Edge 12 is the first version of Edge. I'm guessing it's due to modern Flexbox
support.

~~~
zoria
Older browsers like IE are supported, just not fully. So they say at least...

------
tmaly
I use bourbon.io with Sass

Tyson, one of the contributors, helped me get setup.

My css is now a compressed 4k for the entire project.

~~~
kyle6884
+1 for bourbon; been using it for a little over a year now, and love it over
Bootstrap

------
forlorn
I've switched to Pavilion([http://www.pavilion.io/](http://www.pavilion.io/)),
it's very easy to figure out, small and SASS-based. Cannot recommend enough!

------
prashnts
It looks great, except one nitpick.

Exploiting `radio` input for things like Tabs and Accordions [0] is surely a
sweet trick, but I don't think it's a great idea to use it where more than a
few people would maintain the code.

Not only that, it also breaks completely in anything below "modern browsers".
I get that this framework doesn't target those browsers, but I think these are
the kind of things Javascript is for. It shouldn't be done by CSS.

[0] [http://minicss.org/tab.html#tab-title](http://minicss.org/tab.html#tab-
title)

~~~
ravenstine
I have actually pulled that trick off a few times for things like nav drawers
and in over a year we have never gotten a single complaint around one of those
elements not working. Of course it's entirely dependent on your audience and
what you are trying to achieve, but I have found it very safe to use radio
buttons for this purpose in our content.

------
SagelyGuru
Has anybody here any experience with/opinions on/ W3.CSS ?
[https://www.w3schools.com/w3css/default.asp](https://www.w3schools.com/w3css/default.asp)
. It seems like the obvious first choice to me and has pretty much everything
I might ever need.

How does it compare to the above and the other css frameworks mentioned here?

~~~
randomsofr
> obvious first choice

why?

People tend to start with bootstrap, and move from there to a more specific
framework with minimal code.

Also i don't trust w3schools, they just took advantage of the name w3 and
people often thing they are related to w3 but they are not.

~~~
SagelyGuru
Ah, thanks for that information! I was one of those who thought that w3schools
were w3 and that was my mistaken reason as to your question "why?".

That skullduggery aside, their css seems comparable to the rest discussed
here.

------
mrborgen
Very well done! Just tried it, and like it a lot.

I created a little screencast of the core concepts of Mini.css here, in case
anyone is interested in quickly grasping how it works:

[https://scrimba.com/casts/cast-1945](https://scrimba.com/casts/cast-1945)

[Edit: there was an issue with the audio in the previous screencast, so I
created a new one]

------
kbr
I like it, but I personally like microframeworks that just style everything,
and maybe provide a grid, like Wing [1]. (Disclaimer: I'm the author).

Having some styles provided by default, instead of having more classes to
remember would be nicer. That's just my style.

Overall, it looks great!

[1] [http://usewing.ml](http://usewing.ml)

~~~
aparadja
Wing's landing page has some big layout problems on mobile, at least on iOS:
[http://i.imgur.com/2R9USMM.jpg](http://i.imgur.com/2R9USMM.jpg)

It's not a great first impression for a layout framework.

~~~
kbr
You're right. I'll get that fixed up. What iOS device and browser are you
using?

By the way, that is a problem in the implementation of the site, not Wing :)

------
jaequery
i really like bulma, makes most sense to me. any bulma fans in here?

~~~
prh8
I guess I'm the only one...

------
hartator
The website doesn't feel well on iPhone. What's you guys recommendations for
CSS franwork nowdays?

------
nkkollaw
I really love how many things seem to be compatible with Bootstrap.

Most sites I've made in the past few years use Bootstrap—specially the grid,
so I'd image this will really ease adoption if I'm not the only one who's used
Bootstrap extensively.

------
msimpson
The site uses its own framework, but the menu isn't responsive?

------
SippinLean
Why would I use this over Bootstrap 4 (if it's ever released)?

BS4 seems to include everything here and more (I can comment out what I don't
need before building). BS4 also supports IE10+, where a non-trivial amount of
my conversions come from. The flexbox grid/naming convention seems identical
at a glance.

------
vpresident
I can't take this seriously when their style is broken in the docs:
[https://postimg.org/image/k13bpu1hn/](https://postimg.org/image/k13bpu1hn/)

------
asc123
the other browser images don't collapse on mobile. the page expands leaving
white space :/

------
burce
Eh, I'll stick with Pure.

------
dugluak
what is the difference between this and bootstrap?

~~~
jwarren
Without reading the docs in depth, there's a difference of about 142KB of
render-blocking CSS. I'm sure the API and functionality depth is very
different too.

~~~
dugluak
Well, I meant why should one use this over bootstrap.

~~~
zoria
Faster loading times on mobile come to mind.

------
RodericDay
I don't think I can use software that is "built with <3"

~~~
StavrosK
I, too, exclusively use software that is built with >=3.

