The CSS code would preferably come complete with the website it belongs to and the website would have a responsive design (fluid grids, media queries, etc.). I imagine a well-designed open-source website meeting my criteria.
Might be worth taking a look at this as well: http://mvcss.github.io
I think a big part of ensuring things are maintainable comes from breaking out your CSS into smaller, modular files. Things like your reset, grid, base styles, navigation and then page specific stuff can be separated in such a way that it lets you start new projects or make large changes easily.
Using something like Sass lets you not only do this, but compile to a really tiny, single CSS file. Sass also lets you keep all your colours in a single variables file that your other files reference.
Disclaimer: I’m far from an expert at this stuff.
I'm in total agreement with the tips you've mentioned and I too found MVCSS on the front-page. What I'm looking for are code examples and I'm just about to check out the ones recommended in this thread. Thanks for commenting.
Try looking at Bootstrap source code: https://github.com/twbs/bootstrap/tree/master/less
Awesome, so instead of a library I was looking more for a website, but I've got one now. Thanks for sharing.
(By the way I love 500px's new sign at the front of their new building.)
Inspecting websites will only show you production code, while most developers use some sort of CSS preprocessing these days. I would find a good open source project on GitHub and check out their SASS or LESS files, how they structure them, importing schemes, &c.
That's exactly what I have in mind: how the code's structured, what importing schemes are used, etc. Where I'm having difficulty is finding a good open-source project. Do you know of one? :)
I know a lot of folks put their sort of "base" projects out there on Github that you can probably find by looking around.
Yeah, I think this will be your best bet. Try searching Github — here are the results for "front-end boilerplate": https://github.com/search?q=front-end+boilerplate&ref=cmdform
I have a front-end starter project up there too (it isn't 100% polished, but it's okay): https://github.com/poopsplat/starthere
Cool so as opposed to boilerplates I was looking more for finished CSS code being used for a production website–I'm interested in how front-end developers make their decisions all the way leading up to a finished product.
But I've found a project I'd like to go through so all is good!