kalei 0.0.1

data/lib/kalei/public/css/highlight/styles/zenburn.css

@@ -0,0 +1,115 @@
+/*
+
+Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
+based on dark.css by Ivan Sagalaev
+
+*/
+
+pre code {
+  display: block; padding: 0.5em;
+  background: #3F3F3F;
+  color: #DCDCDC;
+}
+
+pre .keyword,
+pre .tag,
+pre .css .class,
+pre .css .id,
+pre .lisp .title,
+pre .nginx .title,
+pre .request,
+pre .status {
+  color: #E3CEAB;
+}
+
+pre .django .template_tag,
+pre .django .variable,
+pre .django .filter .argument {
+  color: #DCDCDC;
+}
+
+pre .number,
+pre .date {
+  color: #8CD0D3;
+}
+
+pre .dos .envvar,
+pre .dos .stream,
+pre .variable,
+pre .apache .sqbracket {
+  color: #EFDCBC;
+}
+
+pre .dos .flow,
+pre .diff .change,
+pre .python .exception,
+pre .python .built_in,
+pre .literal,
+pre .tex .special {
+  color: #EFEFAF;
+}
+
+pre .diff .chunk,
+pre .ruby .subst {
+  color: #8F8F8F;
+}
+
+pre .dos .keyword,
+pre .python .decorator,
+pre .title,
+pre .haskell .type,
+pre .diff .header,
+pre .ruby .class .parent,
+pre .apache .tag,
+pre .nginx .built_in,
+pre .tex .command,
+pre .input_number {
+    color: #efef8f;
+}
+
+pre .dos .winutils,
+pre .ruby .symbol,
+pre .ruby .symbol .string,
+pre .ruby .symbol .keyword,
+pre .ruby .symbol .keymethods,
+pre .ruby .string,
+pre .ruby .instancevar {
+  color: #DCA3A3;
+}
+
+pre .diff .deletion,
+pre .string,
+pre .tag .value,
+pre .preprocessor,
+pre .built_in,
+pre .sql .aggregate,
+pre .javadoc,
+pre .smalltalk .class,
+pre .smalltalk .localvars,
+pre .smalltalk .array,
+pre .css .rules .value,
+pre .attr_selector,
+pre .pseudo,
+pre .apache .cbracket,
+pre .tex .formula {
+  color: #CC9393;
+}
+
+pre .shebang,
+pre .diff .addition,
+pre .comment,
+pre .java .annotation,
+pre .template_comment,
+pre .pi,
+pre .doctype {
+  color: #7F9F7F;
+}
+
+pre .coffeescript .javascript,
+pre .xml .css,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .tex .formula {
+  opacity: 0.5;
+}
+

data/lib/kalei/public/css/styles.css

@@ -0,0 +1,95 @@
+/*
+# Kalei - Style guide
+
+This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks.
+
+<iframe src="http://ghbtns.com//github-btn.html?user=thomasdavis&repo=kaleistyleguide&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170px" height="30px"></iframe>
+
+<iframe src="http://ghbtns.com//github-btn.html?user=thomasdavis&repo=kaleistyleguide&type=fork&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="146px" height="30px"></iframe>
+
+
+## Main goals and benefits
+
+* Fully documented CSS - No need to explain the benefits
+* No dependencies, simply download the repository and run in your browser
+* Automatic generation of demo UI components
+* Easy access for anyone, designer, developer, manager and users
+* Rapid development of projects by allowing developers to find the correct CSS and HTML for any given UI component
+* Open sourced so that all great ideas can be included
+
+
+
+
+
+## Getting started
+
+1. Download the repository (`git clone git://github.com/thomasdavis/kalei.git`)
+2. Serve it on a HTTP server and it should work!
+3. Edit `js/config.js` to point at your own `styles.css` 
+
+
+## Author
+
+[Thomas Davis](http://thomasdavis.github.com)
+
+<a style="" href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+
+Richard Barret
+
+Need more contributors to give it a nicer style and more functionality
+
+
+
+
+*/
+
+@import url("../../assets/application.css");
+
+@import url("theme.css");
+
+
+
+
+/* ### Example Buttons ### */
+
+@import url("buttons.css");
+@import url("fixie-demo.css");
+
+/* ### Third Party ### */
+
+@import url("highlight/styles/github.css");
+@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
+/*
+## Inspiration
+
+Kalei is heavily influenced by the following projects and blog posts.
+
+[Pea.rs](http://pea.rs/)
+
+[KSS](http://warpspire.com/posts/kss/)
+
+[StyleDocco](http://jacobrask.github.com/styledocco/)
+
+[RJ Metrics](http://info.rjmetrics.com/blog/bid/52753/Our-Living-Style-Guide-Writing-maintainable-HTML-CSS)
+
+[Anchoring Your Design Language in a Live Style Guide](http://uxmag.com/articles/anchoring-your-design-language-in-a-live-style-guide)
+
+
+## Technologies 
+
+* [marked](https://github.com/chjj/marked)
+* [jscssp](http://www.glazman.org/JSCSSP/)
+* cssbeautify
+* [fixie](http://fixiejs.com/)
+* [highlight](http://softwaremaniacs.org/soft/highlight/en/)
+* [backbone](http://backbonejs.org/)
+* [underscore](http://underscorejs.org/)
+* [jquery](http://jquery.com)
+
+## License 
+
+Public domain: http://unlicense.org/
+
+*/

data/lib/kalei/public/css/theme.css

@@ -0,0 +1,259 @@
+/*
+# Kalei Themes
+
+To make sure the code demo's are un-affected by Kaleis own styles we only set a few global styles
+
+The menu is fixed and the page contained simply aligns itself 200px from the left.
+
+*/
+
+body {
+	background: #f0f0f0 !important;
+	margin: 0 !important;
+  padding: 0 !important;
+}
+
+.kalei-style-menu-container {
+	position: fixed;
+	background: #fff;
+	padding: 20px;
+	top: 20px;
+	border-top-right-radius: 6px;
+	border-bottom-right-radius: 6px;
+
+}
+.kalei-style-menu {
+	width: 240px;
+}
+.kalei-style-page {
+	margin-left: 240px;
+	padding: 20px;
+}
+
+/*
+## Headings and paragraphs
+```
+<div class="kalei-comments">
+	<h1>Heading 1</h1>
+	<h2>Heading 2</h2>
+	<h3>Heading 3</h3>
+	<h4>Heading 4</h4>
+	<h5>Heading 5</h5>
+	<h6>Heading 6</h6>
+	<p class="fixie"></p>
+	<ul>
+	  <li>List Item 1</li>
+	  <li>List Item 2</li>
+	  <li>List Item 3</li>
+	</ul>
+</div>
+```
+*/
+
+.kalei-comments > h1,
+.kalei-comments > h2,
+.kalei-comments > h3,
+.kalei-comments > h4,
+.kalei-comments > h5,
+.kalei-comments > h5,
+.kalei-comments > h6,
+.kalei-comments > ul,
+.kalei-comments> ol,
+.kalei-comments> p a,
+.kalei-comments> p a:visited,
+.kalei-comments>  a:visited,
+.kalei-comments> a,
+.kalei-styleguide-menu-heading > h1,
+.kalei-styleguide-menu > h3,
+
+.kalei-comments > p {
+
+  font-family: 'Open Sans', sans-serif;
+	padding: 10px;
+	margin: 0;
+	color: #444;
+
+}
+.kalei-comments> p a,
+.kalei-comments> p a:visited {
+	padding: 0;
+}
+.kalei-comments > iframe {
+	margin-left: 10px;
+	margin-top: 10px;
+}
+.kalei-comments > ul,
+.kalei-comments> ol {
+	margin-left: 20px;
+}
+.kalei-comments > ul,
+.kalei-comments> ol,
+.kalei-comments > p {
+	font-size: 12px;
+}
+
+/*
+## CSS and Comments Layout 
+
+These styles make sure the css code block is floated to the right correctly and the comments on the left
+
+```
+<div class="kalei-documentation">
+
+	<div class="kalei-comments-container ">
+		<div class="kalei-comments ">
+			<p>This is a test Kalei comment.</p>
+		</div>
+	</div>
+	<div class="kalei-css-container "><pre><code class="kalei-css">a { color: #323; }</code></pre></div>
+
+</div>
+```
+*/
+
+.kalei-style-page > .kalei-documentation {
+	position: relative;
+}
+.kalei-comments-container {
+	width: 60%;
+	position: relative;
+}
+.kalei-comments-container.kalei-no-css {
+	float: left;
+	width: 100%;
+}
+.kalei-css-container {
+	position: absolute;
+	width: 39%;
+	right: 0;
+	top: 0px;
+	bottom: 0px;
+	overflow: auto;
+}
+ .kalei-css-container > pre {
+ 	margin: 0;
+ }
+ .kalei-css-container > pre > .kalei-css  {
+
+	border-radius: 6px;
+	border: 1px solid #ebebeb;
+	
+	font-size: 11px;
+
+	white-space: pre-wrap; 
+}
+
+/*
+## Code demos
+
+When you use Markdown code blocks ```, Kalei automatically renders the code as HTML and beneath it shows the code block with syntax highlighting.
+```
+<pre>
+	<code>
+		.kalei-comments > pre > code, 
+		.kalei-css-container > pre > code {
+			font-size: 11px;
+			opacity: 0.7;
+			white-space: pre-wrap; 
+			padding: 10px;
+		}
+	</code>
+</pre>
+```
+*/
+.kalei-comments > pre > code, 
+.kalei-css-container > pre > code {
+	font-size: 11px;
+
+	white-space: pre-wrap; 
+	padding: 10px;
+}
+.kalei-css-container,
+.kalei-comments > pre > code {
+
+		opacity: 0.5;
+}
+.kalei-comments > pre > code:hover, 
+.kalei-css-container:hover  {
+	opacity: 1;
+}
+.kalei-css-container.kalei-no-css {
+	display: none;
+}
+.kalei-comments >  pre {
+	margin: 0;	
+	border-bottom: 1px solid #ebebeb;
+	border-left: 1px solid #ebebeb;
+	border-right: 1px solid #ebebeb;
+}
+.kalei-comments {
+
+padding: 20px;
+margin: 0 0 20px 0;
+background: 
+white;
+-webkit-border-radius: 6px;
+-moz-border-radius: 6px;
+border-radius: 6px;
+-webkit-box-sizing: border-box;
+-moz-box-sizing: border-box;
+-o-box-sizing: border-box;
+box-sizing: border-box;
+-webkit-box-shadow: 1px 1px 2px 
+rgba(0, 0, 0, 0.1);
+-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+box-shadow: 1px 1px 2px 
+rgba(0, 0, 0, 0.1);
+}
+body .codedemo {
+	position: relative;
+	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAAXNSR0IArs4c6QAAAAZQTFRF+vr6////+o8bnQAAABBJREFUCB1jYPjPgBXhEAYAfr8P8bm+jEoAAAAASUVORK5CYII=);
+	padding: 20px;
+	border: 1px solid #ebebeb	;
+	font-size: 100%;
+}
+
+*:not(.codedemo) .kalei-styleguide-menu-heading h1 {
+	font-size: 18px;
+	margin: 0;
+	color: #444;
+}
+*:not(.codedemo) .kalei-styleguide-menu-heading, .styleguide-menu-heading:visited {
+	text-decoration: none;
+}
+
+*:not(.codedemo) .kalei-styleguide-menu-heading:hover {
+	color: #222;
+}
+
+*:not(.codedemo) .kalei-styleguide-menu {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	width: 200px;
+}
+.kalei-styleguide-menu > h3 {
+		color: #444;
+	font-weight: bold;
+	margin-top: 20px;
+	font-size: 11px;
+
+}
+.kalei-styleguide-menu-link {
+	padding: 5px 0px 5px 20px;
+	display: block;
+	height: 100%;
+	text-decoration: none;
+	color: #555;
+	font-family: Arial;
+	font-size: 11px;
+}
+
+
+.kalei-styleguide-menu-link:hover,
+.kalei-styleguide-menu-link.active {
+	background: #f1f1f1a;
+	font-weight: bold;
+	color: #517c1a;
+}
+