HN Explorer

Ask HN: Where are all of the CSS Themes?

8 points by evlapix ↗ HN
It seems like before anybody ever started making CSS Templates, they should have had a strong foundation of CSS Themes. Stylesheets that reset the browser defaults, then style all of the default elements to be a better browser default. I've been using Drupal's "default.css"(?) just so that development is easier on the eyes. Does anything like this exist?

This alone would really help get my MVP up and running a lot quicker. jQueryUI only handles so much (as it should).

10 comments

[ 3.3 ms ] story [ 30.1 ms ] thread
mrtom
For the first half of that (resetting the browser defaults) I use Yahoos reset.css (http://developer.yahoo.com/yui/reset/), which works a charm.
evlapix
Yeah, I have used that before too. It does a great job of removing the browser defaults.

What I dislike, is that it forces me to have to start from scratch (reset.css scratch) in order to make a project at all readable/usable.

mikeleeorg
Though it means adding a bit more code to each page, YUI has this Base CSS component that is meant to rebuild some of the native formatting Reset CSS removes: http://developer.yahoo.com/yui/base/
evlapix
I remember coming across this in the past. This is very similar to what I want to find, only.. I want to push the "Base" much further.
cmelbye
Blueprin CSS framework does a good job of this.
grayrest
Sass has plugins that cover most of the CSS "frameworks" but to my knowledge doesn't have a lot of fully developed themes. The advantage to using a preprocessor is that you can apply the built in styles to the classes/ids of your choice instead of having to use the same ones the css framework uses.
evlapix
It seems that there is no readily available solution. So if I were to create one, it would go something like this:

href="theme-base-renegade.css"

theme-base-renegade would style all of the default markup in its own styleish little way. Whatever that may be: Super padded with big fonts and so on, or incredibly tiny with minimal line-height, font-size, etc..

href="theme-color-grayhaze.css"

theme-color-darkness would specifically color the default markup. Things like th, tr, td, dl, dt dd, etc, would have be darker/brighter than others with their respective font-colors and such to complement the element background-colors.

Since both stylesheets would be styling the default markup - not specific to styles or id's - the two stylesheets could be swappable with other like type themes components and not interfere with one another.

After that.. it's CSS! You could overwrite any one of the many styles used to create that theme. Plus, with all of the tools we have to debug, overriding otherwise desirable styles in order to apply specific/custom ones would be much more convenient.