Welcome to J1
All you’re doing at the end of the day is writing your content, and the J1 Template does all the tricky things: putting out HTML, Javascript, and CSS. As a result, the site creation process gets out of your way.
Masonry is a JavaScript grid layout library. It works by placing elements in an optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
Integrate Masonry with the Bootstrap grid system and cards component.
Initializing the mansory grid by {"percentPosition": true } on the .row wrapper, this combines the powers of Bootstrap’s responsive grid and Masonry’s positioning. |
$(document).ready(function() {
var dependencies_met_j1_finished = setInterval(function() {
if (j1.getState() == 'finished') {
var $grid = $('#example-masonry');
$grid.masonry({
percentPosition: true
});
clearInterval(dependencies_met_j1_finished);
} // END if j1.getState()
}, 25);
});3-Column Grid
Rerum consequuntur provident dicta ipsa est unde quam laboriosam velit a nihil pariatur ut iste. Iste omnis earum placeat ad in quam molestiae quos dolor voluptatem. Rem sequi atque sunt enim et. Voluptate delectus qui culpa et facilis voluptatem assumenda consequatur quod sunt. Non eos quia quia blanditiis autem quidem voluptatem non tempore voluptas aliquam aspernatur praesentium ut.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
A well-known quote, contained in a blockquote element.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
A well-known quote, contained in a blockquote element.
Card title
This card has a regular title and short paragraph of text below it.
Last updated 3 mins ago
A well-known quote, contained in a blockquote element.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago
2-Column Grid
Eius atque ut nam nisi eos eos inventore qui assumenda commodi. Id placeat ut dolor exercitationem eos error quis minus. Et eos qui in qui autem sequi dolores vel eum vitae. Cumque et dignissimos aut id animi et. Autem quod ratione reiciendis aut labore illo facilis corporis quia nisi et odio.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
A well-known quote, contained in a blockquote element.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Welcome to J1
All you’re doing at the end of the day is writing your content, and the J1 Template does all the tricky things: putting out HTML, Javascript, and CSS. As a result, the site creation process gets out of your way.
A well-known quote, contained in a blockquote element.
Card title
This card has a regular title and short paragraph of text below it.
Last updated 3 mins ago
A well-known quote, contained in a blockquote element.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago