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.
The best css framework is probably flexbox (another link to a chris coyier article ha) and inspect element. Mostly these modern css frameworks just have columns that are built with just
flex: 1, the rest is usually opinionated margins, paddings, some weird rules about highlights, and sometimes some styles for buttons and inputs. The latter is kinda suck to do right at first, but looking at the way that these libraries do these things is ultra helpful, and you’ll have a nicer time learning from them than trying to swim against the opinions of the framework as your layouts and styles start to get fleshed out.as far as buttons go, I usually start by giving them rules such as the following, and then go from there:
You’ll probably end up modifying them anyway, and at least those styles get rid of the browser default stuff.
http://purecss.io/ – basically normalize.css plus some custom classes
That actually looks pretty nice, I may try it out soon. :)
I’d suggest just throwing Zurb Foundation at it (leaving off the JS stuff) and moving on.
Then again, you’re going to get more mileage from using SASS/LESS in your pipeline than you will from picking a CSS framework–just grab something that basically works and move on.
My guess is that you don’t actually need a framework. I would give Chris Coyier’s article on DIY grid systems a read. ;)
The only CSS “framework” I use is normalize.css.
(has nightmares about my past endeavors with
float, and the hell that is float clearing side-effects, layout-breaking subpixel widths, and trying to understand what my old float'ed rules were even trying to do) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaPerhaps http://getskeleton.com
normalize.css and 400 lines of various classes.
https://github.com/dhg/Skeleton/blob/master/css/skeleton.css
What part of web development are you focusing on? I think bootstrap is a good option if you are looking for a quick way to get the front-end looking decent without mucking with CSS while you focus on the backend. Of course, it’s not so good if CSS is what you’re trying to learn.
Agreed! Better to just learn flexbox. Here’s a great gamified tutorial: http://flexboxfroggy.com/
Just ignore how it looks for now. Add semantics like classes and IDs, and making CSS manually or from a library will be easy, with little rewriting, if at all.
This may just be me, but I’ve tried that approach and just couldn’t do it. I can’t keep myself from getting my hands dirty in the CSS. Usually, I start with a page that just has a header, a bunch of lorem ipsum, headings, and form elements, and get my styles all laid out. Then I move on to actually building the app, and tweaking the CSS as I go along.
Even then, you can usually come up with a simple stylesheet real quick, and by starting simple and universal, it makes it easy to adapt to one of the opinionated libraries.