avris-columnist
Version:
Simple and lightweight multi-column design
165 lines (153 loc) • 6.39 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Avris Columnist – Demo</title>
<meta name="description" content="Simple and lightweight multi-column design." />
<meta name="keywords" content="column, multi-column, design, js, css, website, masonry, layout, javascript, library" />
<meta name="author" content="Andrea Vos <andrea@avris.it>" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./icon.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.columnist-wall > .columnist-column {
transition: margin-top .2s ease-in-out;
}
</style>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Avris Columnist – Demo">
<meta name="twitter:description" content="Simple and lightweight multi-column design.">
<meta name="twitter:image" content="https://columnist.avris.it/columnist.png">
<meta property="og:type" content="article" />
<meta property="og:title" content="Avris Columnist – Demo" />
<meta property="og:url" content="https://columnist.avris.it" />
<meta property="og:image" content="https://columnist.avris.it/columnist.png" />
</head>
<body>
<div class="container">
<header class="my-5">
<h1>
<img src="./icon.png" />
Avris Columnist
<small>– Demo</small>
</h1>
<p>Simple and lightweight multi-column design.</p>
</header>
<div class="row">
<p class="col-md-6">
Columnist achieves a nice, masonry-like, multi-column design without using absolute positioning.
It doesn't move items to different columns, doesn't do any fancy maths,
all it does it fixing the empty space below shorter columns – simple and lightweight!
</p>
</div>
<div class="btn-group btn-block my-5">
<a href="https://avris.it/projects/columnist" target="_blank" rel="noopener" class="btn btn-primary">
<span class="fas fa-pencil"></span>
How it works?
</a>
<a href="https://gitlab.com/Avris/Columnist" target="_blank" rel="noopener" class="btn btn-secondary">
<span class="fab fa-gitlab"></span>
Source code
</a>
<a href="https://www.npmjs.com/package/avris-columnist" target="_blank" rel="noopener" class="btn btn-dark">
<span class="fab fa-npm"></span>
NPM
</a>
</div>
<div id="app" class="my-5">
<p class="d-sm-none">
<small>On small screens, this demo has only one column (to show that the script can handle this case as well), so the columnist effect is not visible. Try switching your phone to horizontal view.</small>
</p>
<div class="columnist-wall row" ref="wall">
<div class="columnist-column col-12 col-sm-4 pb-4" v-for="item in items">
<div class="card border-secondary bg-light" :style="'height: ' + item.height + 'rem'">
<div class="card-body text-center h1">
{{ item.i }}
</div>
</div>
</div>
</div>
<button class="btn btn-primary btn-block" @click="generateItems(10)">
<span class="fas fa-plus-circle"></span>
Generate more items
</button>
<button class="btn btn-success btn-block" @click="start" v-if="columnist === null">
<span class="fas fa-play-circle"></span>
Enable Columnist
</button>
<button class="btn btn-danger btn-block" @click="destroy" v-if="columnist !== null">
<span class="fas fa-trash"></span>
Disable Columnist
</button>
</div>
<footer class="mt-5 py-4 border-top">
<ul class="list-inline">
<li class="list-inline-item my-1">
Made with ❤ by Andrea Vos
</li>
<li class="list-inline-item my-1">
<a href="https://avris.it" target="_blank" rel="noopener">
<span class="fas fa-globe-africa"></span>
avris.it
</a>
</li>
<li class="list-inline-item my-1">
<a href="mailto:andrea@avris.it" target="_blank" rel="noopener">
<span class="fas fa-envelope"></span>
andrea@avris.it
</a>
</li>
<li class="list-inline-item my-1">
<a href="https://gitlab.com/Avris" target="_blank" rel="noopener">
<span class="fab fa-gitlab"></span>
Avris
</a>
</li>
<li class="list-inline-item my-1">
License:
<a href="https://oql.avris.it/license.md?c=Andrea Vos|https://avris.it" target="_blank" rel="noopener">
OQL
</a>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./dist/Columnist.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
items: [],
columnist: null,
},
mounted() {
this.generateItems(10);
this.start()
},
methods: {
start() {
this.columnist = new Columnist(this.$refs.wall);
this.columnist.start();
},
destroy() {
this.columnist.destroy();
this.columnist = null;
},
generateItems(size) {
for (let i = 0; i < size; i++) {
this.count++;
this.items.push({
i: this.count,
height: Math.random() * 18 + 6,
})
}
}
},
});
</script>
<script src="https://kit.fontawesome.com/940536de69.js"></script>
<script defer data-domain="columnist.avris.it" src="https://plausible.avris.it/js/script.js"></script>
</body>
</html>