| Metrics | change | |
|---|---|---|
| today_unit | 0.06 | |
| today_dollar | 0.06 | |
| today_agp | 0.6 | |
| wtd_unit | 0.68 | |
| wtd_dollar | 0.70 | |
| wtd_agp | 0.7 | |
| ptd_unit | 0.39 | |
| ptd_dollar | 0.40 | |
| ptd_agp | 0.4 |
| <!-- Latest Sortable --> | |
| <script src="//rubaxa.github.io/Sortable/Sortable.js"></script> | |
| <div class="modal-overlay"></div> | |
| <div class="wrap" id="multi"> | |
| <div class="dragBox" id="drag1"> | |
| <div id="task1" class="task" onclick="expandCard(this, event)"> | |
| <div class="cardMini "> | |
| <div class="header color-green"></div> | |
| <div class="content">Task Content...</div> | |
| </div> |
| <!-- 由官方 Demo 中抽取出 --> | |
| <!-- https://haltu.github.io/muuri/ --> | |
| <section class="grid-demo"> | |
| <h2 class="section-title"><span>Grid Demo</span></h2> | |
| <div class="controls cf"> | |
| <div class="control search"> | |
| <div class="control-icon"> |
A Dynamic Grid System.
I wanted to use GridStack.js but it had a few outstanding bugs that made it impossible for me to use in my web app.
Methods:
setOption: set an option after initialization by FlexGrid.setOption(option)
addWidget: add a widget to specified grid by FlexGrid.addWidget(grid)
| <div class="col-sm-12 form-group"></div> | |
| <div class="col-sm-12"> | |
| <div class="row"> | |
| <div class="col-sm-3 offset-sm-9"> | |
| <button id="save_coord" class="btn button form-group">save</button> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div id="zone_div"></div> |
Aka all the junk that I eat when I pull my all-nighters.
A Pen by idahopotato1 on CodePen.
A Pen by Häñïbäl Gîrmäý on CodePen.
| <h1>A demo of new CSS to accomplish a Masonry-style layout</h1> | |
| <h3>Compare Display modes:</h3> | |
| <input type="radio" name="display" value="masonry" id="masonry" checked> <label for="masonry">Masonry (Firefox Nightly only, <a href="#note">pref on</a>)</label><br> | |
| <input type="radio" name="display" value="grid" id="grid"> <label for="grid">Grid 1 (also the fallback)</label><br> | |
| <input type="radio" name="display" value="multicolumn" id="multicolumn"> <label for="multicolumn">Multicolumn</label><br> | |
| <input type="radio" name="display" value="flexbox" id="flexbox"> <label for="flexbox">Flexbox (row)</label><br> | |
| <input type="radio" name="display" value="flexbox2" id="flexbox2"> <label for="flexbox2">Flexbox (column)</label> | |
| <p>Be sure to <a href="#note">read the note</a> about this demo. Also, I made <a href="https://codepen.io/jensimmons/full/vYNeRZw" target="_blank">another demo</a> that shows off what Masonry in CSS Grid can do — far beyond the JS libraries of today.</p> | |
| <main> |
| <div class="gallery"> | |
| <header> | |
| <h1>Photo Gallery</h1> | |
| </header> | |
| <main id="image-gallery" class="images"></main> | |
| <footer id="gallery-pagination"> | |
| <button id="btnPrevious">← <span class="sr-only">Previous</span></button> | |
| <div> | |
| <div id="gallery-dots"></div> | |
| <span id="page"></span> |
| <el-toast></el-toast> | |
| <template id="elToastItem"> | |
| <div class="el-toast__icon"></div> | |
| <div class="el-toast__close"> | |
| <button> | |
| <i class="fa fa-fw fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="el-toast__description"></div> |