Show HN: Cluckles, live theme editor for Bootstrap | Hacker News Reader

Show HN: Cluckles, live theme editor for Bootstrap

cluckles.com

55 pointsilikeprograms25 comments

Hey nice! One thing I might recommend is independently scrolling the main section from the property editor on the right (have that in a fixed position?). The idea is to be able to see the Navs example when you're changing the padding/colors for the Navs Components. That was much harder for me to play with than the buttons which are visible as I changed the background color since their scroll position was similar.

Yeah im thinking eventually that would be good, but im not entirely sure about the best way to do it, I will for sure take a look into it though.

Thanks for the feedback :)

Second this! A fixed sidebar is definitely a requirement to make this site more usable. I would also love to see a left-align editing bar instead of a right-align and a a totally separate background / place on the page rather than an absolutely positioned element. Great tool for quickly testing color and theme changes, but I'd want to see a number of changes to be something I'd use regularly instead of my editor.

Thanks for posting and nice work so far!

Thank you veeeeery much for this comment, I really appreciate it. The right hande column isnt meant to be absolutely positions, I think I have just done the colun slightly incorrectly.

I did originally try to make it all scroll correctly into the right sections, but wasnt able to do it properly.

Really I could use some help on how to get the functionality in place.

The Docs site can be developed independently of the main library (which powers the editor).

Its all built peacemeal using grunt and some templates.

Any idea on how to do the scrolling :) if someone points me in the right direction it would help me do it quicker!

I have created an issue for it on github, so I will take a look at it https://github.com/ilikeprograms/Cluckles/issues/19

You say you want to see a number of changes, im open to suggestions if you have ideas on how to improve it so you would use it regularly :)

I think this needs a tutorial or something - I couldn't work out how to use it or make anything much happen (I don't care greatly for Bootstrap, but I'm always interested in web-based editor type things).

If you are using Chrome, there should be color pickers etc, which you can access by going into the Components Tab.

Then click one of the color pickers, and choose a color. Then it should update the demo interface on the left (you may need to scroll to find the right section)

If your using chrome you need to manually enter the values, like #000.

What sort of tutorial do you think, perhaps one of the ones which displays popovers next to each section, and guides you through it ?

Agreed. When you open the editor page, it's not obvious that there are more tools you can use. Also, there's very low contrast between the theme being edited and the tools bar on the right, it's quite confusing.

There is also this: http://www.layoutit.com/

I would like to thank everyone so much. Truly. I dont know if Cluckles will go anywhere, but I have consistently had between 60-100+ users at all times on the site since submitting here.

Heres some other staggering statistics which ONLY COUNTS TODAY (at the time of posting)

Unique Users 3,047 Pageviews 5,833

I like this primarily because your Cluckles mascot is extremely cool. +5 thumbs up.

haha. Really :) ?

I made it and thought it was a bit of fun. Im quite proud to have received a complement about him :)

I also thought the bandana adds a sense of badassery!

The bandana definitely helps!

Yeah, really appreciate a decent mascot for a project. I always think it's a shame they got rid of the old Python logo.

http://www.demiurgo.org/charlas/python-unittesting/img/pytho...

Haha, thats almost as cool as mine ;)

Looks nice! There are some typos and grammatical mistakes on the front page though.

Hey, what ones are there? could you tell me and I will change it?

Sure,

1) "I have spent a good while" : here I think you missed "time"

I thought there were more when I was reading it for the first time, did you make any changes? Anyways it looks all correct now :)

P.S. I will add more here if I find anything.

"I have spent a good while" is actually ok here.

"I have spent a good while" is fine, might sound odd to a non-native speaker however. "while" implies "time" in this context.

Okay, you are right does make sense now.

"Once your happy with the changes" should be "Once you're happy with the changes"

"In the future I will look into adding support other CSS Frameworks" should be "In the future I will look into adding support for other CSS Frameworks" or "In the future I will look into supporting other CSS Frameworks"

"Let me know if you create anything your proud of" should be "Let me know if you create anything you're proud of"

(Grammatical nitpicking aside, this is a really neat tool!)

Thanks for calling it neat kej. I have made the changes you suggested.

I have a few typos now, so I will update the site with the changes :)

Doesn't seem to work in Chromium. Change colors, nothing happens.

Hmmmmm, can you tell me what version you are running? Could you also change the Jumbotron color for example, then scroll to the Jumbotron section.

Just to confirm if its a bug or if its just because it doesnt scroll to the content etc.

does this work in firefox? I started changing values and nothing changed on the left panel.

Hey!

It does work in firefox! You need to manually enter things instead of using color pickers though.

For example, if you go Components -> Jumbotron -> Background Color and Paste in #000.

It should update the Jumbotron background color (you will have to scroll up perhaps to see it).

Does that work for you ... or if not I will need to look into it, as it may be a bug :(

Reply on news.ycombinator.com