Somewhere to share themes

[simonwoodhead]

Not sure where to ask this, so sorry for putting it in here.

I recently researched a number of colour pickers and absolutely love the functionality provided by spectrum. However, a number of the other options had an interface that fitted in easier with my website's theme. I appreciate that spectrum is themeable but it would be fantastic if there was a repository of themes available. There must be a lot of people who would like bootstrap and foundation themes for example.

I decided to have a stab at writing a bootstrap theme, see https://github.com/simonwoodhead/spectrum-bootstrap. (It has a little bug with the input element, but otherwise seems ok.)

I wanted to do it purely in css rather than mess with spectrum.js, obviously it would have been easier to change the html code added to the page to include classes, e.g. "btn" for buttons etc. Originally I tried to use the "className" option and then just namespace my css, but there was too much default css to override, so I decided to just create a complete replacement spectrum-bootstrap.css file.

There is also a spectrum-bootstrap.less file if people are using bootstrap less.

[bgrins]

@simonwoodhead this is a really good idea. I have at least 2 other themes that are kind of just sitting around that would be awesome to include in the project. The bootstrap one in particular would be very popular. What would be the ideal way to include this? Would having a URL like http://bgrins.github.io/spectrum/themes be good? Then there could be a http://bgrins.github.io/spectrum/themes/sp-bootstrap.css file and a part of the page like http://bgrins.github.io/spectrum/themes#sp-bootstrap. Or would you rather manage this through a wiki page, or a list of links to other projects?

Ideally, a theme would be 1 css file, with any rules prefixed with the theme class name (set by the theme option). This would allow us to load multiple themese onto the same page, and would help keep them up to date (without duplicating any rules that don't need to be). I realize that with bootstrap that could be tricky because of class names, but we definitely don't want to have multiple spectrum.js files around. If you have any idea of ways this could be made easier from the layout of the CSS or HTML, please let me know.

[simonwoodhead]

I like the URL idea. I really like the idea that there is a base css class that is easy to override with a theme option. (I just realised I wrote "className" instead of "theme" in my original post.) I found it difficult to override the default theme when I tried this method, but I am not a css guru.

I wonder if splitting the spectrum.css file into sp-base.css and sp-default.css might be a good idea? Where sp-base.css contains the generic code and sp-default.css the styles for the default theme. Then the theme parameter is set to "default" by default and all styles in sp-default.css are prefixed with ".sp-default".

Then if anyone wants to create a new theme, they make a copy of sp-default.css, rename sp-foo.css, and prefix all their styles with ".sp-foo". (So we don't need to override all the stuff in sp-default.)

It would be good to get an expert in css to give an opinion here. I remember reading about inuit.css, which has some nice guidelines for classnames and overrides (BEM), which might be worth considering if you don't mind some breaking changes.

Another solution might be to give access to specifying the HTML through JavaScript templates? Then people can add the classes they want.

[bgrins]

These are good thoughts. I think the css file should at least be split with a clear comment indicating which rules are 'themeable' and which are meant as the core, even if it isn't split into two actual files. Then if you wanted to make a theme, you could just copy the themeable rules into a new file, modify them, then include that file and set the theme property.

I'm not crazy about letting people modify the JS templates, since there is a lot of required stuff in there that could break in weird ways, especially if the main template changes.

I will look at reorganizing the rules to make it easier to theme, and adding a basic themes page.

[simonwoodhead]

Thank you, that would be excellent. I'll have a go at recreating the bootstrap theme using the new system when it is in place.

[bgrins]

@simonwoodhead this is in progress at http://bgrins.github.io/spectrum/themes/. How do you think it would be best to get the .btn. classes to work without actually copying the class into the markup? I guess we could just copy/paste what bootstrap uses for the btn class and apply it to .theme-bootstrap button { }?

[simonwoodhead]

Hi Brian,

I copied the classes across which seems a pretty ugly solution but I cannot
think of a simpler one using plain CSS. If you are happy to throw a
preprocessor into the mix then I think you could define your button class
as "extending" the bootstrap button class. I believe this functionality is
available in the latest version of LESS which is the preprocessor used for
bootstrap.

Sorry for the vague reply, away from computer at the moment.

Simon
On Aug 4, 2013 4:03 PM, "Brian Grinstead" notifications@github.com wrote:

@simonwoodhead https://github.com/simonwoodhead this is in progress at
http://bgrins.github.io/spectrum/themes/. How do you think it would be
best to get the .btn. classes to work without actually copying the class
into the markup? I guess we could just copy/paste what bootstrap uses for
the btn class and apply it to .theme-bootstrap button { }?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/105#issuecomment-22073051
.

[bgrins]

No problem. I think have plain CSS files in the repository is the most simple solution for end users - though if you wanted to use LESS to make generating the theme easier I don't see any reason why that would be an issue, as long as we use the generated .css file inside of the themes/ folder (rather than the .less file). All of the needed files / preprocessors would make sense in your spectrum-bootstrap repository IMO - because if people wanted to use different variables for bootstrap we could point them there to generate a custom theme.

There is still some documentation to be done on what each element does - but I'm guessing you have already figured this out based on the original spectrum-bootstrap repo. There is also some CSS cleanup - mostly the stuff below the "Theme Authors" comment is what would be copied into a new theme, but I need to go through and make sure. I'd also like to make the sp-dark theme a little more full featured just to give a better jumping off point. Let me know if you need any help or changes to make this work.