5 ms·

Ask HN: Best minimal CSS Framework for side project

12 points by lormayna 11y ago

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.

petepete 11y ago
Skeleton, perhaps. http://getskeleton.com/ http://getskeleton.com/
- flxn 11y ago
  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.
andrei-m-visan 11y ago
I use Pure CSS from Yahoo. It is very light and easy to use. http://purecss.io http://purecss.io
- sheraz 11y ago
  Seconded. I've been using this for about 18 months on various projects. Really like it.
smonff 11y ago
http://knacss.com/ http://knacss.com/ is very interesting but the documentation is French only :(
- S4M 11y ago
  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.
  - smonff 11y ago
    Look the difference https://lut.im/RCbxJiKqPR/Vsz5iYdI0EYaYRfE.png https://lut.im/RCbxJiKqPR/Vsz5iYdI0EYaYRfE.png
mping 11y ago
http://iamsurface.com 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/ https://imperavi.com/kube/css/ almost not minimal but pretty cool http://jxnblk.com/gravitons/ http://jxnblk.com/gravitons/ really minimal
thrilleratplay 11y ago
I use http://www.basscss.com/ http://www.basscss.com/. Version 8 was just released which was restructured into standalone modules. Use what you need.
franciscop 11y ago
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
- lormayna 11y ago
  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.
  - franciscop 11y ago
    Awesome, what components is it missing? If they make sense within Picnic's goals I might add them (:
    - lormayna 11y ago
      A modal for example
      - franciscop 11y ago
        Oh but there are modals: http://picnicss.com/documentation#modal http://picnicss.com/documentation#modal Edit: although the html is quite ugly, sometimes I wonder if I should just add some bits of js
        lormayna 11y ago
        A footer components would be great :)
        franciscop 11y ago
        Completely agree, I tried in the past but it felt too invasive. Maybe a few tamplates which include nav/footer layouts would be nice
threesixandnine 11y ago
http://mincss.com/ http://mincss.com/
rgovind 11y ago
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?
vincent_s 11y ago
Not really "minimal" but it's very easy to get started with and has everything you need: http://semantic-ui.com/ http://semantic-ui.com/
rajacombinator 11y ago
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.
cabbeer 11y ago
On a slight tangent, does anyone know what the best minimal grid is? I'm looking some something I can can use when prototyping.

12 points by lormayna 11y ago

petepete 11y ago

Skeleton, perhaps. http://getskeleton.com/ http://getskeleton.com/

flxn 11y ago
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.

andrei-m-visan 11y ago

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

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

smonff 11y ago

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

S4M 11y ago
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.
- smonff 11y ago
  Look the difference https://lut.im/RCbxJiKqPR/Vsz5iYdI0EYaYRfE.png https://lut.im/RCbxJiKqPR/Vsz5iYdI0EYaYRfE.png

mping 11y ago

http://iamsurface.com 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/ https://imperavi.com/kube/css/ almost not minimal but pretty cool http://jxnblk.com/gravitons/ http://jxnblk.com/gravitons/ really minimal

thrilleratplay 11y ago

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

franciscop 11y ago

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

lormayna 11y ago
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.
- franciscop 11y ago
  Awesome, what components is it missing? If they make sense within Picnic's goals I might add them (:
  - lormayna 11y ago
    A modal for example
    - franciscop 11y ago
      Oh but there are modals: http://picnicss.com/documentation#modal http://picnicss.com/documentation#modal Edit: although the html is quite ugly, sometimes I wonder if I should just add some bits of js
      - lormayna 11y ago
        A footer components would be great :)
        franciscop 11y ago
        Completely agree, I tried in the past but it felt too invasive. Maybe a few tamplates which include nav/footer layouts would be nice

threesixandnine 11y ago

http://mincss.com/ http://mincss.com/

rgovind 11y ago

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?

vincent_s 11y ago

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

rajacombinator 11y ago

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.

cabbeer 11y ago

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