3 ms·

Ask HN: Which CSS framework would you use for a new project today?

7 points by whitepoplar 8y ago

jppope 8y ago
Bulma. It is beautiful
antoineMoPa 8y ago
Just a warning against Materialize, cause it might pop in the list: Most stackoverflow answers use jQuery, even though materialize does not depend on jQuery. There is a high reliance on a lot of JS code. Some basic things like italic and bold text do not exist. Otherwise, the column system and buttons are nice. And bulma: I found some class names hard to remember and too many "has-" that could be dropped. Otherwise, very useful, many features! I used it for shadergif.
Kagerjay 8y ago
Bootstrap, b/c of bootsnipp code snippets, large community, common-ground and stackoverflow answers. I would consider using tailwinds (b/c its a functional CSS framework). If there is a strongly coupled CSS framework mixed in with React,Vue, etc - such as material UI, that's another thing I'd use. I would not consider any other frameworks, except as a one-off project. For simple vanilla/ solo projects, I would rather roll with my own custom CSS. B/c I like the full granularity control over everything, without the bloat. But doing this everytime is repetitive. So I started rolling out my own minimalistic CSS framework yesterday. https://github.com/vincentntang/freshpoint https://github.com/vincentntang/freshpoint My goal is the following: (1) Minimal use of grids / columns system. We have CSS grid support already. (2) Consistent crossbrowser styling for things like buttons, lists, forms, tables, and everything that's a pain to normally style (3) One single .scss file you can edit and customize your own version of the framework (4) Both mobile and desktop first approach mixins. My reasoning is here https://vincentmtang.com/2018/10/27/modular-media-queries-with-sass-mixins-for-responsive-webdesign/ https://vincentmtang.com/2018/10/27/modular-media-queries-wi... (5) Simple documentation so anyone can modify their own version (6) Importing common files such as normalize and mini-resets (7) Easy to use and import with React if using CSS modules (8) SMACSS naming methodology and architecture. BEM is overkill for most projects ------------------------------------------------------------------ TL-DR: I don't like the bloat of other CSS frameworks, and I'm strongly opinionated on what I think is best. A good CSS framework should only account for 80% of common use cases, and leave the last 20% for the developer to do on a per-project basis. Good documentation goes along way, that's the next thing I'm working on.
ThePhysicist 8y ago
I think you can actually write some decent, responsive CSS yourself, at least if you don’t need to support very old browsers. Flexbox and grid framework make it pretty easy to build nice, functional and solid layouts without using frameworks.

7 points by whitepoplar 8y ago

Bulma. It is beautiful

Just a warning against Materialize, cause it might pop in the list: Most stackoverflow answers use jQuery, even though materialize does not depend on jQuery. There is a high reliance on a lot of JS code. Some basic things like italic and bold text do not exist. Otherwise, the column system and buttons are nice. And bulma: I found some class names hard to remember and too many "has-" that could be dropped. Otherwise, very useful, many features! I used it for shadergif.

Kagerjay 8y ago

Bootstrap, b/c of bootsnipp code snippets, large community, common-ground and stackoverflow answers. I would consider using tailwinds (b/c its a functional CSS framework). If there is a strongly coupled CSS framework mixed in with React,Vue, etc - such as material UI, that's another thing I'd use. I would not consider any other frameworks, except as a one-off project. For simple vanilla/ solo projects, I would rather roll with my own custom CSS. B/c I like the full granularity control over everything, without the bloat. But doing this everytime is repetitive. So I started rolling out my own minimalistic CSS framework yesterday. https://github.com/vincentntang/freshpoint https://github.com/vincentntang/freshpoint My goal is the following: (1) Minimal use of grids / columns system. We have CSS grid support already. (2) Consistent crossbrowser styling for things like buttons, lists, forms, tables, and everything that's a pain to normally style (3) One single .scss file you can edit and customize your own version of the framework (4) Both mobile and desktop first approach mixins. My reasoning is here https://vincentmtang.com/2018/10/27/modular-media-queries-with-sass-mixins-for-responsive-webdesign/ https://vincentmtang.com/2018/10/27/modular-media-queries-wi... (5) Simple documentation so anyone can modify their own version (6) Importing common files such as normalize and mini-resets (7) Easy to use and import with React if using CSS modules (8) SMACSS naming methodology and architecture. BEM is overkill for most projects ------------------------------------------------------------------ TL-DR: I don't like the bloat of other CSS frameworks, and I'm strongly opinionated on what I think is best. A good CSS framework should only account for 80% of common use cases, and leave the last 20% for the developer to do on a per-project basis. Good documentation goes along way, that's the next thing I'm working on.

ThePhysicist 8y ago

I think you can actually write some decent, responsive CSS yourself, at least if you don’t need to support very old browsers. Flexbox and grid framework make it pretty easy to build nice, functional and solid layouts without using frameworks.