Commit 9e238674 by Jun Matsushita

Deprecate mockup

parent 3e38e52c
---
layout: page
title: Mockup - Offline
---
## Offline
We've taken this Open Integrity mockup down. Stay tuned for the new version.
{
"directory": "assets"
}
# Bootsketch : wireframe theme for TWBS3
Bootsketch is a little [Bootstrap](https://github.com/twbs/bootstrap-sass) theme for wireframing web project. Unlike the Bootstrap base theme, Bootsketch provide a sketch render to remove all "design feeling" when we present it to client or during user test.
**[Demo](http://yago.github.io/Bootsketch/)**
## Usage
**Manually :**
Just download the repo and use the `bootsketch.css` locate in `build/css/` and `build/fonts/` for icons.
**With Bower :**
```
$ bower install bootsketch
```
## Contribution
You will need :
* Node -> [npm](npmjs.org)
* [Bower](bower.io)
* and [Hologram](https://github.com/trulia/hologram) to regenerate the styleguide
To setup the project :
````
$ npm install
$ bower install
$ gulp
````
CHANGELOG
=========
This changelog references the relevant changes and bug fixes done.
* 1.1.2 & 1.1.3(2014-06-11)
* yago31 : Fix search with the last Hologram update
* 1.1.1 (2014-05-08)
* yago31 : Update how to install hologram in the README
* yago31 : fix few little css things
* 1.1.0 (2014-05-07)
* yago31 : fix many bootstrap conflict with theme
* yago31 : enhance theme with a complete color scheme change
* yago31 : add search feature
* yago31 : add css/js to include in the hologra_config.yml
* yago31 : add scope_name option
* 1.0.2 (2014-04-23)
* yago31 : fix bower ignore
* 1.0.1 (2014-04-23)
* yago31 : add License and bower ignore
* 1.0.0 (2014-04-23)
* yago31 : After one little week, Cortana finally come to a stable and usable version.
The MIT License (MIT)
Copyright (c) 2014 Yann Gouffon
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
#Cortana : a sexy Hologram theme
>Cortana is a nice theme for Trulia's [Hologram](https://github.com/trulia/hologram), the ruby front-end doc generator, and inspired by PebbleRoad's [Tapestry](https://github.com/PebbleRoad/tapestry).
Check the [Demo](http://yago31.github.io/Cortana-example)
##Usage
To install the last version of **Hologram** (required) :
````
$ git clone git@github.com:trulia/hologram.git
$ cd hologram/
$ gem build hologram.gemspec
$ gem install hologram-1.0.1.gem
````
To install **Cortana**, use Bower :
````
$ bower install --save-dev Cortana
````
Your `hologram_config.yml` should look like :
````
# Directory to parse
source: ./your-code
# Directory to build the styleguide
destination: ./styleguide
# Hologram theme
documentation_assets: ./bower_components/Cortana
# To have a custom index page build with your README.md
index: README
# List all css to include for the styleguide render examples (path from styleguide directory)
css_include:
- '../assets/css/vendors.css'
- '../assets/css/styles.css'
# List all js to include for the styleguide render examples (path from styleguide directory)
js_include:
- 'http://code.jquery.com/jquery-1.10.2.min.js'
- '../assets/js/main.js'
# String who is used to split the category name and create category wrapper
name_scope: ' > '
````
We recomand to place a `README.md` in the root of your source directory to build a custom styleguide index page.
To have add a **custom category wrapper** like in the example, just add it before your category name with `space>space` and before all the other categories in the same wrapper. This `name_scope` can be change in the `hologram_config.yml`. You will have something like this :
````
/*doc
---
title: My Title
name: myname
category: General > Button
---
Some Markdown comment and markup...
*/
````
## Edition
To edit **Cortana** you will need [Bower](bower.io), [npm](https://www.npmjs.org) and [NodeJS](http://nodejs.org/)
To setup the project :
````
$ npm install
$ bower install
$ gulp
````
##@TODO
* Dark theme
##Dependencies
* [jQuery](https://github.com/jquery/jquery)
* [Slidebars](https://github.com/adchsm/Slidebars), by adchsm
* [Sticky-kit](https://github.com/leafo/sticky-kit), by leafo
* [Typeahead.js](https://github.com/twitter/typeahead.js), by twitter
* [Hogan](https://github.com/twitter/hogan.js), by twitter
</div>
</div>
<footer class="cortana-footer">
Build with love using Trulia's <a href="https://github.com/trulia/hologram">Hologram</a> and <a href="https://github.com/Yago31/Cortana">Cortana</a> !
</footer>
</div>
<script src="theme-build/js/vendors.min.js"></script>
<script type="text/javascript">
// avoid conflict with potential other jQuery loaded on the styleguide
var jQuery_no_conflict = $.noConflict(true);
</script>
<script src="theme-build/js/main.js"></script>
<script>
var searchData =
<%= "[" %>
<% @pages.each do |file_name, page| %>
<% if not page[:blocks].empty? %>
<% page[:blocks].each do |block| %>
<% file_path = block[:categories][0].to_s.gsub(' ', '_').downcase + '.html' %>
<% file_id = "#"+block[:name].to_s %>
<%= "{" %>
<%= "\"title\": \""+block[:title].to_s+"\"," %>
<%= "\"breadcrumb\": \""+block[:categories][0].to_s+" > "+block[:title]+"\"," %>
<%= "\"path\": \""+file_path+file_id+"\"," %>
<%= "\"tokens\": [\""+block[:categories][0].to_s+"\",\""+block[:title].to_s+"\"]" %>
<%= "}," %>
<% end %>
<% end %>
<% end %>
<%= "{}]" %>;
(function($) {
$('#cortana-search').typeahead({
name: 'cortana_search',
local: searchData,
template: [
'<a href="{{path}}">',
'<p class="cortana-search-title">{{title}}</p>',
'<p class="cortana-search-path">{{breadcrumb}}</p>',
'</a>'
].join(''),
updater: function () {
/* navigate to the selected item */
alert('ok');
},
engine: Hogan
}).on('typeahead:selected', function(event, data) {
window.location.replace(data.path);
});
}) (jQuery_no_conflict);
</script>
<% @config['js_include'].each do |js| %>
<script type="text/javascript" src="<%= js %>"></script>
<% end %>
</body>
</html>
<% nameScope = @config['name_scope'] %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title><%= title %></title>
<!-- Styleguide CSS -->
<link rel="stylesheet" href="./theme-build/css/vendors.css">
<link rel="stylesheet" href="./theme-build/css/cortana.css">
<!-- Source CSS -->
<% @config['css_include'].each do |css| %>
<link rel="stylesheet" href="<%= css %>">
<% end %>
<!--[if lt IE 9]>
<script src="theme-build/polyfill/html5shiv.js"></script>
<script src="theme-build/polyfill/respond.min.js"></script>
<![endif]-->
</head>
<body class="cortana-body">
<div class="sb-slidebar sb-left cortana-sidenav sb-style-push">
<% catWrappers = Array.new %>
<% @categories.each do |cat| %>
<% catWrapperName = cat[0].split(nameScope).first %>
<% if not catWrappers.include?(catWrapperName) %>
<% catWrappers.push(catWrapperName) %>
<% end %>
<% end %>
<nav class="cortana-nav">
<ul>
<% if file_name.include?('index.html') %>
<li><a class="active" href="index.html">Home</a></li>
<% else %>
<li><a href="index.html">Home</a></li>
<% end %>
</ul>
<% catWrappers.each do |wrapper| %>
<h3><%= wrapper %></h3>
<ul>
<% @categories.each do |cat| %>
<% if cat[0].include?(wrapper) %>
<% catName = cat[0].split(nameScope).last %>
<% if catName == title.split(nameScope).last %>
<li><a class="active" href="<%= cat[1] %>"><%= catName %></a></li>
<% else %>
<li><a href="<%= cat[1] %>"><%= catName %></a></li>
<% end %>
<% end %>
<% end %>
</ul>
<% end %>
</nav>
</div>
<header class="cortana-header sb-slide">
<% if title.split(nameScope).last %>
<h1><%= title.split(nameScope).last %></h1>
<% elsif file_name.include?('index.html') %>
<h1>Styleguide home</h1>
<% end %>
<div id="open-left" class="cortana-menu-btn">
<span></span>
<span></span>
<span></span>
</div>
<input id="cortana-search" class="cortana-search" type="text" placeholder="Search">
</header>
<div id="sb-site">
<div class="cortana-container">
<nav id="cortana-inside-nav" class="cortana-inside-nav">
<ul>
<% @blocks.each do |block| %>
<% if not block[:parent] %>
<li><a href="#<%= block[:name] %>"><%= block[:title] %></a></li>
<% end %>
<% end %>
</ul>
</nav>
<div class="cortana-content-wrapper">
{
"name": "Cortana",
"version": "1.1.3",
"ignore": [
"**/.*",
"gulpfile.js",
"assets",
"package.json"
],
"devDependencies": {
"jquery": "1.10.*",
"Slidebars": "~0.9.4",
"sticky-kit": "~1.0.4",
"typeahead.js": "~0.9.3",
"hogan": "~3.0.0"
}
}
#sb-site,.sb-slidebar,body,html{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{width:100%;overflow-x:hidden}html{height:100%}body{min-height:100%;position:relative}#sb-site{width:100%;position:relative;z-index:1;background-color:#fff}.sb-slidebar{height:100%;overflow-y:auto;position:fixed;top:0;z-index:0;visibility:hidden;background-color:#222}.sb-left{left:0}.sb-right{right:0}.sb-slidebar.sb-static,html.sb-static .sb-slidebar{position:absolute}.sb-slidebar.sb-active{visibility:visible}.sb-slidebar.sb-style-overlay{z-index:9999}.sb-slidebar{width:30%}.sb-width-thin{width:15%}.sb-width-wide{width:45%}@media (max-width:480px){.sb-slidebar{width:70%}.sb-width-thin{width:55%}.sb-width-wide{width:85%}}@media (min-width:481px){.sb-slidebar{width:55%}.sb-width-thin{width:40%}.sb-width-wide{width:70%}}@media (min-width:768px){.sb-slidebar{width:40%}.sb-width-thin{width:25%}.sb-width-wide{width:55%}}@media (min-width:992px){.sb-slidebar{width:30%}.sb-width-thin{width:15%}.sb-width-wide{width:45%}}@media (min-width:1200px){.sb-slidebar{width:20%}.sb-width-thin{width:5%}.sb-width-wide{width:35%}}#sb-site,.sb-slide,.sb-slidebar{-webkit-transition:-webkit-transform 400ms ease;-moz-transition:-moz-transform 400ms ease;-o-transition:-o-transform 400ms ease;transition:transform 400ms ease;-webkit-transition-property:-webkit-transform,left,right;-webkit-backface-visibility:hidden}.sb-hide{display:none}
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="26px" height="26px" viewBox="0 0 26 26" enable-background="new 0 0 26 26" xml:space="preserve">
<path fill="#95A5A6" d="M25.492,24.23l-7.541-7.543c1.48-1.732,2.378-3.973,2.378-6.424c0-5.465-4.445-9.91-9.91-9.91
s-9.91,4.445-9.91,9.91c0,5.465,4.446,9.91,9.91,9.91c2.292,0,4.399-0.789,6.079-2.1l7.575,7.577L25.492,24.23z M10.419,18.165
c-4.358,0-7.903-3.546-7.903-7.903s3.545-7.903,7.903-7.903c4.358,0,7.903,3.545,7.903,7.903S14.776,18.165,10.419,18.165z"/>
</svg>
/* ==========================================================
* inside-navigation.js
* Inside nav script to keep it fixed depend of the scroll position
*
* Author: Yann Gouffon, hello@yago.io
*
* Copyright 2014 Yann Gouffon
* Licensed under MIT
========================================================== */
(function($) {
$(document).ready(function() {
// Init stick inside nav
if( $(window).width() > 1280 ) {
$("#cortana-inside-nav").stick_in_parent()
.on("sticky_kit:bottom", function() {
console.log('toggle bottom');
$(this).addClass("cortana-stick-bottom");
})
.on("sticky_kit:unbottom", function() {
console.log('toggle bottom');
$(this).removeClass("cortana-stick-bottom");
});
}
// Remove stick feature below 1280px
$( window ).resize(function() {
if( $(window).width() > 1280 ) {
$("#cortana-inside-nav").stick_in_parent()
.on("sticky_kit:bottom", function() {
console.log('toggle bottom');
$(this).addClass("cortana-stick-bottom");
})
.on("sticky_kit:unbottom", function() {
console.log('toggle bottom');
$(this).removeClass("cortana-stick-bottom");
});
}else {
$("#cortana-inside-nav").trigger("sticky_kit:detach");
console.log('unstick');
}
});
// Scroll To position
$('#cortana-inside-nav').find('a').click(function(event){
event.preventDefault();
$target = $(this).attr('href');
$('#cortana-inside-nav').find('a').removeClass('active');
$(this).addClass('active');
$('html, body').animate({
scrollTop: $($target).offset().top - 100
}, 800);
});
});
}) (jQuery_no_conflict);
/*global jQuery */
/* ==========================================================
* sidenav.js
* Side nav init script
*
* Author: Yann Gouffon, hello@yago.io
*
* Copyright 2014 Yann Gouffon
* Licensed under MIT
========================================================== */
(function($) {
$(window).load(function() {
var cortanaSlidebars = new $.slidebars();
// $(window).load(function () {
// cortanaSlidebars.open('left');