Keystone-classic: Theme templates for keystone.js

[willvlad]

hi, do you know if it is possible to find somewhere a few themes for keystone? there are plenty out there for wordpress, but I couldn't find easily anything for keystone...

[momenator]

There is one based on the www.sydjs.com, but I'm afraid that you have to build your own. I did one myself, it's not that hard. Just create the static version of your site and then place all the js and css files in the public folder of your keystone app.Then, follow the structure of the templates based on your static site. I recommend using handlebars as it's almost identical to html. Connect all your js and css files in the default.hbs template and it should work as intended.

[willvlad]

Thanks Mombi. Is it possible to get the SydJS template somewhere at least? 

Cheers!

---

From: mombi93 [email protected]
To: JedWatson/keystone [email protected]
Cc: willvlad [email protected]
Sent: Monday, 18 August 2014, 15:53
Subject: Re: [keystone] Theme templates for keystone.js (#548)

There is one based on the www.sydjs.com, but I'm afraid that you have to build your own. I did one myself, it's not that hard. Just create the static version of your site and then place all the js and css files in the public folder of your keystone app.Then, follow the structure of the templates based on your static site. I recommend using handlebars as it's almost identical to html. Connect all your js and css files in the default.hbs template and it should work as intended.
—
Reply to this email directly or view it on GitHub.

[JedWatson]

Hi @willvlad,

The SydJS site is under my github profile, there's also a companion mobile app by @bladey and design resources by @BorisBozic you might be interested in.

You can find them all at the SydJS Showbag Page.

[grabbou]

@JedWatson actually, having an ability to install 3rd-party themes and insert optional fixtures (and Models) would be great! Then, we would be able to easily create e.g. blog themes or bootstrap ones just to help newcomers start their journey with us!

[kirkkohler]

I've been researching a few of the Node CMS options out there. I thought I could just grab a bootstrap theme and easily drop on top of a CMS like Keystone. But from this thread, it sounds more complex than that. Am I misunderstanding? Any thoughts would be appreciated.

[morenoh149]

@kirkkohler if you grab bootstrap from a cdn its simple. If you want to rebuild bootstrap with only the elements you want you'll have to do a lot more legwork.

[kirkkohler]

@morenoh149 thanks, I was more interested in grabbing a theme such as one of these https://wrapbootstrap.com/themes/page.1/sort.sales/order.desc
As @grabbou suggested, dropping in 3rd party themes that are compatible with bootstrap.

I'll try tomorrow to download keystone and integrate a boostrap theme. Maybe it is easier than I interpreted once I drop bootstrap in via a reference.

[JedWatson]

@kirkkohler it wouldn't be any more easy or difficult to implement a bootstrap theme in a KeystoneJS site than any other site - you just copy the resources into your /public folder, include the stylesheets (etc) you need in your front end, drop the layout code into the templates, customise them and off you go.

This discussion is talking about keystone-specific themes, like Wordpress of Ghost have marketplaces for. We have a plan for long-term to build something like this, but are currently focused on the core of the platform.

[kirkkohler]

@JedWatson thanks and understood on focusing on the core. I'll try and set something up asap. Good luck!

[JedWatson]

@kirkkohler looks like we both posted at the same time. if you're interested in writing up your experience or a guide on how you did it, that sort of resource would be great to add to the site / wiki, so let us know if you do!

[peteruithoven]

I'm kind of a Bootstrap noob, but it looks like there are a few nice bootstrap "sub themes". These could be very usefull for Keystone.
http://bootswatch.com/
You can try their bookmarklet on your site: http://bootswatch.com/help/#bookmarklet

Looks like you easily add them to Keystone.

• Go to the public/styles folder.
• Run git clone https://github.com/thomaspark/bootswatch.git.
• Run npm install.
• Run grunt swatch.
• In your public/styles/site.less:
  
  
  
  • Remove: @import "site/variables.less";.
  
  
  • Add: @import "bootswatch/journal/variables.less"; (loads the journal version).
  
  

Source: http://bootswatch.com/help/#customization

[augbog]

I believe this was discussed in https://github.com/keystonejs/keystone/issues/322 in the Roadmap regarding the "Marketplace". Just wondering what was the final decision on this?

[kdemarest]

Definitely +1 on being able to take bootstrap and run with it. I'm not sure there is much value is Keystone "pioneering" a lot of CSS when bootstrap appears to be the emerging standard.

[morenoh149]

@kdemarest actually a lot of this styling is moving towards being declared in json objects https://facebook.github.io/react/tips/inline-styles.html
It's driving the development of http://elemental-ui.com/

[creynders]

We're closing all feature requests to keep the issue tracker unpolluted. I've moved this to ProductPains:
https://productpains.com/post/keystonejs/allow-creating-keystone-themes

[jazieltan]

I think the many reasons why many chose KeystoneJS is because we are more front end developers looking for something to handle the backend for us while we focus on coding and making the frontend look great. Otherwise we would have just gone with plain emberjs or express. I think many of us are perfectly fine with handling our own JS, CSS, without the need for themes.