Post-it wall with Handlebarsjs, quick draft. by hugolpz

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Concise Handlebars.js</title>
    <!-- 0a. CSS -->
    <link rel="stylesheet" href="style.css">
 
    <!-- 0a. JS -->
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script><!-- online jquery.js -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script><!-- online handlebars.js-->
  </head>
 
  <body>
    <!--1. Data (json format!) -->
    <script>
    var url='data.json'; // relative url : 'data.json'; protocole-relative absolute url: '//website.org/path/to/data.json';
    </script>
    
   <!-- 2. Anchor -->
<div class="wrapper" id="anchor">

    
</div>
 
    <!-- 3. Template -->
    <script id="tpl" type="text/template">
     {{#stickers}}
  <div class="sticker {{tag}}">
    <h3><a href="{{url}}">{{title}}</a> ({{pages}}p)</h3>
			<p>{{intro}}</p><br />
    <p class="mini">for {{ask_by}} & all, by {{post_by}}</p>
  </div>
  {{/stickers}}
          </script>
    <!--4. Handlebars.js slingshot -->
    <script>
    //4a.function creation
    var slingshot = function (url, tplId, anchor) {
     $.getJSON(url, function(data) {
              var template = $(tplId).html();
              var stone = Handlebars.compile(template)(data);
              $(anchor).append(stone);
     });
  }
    //4b.function firing
    slingshot('data.json', '#tpl', '#anchor'); // since url = 'data.json' , we can use both notations.
    </script>
 
</body>
</html>

Post-it.markdown

Post-it with Handlebarsjs
-------

By [Lopez Hugo](http://twitter.com/hugo_lz)

data.json

{ "stickers": 
      [
        
        { "title":"HackYourPhD: C'est quoi ?", 
        "intro":"C'est un rush de 4 heures pour débloquer des situations. Un brain storming identifie les mission et prioritise dans les 30 premières minutes. Puis chaque groupe s'attaque à un problème <b>jusqu'à résolution !</b>", 
        "ask_by": "all", 
        "post_by": "all", 
        "pages": "0", 
        "tag":"rédaction", 
        "url":"" },
        { "title":"Qui ?", 
        "intro":"Pour les doctorants PLIDAM, pour partager des astuces de productivité !", 
        "ask_by": "all", 
        "post_by": "hugo", 
        "pages": "0", 
        "tag":"administratif", 
        "url":"" },
        { "title":"Rédiger un questionnaire", 
        "intro":"Comment rédiger un questionnaire avec des questions neutres, afin d'obtenir des données valides non biaisées.", 
        "ask_by": "Elena", 
        "post_by": "Hugo", 
        "pages": "2", 
        "tag":"méthodologie", 
        "url":"" }
        ]
     }

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);

body {
	margin:0;
	font-family: 'Open Sans', sans-serif;
	background: #eee;
	font-size: 1em;
	line-height: 1;
	padding: 20px;
	background-image: url(https://sites.google.com/site/carolinacsfirst/unit/home/websites/moodboardbg.jpg);
	background-repeat: repeat;
}

.wrapper {
	position: relative;
	width: 700px;
	height: 900px;
	border: 15px solid #130d02;
	margin: 0 auto;
	background-color: #ad6908;
	background-image: url(https://sites.google.com/site/carolinacsfirst/unit/home/websites/corkboard.jpg);
	background-repeat: repeat;
	box-shadow: 5px 5px 5px rgba(0,0,0,.4);
}

.sticker {
	position: relative;
	padding: 25px;
	display: inline-block;
	-webkit-box-shadow: 0 8px 14px -7px #666;
	-moz-box-shadow: 0 8px 14px -7px #666;
	box-shadow: 0 8px 14px -7px #666;
	-webkit-border-bottom-right-radius: 60px 10px;
	-moz-border-radius-bottomright: 60px 10px;
	border-bottom-right-radius: 60px 10px;
	margin: 3 3 20px 20px;
	max-width: 25em;
}

.sticker h3 {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: normal;
	line-height: 1.5;
	border-top-width: 2px;
	border-top-style: dotted;
	margin: 0 -25px;
	padding: 15px 25px 0 25px;
}
.sticker h3 a { text-decoration: none; }

.sticker p {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
.sticker p.mini { color: grey; font-size: 0.7em; text-align: right; }

.méthodologie {background: #fefabc;}
.méthodologie h3 {border-top-color: #dbd581;}
.administratif {background: #FDD7DB;}
.administratif h3 {border-top-color: #E6A1A8;}
.rédaction {background: #EAF763;}
.rédaction h3 {border-top-color: #72A201;}
.postit4 {background: #B9EAF6;}
.postit4 h3 {border-top-color: #6DB4C4;}