index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSTiles</title>
<link rel="stylesheet" data-template-style="true" type="text/css" href="css/CSTiles-1.1.0.css">
<link rel="stylesheet" data-template-style="true" type="text/css" href="css/CSShare-1.0.0.css">
</head>
<body>
<div class="cstiles" data-cstiles-size="4,auto" data-cstiles-margin="5">
<div class="cstiles__item" data-cstiles-size="2">
<iframe class="cstiles__item-video" width="500" height="500" src="https://www.youtube.com/embed/w1I-HWAP6N8?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cstiles__item" data-cstiles-size="1" data-cstiles-image_src="images/2.jpg">
</div>
<div class="cstiles__item" data-cstiles-size="1,2">
<img class="cstiles__item-image" src="images/3.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="1" data-cstiles-order="1" data-cstiles-order-tablet="1">
<img class="cstiles__item-image" src="images/4.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="2,1" data-cstiles-order="2" data-cstiles-order-tablet="2" data-cstiles-image_position="left,bottom">
<img class="cstiles__item-image" src="images/5.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="1">
<img class="cstiles__item-image" src="images/6.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="1">
<img class="cstiles__item-image" src="images/7.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="2,1">
<img class="cstiles__item-image" src="images/8.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="1">
<img class="cstiles__item-image" src="images/9.jpg" alt=" ">
</div>
<div class="cstiles__item" data-cstiles-size="1">
<img class="cstiles__item-image" src="images/10.jpg" alt=" ">
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.CSTiles-1.1.0.min.js"></script>
<script src="js/jquery.CSShare-1.0.0.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>