<script src="//gnjo.github.io/underscore.min.js"></script>
<script src="//gnjo.github.io/md5.min.js"></script>
<script onload="use(this)" src="//gnjo.github.io/use.js?q=normalize.min.css|use.css|filter.css|white.css"></script>

<link rel="stylesheet" href="//gnjo.github.io/layout.css">
<link rel="stylesheet" href="//gnjo.github.io/githubtheme.css">
<script src="//gnjo.github.io/base64.min.js"></script>
<script src="//gnjo.github.io/underscore.min.js"></script>
<script src="//gnjo.github.io/randomColor.min.js"></script>
<script src="//gnjo.github.io/signal.js"></script>
<script src="//gnjo.github.io/scrollIntoView.min.js"></script>
<link rel="stylesheet" href="//gnjo.github.io/article.css">
<script src="//gnjo.github.io/invert.min.js"></script>
<script src="//gnjo.github.io/md5.min.js"></script>
<link rel="stylesheet" href="//gnjo.github.io/monocc.css">
<script src="//gnjo.github.io/marked.min.js"></script>
<link rel="stylesheet" href="//gnjo.github.io/digital.font.css">
<link rel="stylesheet" href="//gnjo.github.io/filter.css">

<!-- use.js need last load -->
<script onload="use(this)" src="//gnjo.github.io/use.js"></script>
<!-- if pack load  use.js?q=xxxx|yyyy|
<script onload="use(this)" src="//gnjo.github.io/use.js?q=use.css|monocc.css|filter.css"></script>

//exsample of one
textbox.oninput = _.debounce((ev)=>{console.log('hit')}, 300);
var temp=_.template('<h3><%= ti %></h3><p><%= pa %></p>')
temp({ti:'the title',pa:'the paragraph'}); //<h3>the title</h3><p>the paragraph</p>
_.range(5); //[0,1,2,3,4]

//exsample of one
randomColor({hue: 'red'});//#aa3333
randomColor({hue: 'red',luminosity:'dark'});//#441111
randomColor({hue: 'red', count: 18});//[0]...[18]
//option 
//hue:[red,orange,yellow,green,blue,purple,pink,monochrome,random]
//luminosity:[dark,light,random]
//count: number

usage same

<script onload='use(this)' src="//gnjo.github.io/use.js?q=monocc.css|filter.css"></script>

fn.g //document.getElementById //fn.g('ma') //HTMLElement
fn.q //document.queryString //fn.q('div[data-xyz]') //HTMLElement
fn.i //initer createElement apply// fn.i('<li>aaaa</li>') //HTMLElement
fn.rnum //randam number //fn.rnum(4) //'3383'
fn.rword //r.. word //fn.rword(4) //'ksyg'
fn.rkana //r.. kana //fn.rkana(4) //'gage'
fn.hashColor // need md5.min.js
fn.invertColor // need invert.min.js

fn.loId ='xyz'; //project unique is good. default '__loId__'
t.value= fn.loLoad()||'';
function pnt(){ fn.loSave(this.value) }
//fn.loRemove(); //if delete

//def
fn.i2=function(html,attr,style,doc=document)

var u='//gnjo.github.io/article.css.test.html'
var t ='body>article:nth-child(3)';
fn.fragment(u,t)
 .then((el)=>{ 
 if(el) document.body.innerHTML=el.innerHTML;
 else console.log('not')
})

//if use fn.fragment on .js and .css, write the <body>, not the <head> 
/* article.css.test.html
<head></head>
<body>
<link .... href="xxxxx.css"...
<script src="xxxxxx.js"...
...
</body>
*/

var ary=[];
...
 fn.g('l').innerHTML = fn.rotation(ary,'<li>'+fn.rkana(8)+'</li>',30).join(''); // ary limit the 30.

<body class="githubtheme" ...

document.body.classList.add('githubtheme')

<style>.c{max-width:960px}/*max-width rewrite*/</style>
<div class="c">
 <div class="r">
  <div class="c10 cl">header</div>
 </div>
 <div class="r">
  <div class="c5 cl">left</div><div class="c5 cl">right</div>
 </div>
 <div class="r">
  <div class="c7 cl">left</div><div class="c3 cl">right</div> 
 </div> 
</div>

 var
 var si=signal({el: target })
 //var si=signal({el:target,interval:300,status:true,title:'ok',debug:true}); //full
 document.getElementById('done').onclick=()=>{ si.done('ok') }
 document.getElementById('doing').onclick=()=>{ si.doing('calcing') }

<style>
 .signalgreen{color:limegreen;cursor:pointer}
</style>

 var
 target.scrollIntoView({ behavior: 'smooth' });////

 <style>body{margin:auto;max-width:900px}/*max-width rewrite*/</style>
 <article>...</article>
 <!--or-->
 <div class="article">...</div>

invert('#000')              // —> #ffffff
invert('#282b35')           // —> #d7d4ca

// amplify to black or white
invert('#282b35', true)     // —> #ffffff

// amplify to custom black or white color
invert('#282b35', { black: '#3a3a3a', white: '#fafafa' })     // —> #fafafa

// input color as RGB array or object
invert([69, 191, 189])              // —> #ba4042
invert({ r: 249, g: 119, b: 121 })  // —> #068886

md5('aiuewo') //-> "55c97d5e7f66fb05f9c71d51bdba9c93"

//monocc use flex container
<nav class="monocc">
 ...
</nav>

//usage simple the <i>
< ... class="monocc">
 ...
 <p><i>face</i></p>
 <p><a href="#"><i>launch</i>this is link</a></p> 
 <button><i>face</i>xxxxbtn</button>
 <label class="button"><i>face</i>xxxxbtn</label>

marked(data); //quick

<link rel="stylesheet" href="//gnjo.github.io/digital.font.css">
<style> body{ font-family:'digital'}</style>

<!-- dont forget onload='run(this)' -->
<script onload='run(this)' src="//gnjo.github.io/run.js?q=use.js|underscore.min.js"></script>

<!-- usage -->
<img class="if-dark" ...>

<!-- mix. but limit 2 -->
<img class="if-portrait if-smoke" ...>

.if-none
.if-night
.if-dark
.if-flash
.if-shock
.if-past
.if-portrait
.if-wraith
.if-smoke
.if-poison
.if-hard

/*special not mix*/
.if-imagine

<body><div> need first div  </div></body>
//if layer background use the .white-layer
<body><div>
<div class="white-layer"> 
....