0.2 - first commit - changes will be documented

.gitignore

@@ -1,3 +1,6 @@
 _site
 build
+css
+.tmp
+bower_components
 node_modules

Gruntfile.coffee

@@ -0,0 +1,124 @@
+###
+  Grunt workflow
+###
+
+mountFolder = (connect, dir) ->
+    return connect.static(require('path').resolve(dir))
+
+module.exports = (grunt) ->
+    @loadNpmTasks('grunt-contrib-clean')
+    @loadNpmTasks('grunt-contrib-compass')
+    @loadNpmTasks('grunt-contrib-connect')
+    @loadNpmTasks('grunt-contrib-copy')
+    @loadNpmTasks('grunt-contrib-watch')
+    @loadNpmTasks('grunt-jekyll')
+    @loadNpmTasks('grunt-open')
+    @loadNpmTasks('grunt-webfont')
+
+    jekyllMask = '{*/,}{*/,}{*/,}*{html,js,png,jpg,jpeg}'
+
+    @initConfig
+        clean:
+            dist: ['_site', '.tmp']
+            afterjekyll: ['_site/node_modules', '_site/font-generation-templates', '_site/scss']
+
+        doWatch:
+            options:
+                livereload: 35728
+                nospawn: true
+            iconsapp:
+                files: ['images/icons_svg_source/app/*.svg']
+                tasks: ['webfont', 'copy']
+            iconsandroid:
+                files: ['images/icons_svg_source/android/*.svg']
+                tasks: ['webfont', 'copy']
+            iconsios:
+                files: ['images/icons_svg_source/ios/*.svg']
+                tasks: ['webfont', 'copy']
+            jekyll:
+                files: [jekyllMask, '!_site/' + jekyllMask]
+                tasks: ['jekyll', 'copy']
+            compass:
+                files: ['scss/{*/,}*.scss','scss/*/{*/,}*.scss']
+                tasks: ['compass', 'copy']
+
+        # generate 3 webfonts, one for Android system, once for iOS system, one for the app itself
+        webfont:
+            iconsapp:
+                src: 'images/icons_svg_source/app/*.svg'
+                dest: '.tmp/fonts'
+                destCss: 'scss/clank/icon-fonts'
+                options:
+                    font: 'app-icons'
+                    hashes: false
+                    htmlDemo: false
+                    stylesheet: 'scss'
+                    relativeFontPath: '../fonts'
+                    template: 'font-generation-templates/custom-app.css'
+            iconsandroid:
+                src: 'images/icons_svg_source/android/*.svg'
+                dest: '.tmp/fonts'
+                destCss: 'scss/clank/icon-fonts'
+                options:
+                    font: 'android-icons'
+                    hashes: false
+                    htmlDemo: false
+                    stylesheet: 'scss'
+                    relativeFontPath: '../fonts'
+                    template: 'font-generation-templates/custom-android.css'
+            iconsios:
+                src: 'images/icons_svg_source/ios/*.svg'
+                dest: '.tmp/fonts'
+                destCss: 'scss/clank/icon-fonts'
+                options:
+                    font: 'ios-icons'
+                    hashes: false
+                    htmlDemo: false
+                    stylesheet: 'scss'
+                    relativeFontPath: '../fonts'
+                    template: 'font-generation-templates/custom-ios.css'
+
+        # Copy the fonts and css in place, because Jekyll deletes them if we
+        # generate in the output folder directly.
+        copy:
+            fonts:
+                files: [
+                    expand: true
+                    dot: true
+                    cwd: '.tmp/'
+                    dest: '_site/'
+                    src: '*/*'
+                ]
+
+        compass:
+            dist:
+                options:
+                    sassDir: 'scss'
+                    require: 'susy'
+                    cssDir: '.tmp/css'
+
+        jekyll:
+            dist:
+                options:
+                    dest: '_site'
+
+        connect:
+            livereload:
+                options:
+                    port: 4200
+                    hostname: '0.0.0.0'
+                    middleware: (connect) ->
+                        return [
+                            require('connect-livereload')({ port: 35728 })
+                            mountFolder(connect, '_site')
+                        ]
+
+        open:
+            server:
+                url: 'http://localhost:4200'
+
+    @renameTask 'watch', 'doWatch'
+
+    @registerTask('watch', ['connect', 'build', 'open', 'doWatch'])
+    @registerTask('build', ['clean', 'webfont', 'jekyll', 'compass', 'copy', 'clean:afterjekyll'])
+    @registerTask('default', ['build'])

LICENSE.md

@@ -0,0 +1 @@
+This source code contains a copy of Clank (http://getclank.com) which is MIT Licensed.

README.md

@@ -1,25 +1,9 @@
-Clank
-=====
+# Clank 0.2 README
 
-[View the demos](http://getclank.com/demos/)
+To set Clank up run:
 
----
-
-Clank is an open source HTML/CSS prototyping framework for mobile apps. Think of it as Twitter Bootstrap but for prototyping native apps.
-
-How to use
-----------
-
-Run the demo files on a local webserver. Use the HTML and CSS components as you please.
-
-Acknowledgements
------------------
-
-Clank was inspired and uses parts of [Ratchet](http://maker.github.io/ratchet/).
-
-Contributing
-------------
-
-Open a [Github issue](https://github.com/Wolfr/clank/issues) if you have any feedback or ideas.
-
-Check out the "gh-pages" branch to contribute to the Clank project.
+  npm install
+  bower install
+  grunt watch
+
+Make sure you have installed node JS, bower and Grunt.

_config.yml

@@ -1,8 +1,3 @@
-permalink: /blog/:year/:month/:title
-
-paginate: 7
-paginate_path: "blog/page:num"
-
 markdown: kramdown
-
-devmode: true
+pygments: true
+title: Clank

_includes/docs/components/base-layout.html

@@ -1,7 +1,5 @@
 <h3 id="component-headers-footers">Component: base layout</h3>
 
-<!-- <p>Controlled by: _headers-footers.scss</p> -->
-
 <p>The base layout component provides markup for iOS/Android style headers and footers. Adding headers and footers is as simple as adding specific markup.</p>
 
 <h4>Adding a title bar</h4>

_includes/docs/components/button-groups.html

@@ -5,7 +5,7 @@ <h3>Component: button groups</h3>
 <p>Wrap buttons in a <code>.cl-btn-group</code> and they will be grouped.</p>
 
 {% highlight html %}
-<div class="cl-btn-toolbar">
+<div class="cl-btn-toolbar flex">
   <a class="cl-btn cl-btn">Label</a>
   <a class="cl-btn cl-btn">Label</a>
 </div>

_includes/docs/components/button-toolbars.html

@@ -5,7 +5,7 @@ <h3>Component: button toolbars</h3>
 <p>Wrap buttons in a <code>.cl-btn-toolbar</code> and they will be split.</p>
 
 {% highlight html %}
-<div class="cl-btn-toolbar">
+<div class="cl-btn-toolbar flex">
   <a class="cl-btn cl-btn">Label</a>
   <a class="cl-btn cl-btn-primary">Label</a>
 </div>

_includes/docs/components/table-view.html

@@ -5,7 +5,7 @@ <h3 id="component-table-view">Component: table view</h3>
 <h4>Table titles</h4>
 {% highlight html %}<h3 class="cl-table-title">table title</h3>{% endhighlight %}
 
-<h4>Grouped table view (default with <code>.cl-view-all</code>)</h4>
+<h4>Grouped table view (default with <code>.cl-table-view-btn</code>)</h4>
 
 {% highlight html %}
 <div class="cl-table">
@@ -14,12 +14,12 @@ <h4>Grouped table view (default with <code>.cl-view-all</code>)</h4>
       <span class="label">Item 1</span>
     </a>
   </div>
-  <div class="cl-table-cell">
+  <div class="cl-table-cell last-of-type">
     <a href="#">
       <span class="label">Item 2</span>
     </a>
   </div>
-  <div class="cl-view-all">
+  <div class="cl-table-view-btn">
     <a href="#">View all</a>
   </div>
 </div>
@@ -80,14 +80,3 @@ <h4>Grouped table view with icons in front of labels</h4>
 </div>
 {% endhighlight %}
 
-<h4>Table view (extended)</h4>
-
-{% highlight html %}
-<div class="cl-table__extended">
-  <div class="cl-table-cell">
-    <a href="#">
-      <span class="label">Item 1</span>
-    </a>
-  </div>
-</div>
-{% endhighlight %}

_includes/docs/screens/demo-1.md

@@ -0,0 +1,24 @@
+**Welcome to Clank.**
+
+You can use this framework to prototype screens for native apps in HTML/CSS.
+
+To do so, make new HTML files like this `index.html` file. Link them together to form a flow.
+
+We have provided a sample flow for you to work with.
+
+---
+
+This is documentation for the first screen. You can edit the documentation in `/docs/screens/demo-1.md`.
+
+You can attach a new documentation file to a new screen by editing `layouts/base.html`. The way it works is that you reference markdown files contained in `/docs/screens/` on each page:
+
+    {% raw %}
+    {% case page.docs %}
+      {% when 'screen-demo-1' %}
+         {% markdown docs/screens/demo-1.md %}
+      {% when 'screen-demo-2' %}
+         {% markdown docs/screens/demo-2.md %}
+      {% else %}
+        <p>No documentation for this page.</p>
+    {% endcase %}
+    {% endraw %}

_includes/docs/screens/demo-2.md

@@ -0,0 +1 @@
+This is the second screen documentation just for example purposes.