Ask HN: Best minimal CSS Framework for side project | Hacker News Reader

Ask HN: Best minimal CSS Framework for side project

12 pointslormayna25 comments

Hi, I'm starting a small side project to learn web development and have fun. Could you suggest a good CSS Framework for it? My candidates are: https://github.com/picnicss/picnic (it seems the most simple) https://github.com/jgthms/bulma/ (very easy, but very minimal) https://milligram.github.io/ (more complete)

Fot javascript I want to use Vue.js because it's easy, clean and I can control it. Using Flask (Python) for backend.

View on HN

Hi lormayna, I'm the creator of Picnic CSS, thanks for considering it! If you don't mind me asking, why did you consider using Picnic and why wouldn't you choose using it? I'm trying to improve it constantly and I'd really appreciate your opinion from the point of view of "learning web development" (:

If you have any question you can just reach me here or on github

I like PicnicCSS because it's simple, it's clean and it's nice. It has almost all the components that I need for my ideas.

Awesome, what components is it missing? If they make sense within Picnic's goals I might add them (:

A modal for example

Oh but there are modals: http://picnicss.com/documentation#modal

Edit: although the html is quite ugly, sometimes I wonder if I should just add some bits of js

A footer components would be great :)

Completely agree, I tried in the past but it felt too invasive. Maybe a few tamplates which include nav/footer layouts would be nice

Bravo! Good job on the framework. I just browsed through docs and it seems perfect for what I need for my next project.

Imho it has all small css framework needs to have. Keep it small and fast!

a responsive grid that handles nesting is very difficult to do across the majority of devices. I ended up going with bootstrap after trying to find a minimal css framework that would handle all the different edge cases.

100% agree. Right now I'm deprecating the current grid based on ungrid in favor of a better float based grid [1]. I completely believe you, the most painful thing (maybe the only one?) for Picnic was definitely the grid, too many edges, no good model in css (and don't get me started on flexbox [2]).

[1] https://github.com/picnicss/picnic/issues/71

[2] https://github.com/picnicss/picnic/issues/58

When going to http://picnicss.com/documentation#checkbox on an iPhone (iOS 9.2.1), the checkmark doesn't hide when it's unchecked; it just gets bigger. So on your example, the default selected boxes just look like they have big checkmarks in them. Sorry I don't have the time to write an issue at the moment.

I use Pure CSS from Yahoo. It is very light and easy to use. http://purecss.io

Seconded. I've been using this for about 18 months on various projects. Really like it.

Skeleton, perhaps.

http://getskeleton.com/

I really like Skeleton because it's so simple. Sadly it looks like the author has abandoned the project but there are some forks on Github.

IMO if this is a side project to learn web development, your best bet is to pick one of the nice looking examples given in this thread, and then don't use it, just imitate the style.

Why? Because if you use a framework rather than learning CSS, you will just waste time learning that framework's quirks which will not transfer over to anything. Most of the desirable features of these frameworks can easily be replicated with flexboxes anyway. Your own effort may not come out quite as smooth looking but you will learn a lot more along the way.

I say this not as a CSS expert, but a guy in a similar situation who wasted a lot of time fiddling around with Bootstrap only to end up ditching it almost 100% in favor of custom CSS.

http://iamsurface.com pure css material, not updated in a while but looks great and has modals with pure css https://imperavi.com/kube/css/ almost not minimal but pretty cool http://jxnblk.com/gravitons/ really minimal

http://knacss.com/ is very interesting but the documentation is French only :(

It's neat indeed, but I don't see the difference between the normal grid and the responsive grid at the bottom of the page you linked.

Look the difference https://lut.im/RCbxJiKqPR/Vsz5iYdI0EYaYRfE.png

I use http://www.basscss.com/. Version 8 was just released which was restructured into standalone modules. Use what you need.

Not really "minimal" but it's very easy to get started with and has everything you need: http://semantic-ui.com/

Tangentially related, I want to draw a (potentially non-responsive) layout and then have CSS generated for me. I am hoping my development time will be faster. Is there a good website for this?

On a slight tangent, does anyone know what the best minimal grid is? I'm looking some something I can can use when prototyping.

http://mincss.com/

Reply on news.ycombinator.com