riot.js frame template

1. 右サイドバー。上下左右可変

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link rel="stylesheet" href="//gnjo.github.io/use.css">
<link rel="stylesheet" href="//gnjo.github.io/split2.css">
<script src="//gnjo.github.io/split.min.js"></script>
<script src="//gnjo.github.io/riot.js"></script>
<system>
 <wallpaper></wallpaper>
 <div class="rtb split parent">
  <div class="l split split-horizontal">
   <div class="t"><top></top></div>
   <div class="b"><bottom></bottom></div>          
  </div>
  <div class="r split split-horizontal"><side></side></div>
 </div>
 <script>
  Split(['.rtb .l', '.rtb .r'], {minSize:0,sizes: [75, 25],gutterSize: 8,cursor: 'col-resize'});
  Split(['.rtb .t', '.rtb .b'], {minSize:0,sizes: [15, 85],direction: 'vertical',gutterSize: 8,cursor: 'row-resize'})
 </script>
</system>

2. riot.tagでそれぞれweb component的に入れる。

system,wallpaper,top,bottom,side