Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example page to inuitcss.com #121

Closed
WickyNilliams opened this issue Jan 23, 2013 · 27 comments
Closed

Add example page to inuitcss.com #121

WickyNilliams opened this issue Jan 23, 2013 · 27 comments

Comments

@WickyNilliams
Copy link

Would be great to have an example page on inuitcss.com which showed all the individual inuit objects.

There doesn't have to be reams of accompanying documentation, or even look pretty or anything, just something very functional to help visualise each object without having to browse source and find the comment pointing to jsfiddle, follow url etc. If the source was then included along side each example it'd make it really easy to see what you wanted and grab the code.

Good/bad idea? Thoughts please :)

@pim
Copy link

pim commented Jan 24, 2013

This could be just a link to Inuit’s jsFiddle with examples.

@WickyNilliams
Copy link
Author

That would work :-) could just embed each fiddle sequentially on the same
page, and with that you get examples and sample code in one motion.
On 24 Jan 2013 08:51, "Piotr Mierzejewski" notifications@github.com wrote:

This could be just a link to Inuit’s jsFiddlehttp://jsfiddle.net/user/inuitcss/fiddles/with examples.


Reply to this email directly or view it on GitHubhttps://github.com//issues/121#issuecomment-12642284.

@bewildergeist
Copy link
Contributor

I've been thinking that by modifying the inline documentation to use Markdown, it should be possible to run the whole thing through StyleDocco to automatically generate documentation and examples in one fell swoop. Haven't had the time to try it out yet, though. But wouldn't that be a good and easily maintainable solution?

@Anderson-Juhasc
Copy link
Contributor

I find it interesting to use the "StyleDocco" walked the testing, I saw some problems to generate documentation from a style sheet with "@imports", but I think that is the least of it.

@WickyNilliams
Copy link
Author

I wasn't suggesting modifying the structure of the docs, I'll leave the grand architectural changes to someone else ;-) All I was thinking was that for newcomers it might be nice to see examples of what you get out of the box up-front on the project site.

@NigelGreenway
Copy link

Already starting on this at the moment, I can create a repo if everyone wants to help? And @csswizardry is ok with this. Doing this on with jekyll for ease...

@WickyNilliams
Copy link
Author

Sweet, good effort mate! But why not fork the inuit site (and push changes) instead of starting anew?

@BPScott
Copy link

BPScott commented Apr 1, 2013

This might be useful: https://github.com/instructure/dress_code - similar idea to StyleDocco, but uses ruby so there isn't any additional complexity in having to get node running (instead we include dress_code as a dependency in Inuit's gemfile).

Combine it with an Octopress style "copy from the generated folder into the gh-pages branch" script. And we'd end up with a pretty smart way of keeping documentation in the same file as the css, which is then used to generate the examples website on GitHub pages.

@marcwiest
Copy link

I really like the idea of seeing the HTML & CSS on one page and so I very happy with the way it's currently document, but it would be great to have a demo.html just so I could have some visual feedback when I'm aligning the defaults.scss to my project.

@nicoespeon
Copy link

Hi guys!

Is there any news about this idea? Did anyone start something so far?
I really share the idea that it could be nice to build a friendly documentation directly on the inuit site, as @WickyNilliams suggested.

Please let me know if I can help 👍

Best regards!

@rdinigel
Copy link

@nicoespeon Due to renovation, I have not been able to do so, but should be in within 2-3 weeks so will be starting again.

Anyone got any ideas for layouts / doc wiki or any other suggestions?

@patocallaghan
Copy link

Hey,

The other day we were evaluating different frameworks in work (bootstrap, foundation and inuit) and inuit's fiddles and css comments didn't convey the framework as a whole to the designers on my team. I created this "Kitchen Sink" to help with my pitch for inuit. Seeing everything on one page definitely helped when making our decision. Someone may find it useful until something more official appears.

I put it together with Docpad, a static site generator built on Node. That's the static version on dropbox but If anyone wants the source, I can chuck it up on github.

In the end we chose inuit as it was felt the other frameworks "got in our way" too much.

@iparr
Copy link

iparr commented May 18, 2013

That "Kitchen Sink" is massively helpful, @patocallaghan

@drejohnson
Copy link

@patocallaghan I would like the source if it's not too much trouble. I use docpad for my site and I created a docpad skeleton that uses inuit.css, csswizardry-grids and typeplate.

@nicoespeon
Copy link

@patocallaghan > indeed your "Kitchen Sink" will be very useful until something more official appears, thanks a lot for that. Maybe that would be a good idea to check it up on Github as you said, to see how does that work =)

@rdinigel > another suggestion we could consider may be KSS which is "a ruby library suitable for parsing SASS, SCSS" used, for instance, by Github to create their specific living styleguide.

I've never used it before so it's just "another idea". That also means that we may need to refactor comments, just like we'd have to with docco (maybe not exactly in the same way however).

@patocallaghan
Copy link

Hey guys,

after a few style tweaks I've chucked the source for that Kitchen Sink up onto Github at https://github.com/terabytenz/inuit.css-kitchensink. The page is now also at http://terabytenz.github.io/inuit.css-kitchensink/.

+1 to the suggestions to use StyleDocco or KSS for documentation. From my understanding though in KSS documentation needs to be replicated in CSS and markup while with StyleDocco it's just CSS comments?

@WickyNilliams
Copy link
Author

Good work, Pat :)

However the documentation is eventually generated, it should definitely be submitted as a pull request against the inuit gh-pages

@rdinigel
Copy link

@patocallaghan This is a great solution. I think if we can also get it within the inuit.css repo, maybe within a docs file, it will be a great tool to use for customisation preview as well.

@eikeco
Copy link

eikeco commented May 22, 2013

Awesome job @patocallaghan! It's really useful to see everything set out.

@csswizardry do you think we could integrate this with the inuit repo?

@patocallaghan
Copy link

Thanks for the feeback guys. So if I was to issue a pull request for the .html where would I put it? gh-pages or a docs directory in the master repo?

@WickyNilliams
Copy link
Author

I guess gh-pages so it's accessible on the web? @csswizardry might have
some ideas on this...
On 23 May 2013 09:29, "patocallaghan" notifications@github.com wrote:

Thanks for the feeback guys. So if I was to issue a pull request for the
.html where would I put it? gh-pages or a docs directory in the _master_repo?


Reply to this email directly or view it on GitHubhttps://github.com//issues/121#issuecomment-18330000
.

@csswizardry
Copy link
Owner

Really sorry for the quietness from me, guys. So busy at the moment. I would rather have this in the gh-pages branch than pollute the framework itself :)

Cheers!

@eikeco
Copy link

eikeco commented May 23, 2013

@csswizardry fair point. Totally agree.
Maybe you could drop a line of text in the README.md to explain where to find it? I keep forgetting to checkout the other branches to a project.

Thanks for getting back!

@WickyNilliams
Copy link
Author

No need, if we add to gh-pages branch it'll be publicly visible on
inuitcss.com
On 23 May 2013 10:58, "Ryan Smith" notifications@github.com wrote:

@csswizardry https://github.com/csswizardry fair point. Totally agree.
Maybe you could drop a line of text in the README.md to explain where to
find it? I keep forgetting to checkout the other branches to a project.

Thanks for getting back!


Reply to this email directly or view it on GitHubhttps://github.com//issues/121#issuecomment-18333868
.

@eikeco
Copy link

eikeco commented May 23, 2013

@WickyNilliams true. That will be enough I guess.

@waynemoir
Copy link
Contributor

Just wanted to say thanks to @patocallaghan for the Kitchen Sink. It is much easier find what I need there than on the separate fiddles.

@csswizardry
Copy link
Owner

Please see #291.

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests