Jekyll, Gulp, BrowserSync... kickstarter for frontend development.
Home Page: http://anhskohbo.github.io/jekyll-for-frontend/
License: MIT License
Make sure you have npm and jekyll, gulp installed on your system.
Download this repo or clone to your computer.
git clone https://github.com/anhskohbo/jekyll-for-frontend.git
Open your terminal (cmd) and run commands below:
cd jekyll-for-frontend
npm install
gulp
FILE
src/include/components/comments.html
src/_sass/layouts/_components/_comments.scss
HTML
<div class="comments">
<h3 class="comments__title h4 text-uppercase">Customer reviews <small>(4 Reviews)</small></h3>
<ul class="comments__container">
<li class="comment">
<article class="comment__body">
<div class="comment__avatar">
<img src="img-demo/avatars/1.png" alt="Comment Image">
</div>
<div class="comment__info">
<div class="comment__meta">
<h5 class="comment__author">
<a href="#" title="">John Doe</a>
</h5>
<div class="comment__metadata">
<span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
</div>
</div>
<div class="comment__content">
<h4>Like it!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus luctus enim ut mattis. Morbi pulvinar ligula sed velit congue placerat molestie in tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vel magna ac tellus ultricies gravida. Duis at diam a nunc egestas viverra nec eu eros.</p>
</div>
</div>
<div class="comment__actions clearfix">
<p class="pull-right">
<a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
<a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
</p>
</div>
</article>
</li>
<!-- /.comment -->
<li class="comment">
<article class="comment__body">
<div class="comment__avatar">
<img src="img-demo/avatars/2.png" alt="Comment Image">
</div>
<div class="comment__info">
<div class="comment__meta">
<h5 class="comment__author">
<a href="#" title="">John Doe</a>
</h5>
<div class="comment__metadata">
<span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
</div>
</div>
<div class="comment__content">
<h4>Like it!</h4>
<p>Etiam quis velit ac quam elementum blandit sed et neque. Aliquam at velit quis metus feugiat ullamcorper. Fusce id augue enim. Morbi lacus justo, tempus nec mauris at, tristique tincidunt elit. Pellentesque tortor risus, posuere vitae sem nec, hendrerit ornare felis. Ut eget risus a urna aliquet ultricies.</p>
</div>
</div>
<div class="comment__actions clearfix">
<p class="pull-right">
<a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
<a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
</p>
</div>
</article>
<ul class="children">
<li class="comment">
<article class="comment__body">
<div class="comment__avatar">
<img src="img-demo/avatars/3.png" alt="Comment Image">
</div>
<div class="comment__info">
<div class="comment__meta">
<h5 class="comment__author">
<a href="#" title="">John Doe</a>
</h5>
<div class="comment__metadata">
<span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
</div>
</div>
<div class="comment__content">
<h4>Like it!</h4>
<p>In eu ipsum vel elit pharetra malesuada eu a mi. Nunc fermentum mattis metus, at commodo mi maximus id. Mauris purus elit, cursus eget lobortis eget, mattis a massa. In viverra bibendum ex. Morbi id neque id dolor commodo rhoncus ut eu mi. Suspendisse at augue arcu.</p>
</div>
</div>
<div class="comment__actions clearfix">
<p class="pull-right">
<a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
<a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
</p>
</div>
</article>
</li>
<!-- /.comment -->
<li class="comment">
<article class="comment__body">
<div class="comment__avatar">
<img src="img-demo/avatars/4.png" alt="Comment Image">
</div>
<div class="comment__info">
<div class="comment__meta">
<h5 class="comment__author">
<a href="#" title="">John Doe</a>
</h5>
<div class="comment__metadata">
<span data-datetime="2016-07-06T05:12:31+12:00">July 06, 2016 at 05:12 pm</span>
</div>
</div>
<div class="comment__content">
<h4>Like it!</h4>
<p>In eu ipsum vel elit pharetra malesuada eu a mi. Nunc fermentum mattis metus, at commodo mi maximus id. Mauris purus elit, cursus eget lobortis eget, mattis a massa. In viverra bibendum ex. Morbi id neque id dolor commodo rhoncus ut eu mi. Suspendisse at augue arcu.</p>
</div>
</div>
<div class="comment__actions clearfix">
<p class="pull-right">
<a href="#" class="comment__link" title=""><i class="fa fa-reply"></i> Reply</a>
<a href="#" class="comment__link" title=""><i class="fa fa-pencil-square-o"></i> Edit</a>
</p>
</div>
</article>
</li>
<!-- /.comment -->
</ul>
<!-- /.children -->
</li>
<!-- /.comment -->
</ul>
<!-- /.comments__container -->
<div class="comments__respond">
<h3 class="comments__title h4 text-uppercase">Leave a reply</h3>
<form action="/" method="post" class="commnet__form">
<div class="row">
<div class="col-sm-4 col-md-4">
<p>
<label class="sr-only">Name</label>
<input type="text" id="author" class="form-control" name="Author" placeholder="Name">
</p>
</div>
<div class="col-sm-4 col-md-4">
<p>
<label class="sr-only">Email</label>
<input type="email" id="email" class="form-control" name="Email" placeholder="Email">
</p>
</div>
<div class="col-sm-4 col-md-4">
<p>
<label class="sr-only">Title</label>
<input type="text" id="title" class="form-control" name="Title" placeholder="Title">
</p>
</div>
</div>
<p>
<textarea id="comment" class="form-control" name="Comment" rows="10" placeholder="Comment"></textarea>
</p>
<p>
<button type="button" class="btn btn-primary text-uppercase">
<i class="fa fa-paper-plane"></i>
<span>Submit</span>
</button>
</p>
</form>
</div>
<!-- /.comments__respond -->
</div>
<!-- /.comments -->SCSS
/*
* COMMENTS
* ========================================
*/
.comments {
margin-bottom: 50px;
}
.comments__title {
margin-bottom: 40px;
small {
font-size: 18px;
text-transform: capitalize;
display: block;
margin: 10px 0 0 0;
@include media(">=xs") {
display: inline-block;
margin: 0 0 0 15px;
}
}
}
.comments__container,
.comments__container .children {
list-style: none;
padding: 0;
}
.comments__container > .comment {
border-bottom: 1px solid #e3e3e3;
margin-bottom: 25px;
padding-bottom: 25px;
}
.comments__container {
margin-bottom: 0;
.children {
padding-left: 20px;
@include media(">=xs") {
padding-left: 50px;
}
> .comment {
border-top: 1px solid #e3e3e3;
margin-top: 25px;
padding-top: 25px;
}
}
}
.comment__avatar,
.comment__info {
display: table-cell;
vertical-align: top;
}
.comment__avatar {
padding-right: 15px;
@include media(">=xs") {
padding-right: 30px;
}
img {
width: 40px;
height: 40px;
border-radius: 100%;
@include media(">=xs") {
width: 60px;
height: 60px;
}
}
}
.comment__meta {
margin-bottom: 10px;
}
.comment__author,
.comment__metadata {
display: inline-block;
margin-bottom: 0;
}
.comment__author {
margin-right: 5px;
}
.comment__metadata {
display: block;
font-size: 12px;
color: lighten(black, 50%);
@include media(">=xs") {
display: inline-block;
}
}
.comment__content {
margin-left: -55px;
@include media(">=xs") {
margin-left: 0;
}
}
.comment__actions {
p {
margin-bottom: 0;
}
a {
display: inline-block;
margin-left: 15px;
font-size: 12px;
}
}
.comments__respond {
padding-top: 15px;
.btn {
padding: 6px 25px;
.fa {
margin-right: 5px;
}
}
}
FILE
src/include/components/page-title.html
src/_sass/layouts/_components/_page-title.scss
Cรกc biแบฟn cแบงn khai bรกo khi dรนng 1 file HTML ฤc include component: Page title
---
bg_page_title: page-title--bg-1
page_title_modifier: page-title--classic
page_title_tag: h1
page_title_tag_modifier: h1 <!-- ฤฦฐแปฃc truyแปn vร o khi page_title_tag muแปn dรนng class nร o khรกc -->
---
HTML
<section class="page-title {{ page.page_title_modifier }} {{ page.bg_page_title }}">
<div class="page-title__info">
<{{ page.page_title_tag }} class="{{ page.page_title_tag_modifier }} text-uppercase">{{ page.title }}</{{ page.page_title_tag }}>
<ol class="breadcrumb">
<li><a href="/">Home</a></li>
<li class="active">{{ page.title }}</li>
</ol>
</div>
</section>
<!-- /.page-title -->SCSS
/*
* PAGE TITLE
* ========================================
*/
.page-title {
position: relative;
padding: 150px 0;
background-color: #fff;
z-index: 1;
}
@for $bg from 1 through 10 {
.page-title--bg-#{$bg} {
background-image: url(../img-demo/pages-title/#{$bg}.jpg);
background-repeat: no-repeat;
background-position: center;
}
}
.page-title--classic {
&:before {
content: "";
@include overlay();
z-index: -1;
}
* {
color: white;
text-shadow: 1px 1px 1px #333;
}
}
.page-title__info {
text-align: center;
@include center();
.breadcrumb {
background: none;
margin-bottom: 0;
.active {
color: white;
}
}
}
File:
src/include/gallery-masonry.html
src/_sass/layouts/_components/_gallery.scss
src/js/plugins/jquery.magnific-popup.min.js
src/js/plugins/imagesloaded.pkgd.min.js
src/js/plugins/masonry.pkgd.min.js
src/js/plugins/isotope.pkgd.min.js
src/js/plugins/jquery.hoverdir.js
src/js/main.js
src/_data/gallery-masonry.yml
HTML
---
title: Gallery Masonry
layout: default
revoslider: none
---
<h1 class="text-center">Gallery Masonry</h1>
<section class="bx-gallery" data-init="gallery">
<div class="container">
<nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
<a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
<a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
<a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
<a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
<a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
</nav>
<div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="3" data-gap="30">
<div class="grid-sizer"></div>
{% for item in site.data.gallery-masonry %}
<div class="bx-gallery__item bx-gallery__item--clearfix {{ item.width }} {{ item.filter }}" data-grid="grid-item">
<div class="bx-gallery__media">
<div class="bx-gallery__img is-loading" data-gal="gallery">
<a href="{{ item.img }}" title="{{ item.name }}">
<img src="{{ item.img }}" alt="{{ item.name }}">
<div class="bx-gallery__hover"></div>
</a>
</div>
<div class="bx-gallery__info">
<p class="bx-gallery__title">{{ item.name }}</p>
<p class="bx-gallery__author"><small>{{ item.author }}</small></p>
</div>
</div>
</div>
<!-- /.bx-gallery__item -->
{% endfor %}
</div>
</div>
</section>SCSS - JQuery (Lแบฅy tแปซ Component: Gallery Art)
DATA
- img: https://placekitten.com/555/328
name: Lorem ipsum dolor sit amet, consectetur
author: Lorem ipsum
width: bx-gallery__item--w2
filter: branding
- img: https://placekitten.com/360/450
name: Nulla lobortis mauris justo, in pellentesque
author: Nulla lobortis
filter: decor
- img: https://placekitten.com/362/410
name: Pellentesque arcu nulla, lobortis quis
author: Pellentesque arcu
filter: fashion
- img: https://placekitten.com/364/300
name: Maecenas consequat, dui nec facilisis tempor
author: Maecenas consequat
filter: photography
- img: https://placekitten.com/365/412
name: Duis et neque rutrum augue fringilla sagittis
author: Duis et
filter: branding
- img: https://placekitten.com/555/220
name: Phasellus eget tristique diam, ut iaculis metus
author: Phasellus eget
width: bx-gallery__item--w2
filter: branding
- img: https://placekitten.com/366/520
name: Donec vel risus erat.
author: Donec vel
filter: decor
- img: https://placekitten.com/732/280
name: Quisque porta tellus vitae ante dictum
author: Quisque porta
width: bx-gallery__item--w2
filter: fashion
- img: https://placekitten.com/367/388
name: Curabitur sodales nibh non ex facilisis rhoncus
author: Curabitur sodales
filter: photography
File:
src/include/gallery-standard.html
src/_sass/layouts/_components/_gallery.scss
src/js/plugins/jquery.magnific-popup.min.js
src/js/plugins/imagesloaded.pkgd.min.js
src/js/plugins/masonry.pkgd.min.js
src/js/plugins/isotope.pkgd.min.js
src/js/plugins/jquery.hoverdir.js
src/js/main.js
src/_data/gallery.yml
HTML
---
title: Gallery Standard
layout: default
revoslider: none
---
<h1 class="text-center">Gallery Standard</h1>
<section class="bx-gallery" data-init="gallery">
<div class="container">
<nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
<a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
<a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
<a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
<a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
<a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
</nav>
<div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="4" data-gap="30">
<div class="grid-sizer"></div>
{% for item in site.data.gallery %}
<div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
<div class="bx-gallery__media">
<div class="bx-gallery__img is-loading" data-gal="gallery">
<a href="{{ item.img }}" title="{{ item.name }}">
<img src="{{ item.img }}" alt="{{ item.name }}">
<div class="bx-gallery__hover"></div>
</a>
</div>
<div class="bx-gallery__info">
<p class="bx-gallery__title">{{ item.name }}</p>
<p class="bx-gallery__author"><small>{{ item.author }}</small></p>
</div>
</div>
</div>
<!-- /.bx-gallery__item -->
{% endfor %}
</div>
</div>
</section>SCSS - JQuery - DATA (Lแบฅy tแปซ Component: Gallery Art)
File:
src/include/gallery-fullwide.html
src/_sass/layouts/_components/_gallery.scss
src/js/plugins/jquery.magnific-popup.min.js
src/js/plugins/imagesloaded.pkgd.min.js
src/js/plugins/masonry.pkgd.min.js
src/js/plugins/isotope.pkgd.min.js
src/js/plugins/jquery.hoverdir.js
src/js/main.js
src/_data/gallery-masonry.yml
HTML
---
title: Gallery Fullwide
layout: default
revoslider: none
---
<h1 class="text-center">Gallery Fullwide</h1>
<section class="bx-gallery" data-init="gallery">
<nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
<a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
<a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
<a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
<a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
<a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
</nav>
<div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="3" data-gap="0">
<div class="grid-sizer"></div>
{% for item in site.data.gallery-masonry %}
<div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
<div class="bx-gallery__media">
<div class="bx-gallery__img is-loading" data-gal="gallery">
<a href="{{ item.img }}" title="{{ item.name }}">
<img src="{{ item.img }}" alt="{{ item.name }}">
<div class="bx-gallery__hover bx-gallery__hover--text-inside">
<div class="bx-gallery__info">
<p class="bx-gallery__title">{{ item.name }}</p>
<p class="bx-gallery__author"><small>{{ item.author }}</small></p>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- /.bx-gallery__item -->
{% endfor %}
</div>
</section>SCSS - JQuery (Lแบฅy tแปซ Component: Gallery Art)
DATA (Lแบฅy tแปซ Component: Gallery Masonry)
FILE
src/include/components/about-me.html
src/_sass/layouts/_components/_about-me.scss
src/_sass/layouts/sidebar.scss
HTML
<div class="about-me">
<h3 class="about-me__title h4 text-uppercase">About me</h3>
<div class="about-me__container clearfix">
<div class="about-me__avatar">
<img src="img-demo/avatars/5.png" alt="About me">
</div>
<div class="about-me__info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div>Read more about me <a href="#" title="" class="text-uppercase">Here</a></div>
</div>
</div>
</div>
<!-- /.about-me -->SCSS
/*
* ABOUT ME
* ========================================
*/
.about-me {
margin-bottom: 25px;
}
.about-me__title {
margin-bottom: 25px;
}
.about-me__avatar {
float: left;
margin-right: 15px;
@include media(">=xs") {
margin-right: 30px;
}
img {
width: 85px;
height: 85px;
border-radius: 100%;
@include media(">=xs") {
width: 110px;
height: 110px;
}
}
}
.about-me__info a {
color: $brand-primary;
font-weight: 700;
&:hover {
text-decoration: underline;
}
}
//
// SIDEBAR LAYOUT
// ====================================================
.widget_about_me {
.about-me {
text-align: center;
}
.about-me__title {
text-transform: none;
margin-bottom: 20px;
@extend .h3;
}
.about-me__avatar {
float: none;
margin: 0 20px 25px;
img {
width: auto;
height: auto;
max-width: 100%;
}
}
}
FILE
src/include/components/tags.html
src/_sass/layouts/sidebar.scss
HTML
<div class="widget widget_tag_cloud">
<h2 class="widget-title h3">Tags</h2>
<div class="tagcloud">
<a href="#" class="tag-link" title="">audio</a>
<a href="#" class="tag-link" title="">Flower</a>
<a href="#" class="tag-link" title="">gallery</a>
<a href="#" class="tag-link" title="">left</a>
<a href="#" class="tag-link" title="">My Friend</a>
<a href="#" class="tag-link" title="">My Style</a>
<a href="#" class="tag-link" title="">nosidebar</a>
<a href="#" class="tag-link" title="">parallax</a>
<a href="#" class="tag-link" title="">post format</a>
<a href="#" class="tag-link" title="">right</a>
<a href="#" class="tag-link" title="">sidebar</a>
<a href="#" class="tag-link" title="">standard</a>
<a href="#" class="tag-link" title="">Travel</a>
<a href="#" class="tag-link" title="">video</a>
</div>
<!-- /.tagcloud -->
</div>SCSS
//
// SIDEBAR LAYOUT
// ====================================================
.widget_tag_cloud a {
display: inline-block;
font-size: 12px !important;
color: #98a5a9;
background-color: white;
border: solid 1px #e1e8ec;
padding: 7px 15px;
margin-bottom: 10px;
margin-right: 5px;
transition: all .3s ease;
height: inherit;
line-height: inherit;
&:hover, &:focus {
border-color: $brand-primary;
background-color: $brand-primary;
color: #fff;
}
}
FILE
src/include/components/calendar.html
src/_sass/layouts/sidebar.scss
HTML
<div class="widget widget_calendar">
<h2 class="widget-title h3">Calendar</h2>
<div id="calendar_wrap" class="calendar_wrap">
<table id="wp-calendar">
<caption>July 2016</caption>
<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" id="prev"><a href="#">ยซ Jan</a></td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="4" class="pad"> </td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td id="today">7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
</div>
<!-- /.calendar_wrap -->
</div>SCSS
//
// SIDEBAR LAYOUT
// ====================================================
.widget_calendar table {
margin: 0;
width: 100%;
position: relative;
#today {
color: #fff;
background: $brand-primary;
}
td, th {
padding: 0;
line-height: 3;
text-align: center;
}
caption {
color: #262e31;
padding-top: 0;
padding-bottom: 12px;
margin-bottom: 5px;
font-size: 16px;
text-align: center;
border-bottom: solid 1px #e1e8ec;
}
thead tr th {
color: #262e31;
font-weight: 400;
}
tbody {
a {
color: white;
font-weight: 700;
display: block;
background-color: #86b5ac;
&:hover, &:focus {
color: white;
background-color: #a6c8c2;
}
}
tr td {
font-size: 12px;
color: lighten(black, 60%);
}
}
tfoot {
height: 0;
display: inline-block;
overflow: hidden;
a {
top: 7px;
position: absolute;
line-height: 1;
}
}
#prev a {
left: 0;
}
#next a {
right: 0;
}
}
File:
src/include/gallery.html
src/_sass/layouts/_components/_gallery.scss
src/js/plugins/jquery.magnific-popup.min.js
src/js/plugins/imagesloaded.pkgd.min.js
src/js/plugins/masonry.pkgd.min.js
src/js/plugins/isotope.pkgd.min.js
src/js/plugins/jquery.hoverdir.js
src/js/main.js
src/_data/gallery.yml
HTML
---
title: Gallery
layout: default
revoslider: none
---
<h1 class="text-center">Gallery</h1>
<section class="bx-gallery" data-init="gallery">
<div class="container">
<nav class="bx-filters group-filter text-center text-uppercase" data-type="filter-isotope">
<a href="#" title="" data-filter="*" class="current">All <span class="count"></span></a>
<a href="#" title="" data-filter=".branding">Branding <span class="count"></span></a>
<a href="#" title="" data-filter=".decor">Decor <span class="count"></span></a>
<a href="#" title="" data-filter=".fashion">Fashion <span class="count"></span></a>
<a href="#" title="" data-filter=".photography">Photography <span class="count"></span></a>
</nav>
<div class="bx-gallery__container clearfix" data-init="isotope" data-imgloaded="imagesLoaded" data-cols="4" data-gap="30">
<div class="grid-sizer"></div>
{% for item in site.data.gallery %}
<div class="bx-gallery__item bx-gallery__item--clearfix {{ item.filter }}" data-grid="grid-item">
<div class="bx-gallery__media">
<div class="bx-gallery__img is-loading" data-gal="gallery">
<a href="{{ item.img }}" title="{{ item.name }}">
<img src="{{ item.img }}" alt="{{ item.name }}">
<div class="bx-gallery__hover bx-gallery__hover--text-inside">
<div class="bx-gallery__info">
<p class="bx-gallery__title">{{ item.name }}</p>
<p class="bx-gallery__author"><small>{{ item.author }}</small></p>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- /.bx-gallery__item -->
{% endfor %}
</div>
</div>
</section>SCSS
/*
* GALLERY
* ========================================
*/
.bx-gallery {
padding: 50px 0;
}
.bx-filters {
margin-bottom: 60px;
font-weight: 700;
@extend .h4;
a {
display: inline-block;
padding: 10px 30px;
}
.count {
display: inline-block;
vertical-align: middle;
color: #999;
@extend .h6;
}
.current {
color: $brand-primary;
}
}
@each $data-gap in 5, 10, 15, 30 {
[data-gap="#{$data-gap}"] {
margin: calc(-#{$data-gap}px / 2);
.bx-gallery__item {
padding: calc(#{$data-gap}px / 2);
}
}
}
[data-cols="3"] .bx-gallery__item--clearfix {
@include media(">=md") {
&:nth-of-type(4n+1) {
clear: left;
}
&:nth-of-type(4n+4) {
clear: right;
}
}
}
[data-cols="4"] .bx-gallery__item--clearfix {
@include media(">=md") {
&:nth-of-type(3n+1) {
clear: left;
}
&:nth-of-type(3n+3) {
clear: right;
}
}
}
.bx-gallery__item.bx-gallery__item--w2 {
width: 100%;
@include media(">=xs") {
width: 50%;
}
@include media(">=sm") {
width: 66.6667%;
}
@include media(">=md") {
width: 50%;
}
}
.bx-gallery__media {
background: #fff;
}
.bx-gallery__img {
overflow: hidden;
position: relative;
a {
display: block;
}
img {
width: 100%;
}
}
.bx-gallery__hover {
display: none;
position: absolute;
background: rgba(0,0,0,.5);
width: 100%;
height: 100%;
&:after {
color: #fff;
font-size: 24px;
z-index: 6;
@include fa("\f002");
@include center();
}
}
.is-loading,
.is-broken {
min-height: 150px;
img {
opacity: 0;
}
a:before,
a:after {
visibility: hidden !important;
}
}
.is-loading {
background: black url('../img/loading.gif') no-repeat center;
}
.is-broken {
background: #be3730 url('../img/broken.png') no-repeat center;
}
.bx-gallery__info {
padding: 15px;
}
.bx-gallery__title {
line-height: 1.3;
transition: all .3s ease;
@extend .h5;
}
.bx-gallery__author:before {
content: '\2014 \00A0';
}
.bx-gallery__hover--text-inside {
text-align: center;
&:after {
display: none;
}
.bx-gallery__info {
color: #bcbcbc;
transform: translateY(-50%);
@include absolute(50% !important,0);
}
.bx-gallery__title {
color: #fff;
line-height: 1.5;
@extend .h4;
&:hover {
color: $brand-primary;
}
}
.bx-gallery__author:after {
content: '\2014 \00A0';
margin-left: 3px;
}
}
@for $cols from 1 through 12 {
[data-cols="#{$cols}"] > * {
float: left;
width: 100%;
@include media(">=xs", "<sm") {
width: percentage(6 / 12);
}
@include media(">=sm", "<md") {
width: percentage(4 / 12);
}
@include media(">=md") {
width: percentage($cols / 12);
}
&[class*="--clearfix"] {
@include media(">=xs", "<sm") {
&:nth-of-type(2n+1) {
clear: left;
}
&:nth-of-type(2n+2) {
clear: right;
}
}
@include media(">=sm", "<md") {
&:nth-of-type(3n+1) {
clear: left;
}
&:nth-of-type(3n+3) {
clear: right;
}
}
}
}
}
JQuery
// GALLERY MAGNIFIC POPUP
function galleryMagnificPopup() {
$('[data-init="gallery"]').each(function() {
$(this).magnificPopup({
delegate: '[data-gal="gallery"] a',
type: 'image',
gallery:{
enabled:true
}
});
});
};
// Isotope
function isotopeInit(){
$('[data-init="isotope"]').each(function(){
var $el = $(this);
var $container = $el.imagesLoaded(function() {
$container.isotope({
itemSelector: '[data-grid="grid-item"]',
percentPosition: true,
getSortData: {
name: '.name',
price: '.price'
},
masonry: {
columnWidth: '.grid-sizer'
}
});
});
});
// Count number item
$('[data-type="filter-isotope"] a').each(function() {
var $el = $(this),
_textFilter = $el.data('filter').replace('.',''),
_length = 0;
if(_textFilter == "*") {
_length = $('[data-init="isotope"]').children().length;
$el.find('.count').text('(' + (_length - 1) + ')');
} else {
_length = $('[data-init="isotope"]').find('.' + _textFilter).children().length;
$el.find('.count').text('(' + _length + ')');
}
});
// Click filter item
$('[data-type="filter-isotope"] a').on('click', function(e){
e.preventDefault();
var filterValue = $(this).attr('data-filter');
var sortValue = $(this).attr('data-sort');
var textValue = $(this).text();
$(this).parent().find('.current').removeClass('current');
$(this).addClass('current');
$(this).parents('.dropdown').find('.btn-name').text(textValue);
if($(this).parent().hasClass('group-filter')){
$('[data-init="isotope"]').isotope({
filter: filterValue
});
} else if($(this).parent().hasClass('group-sort')){
$('[data-init="isotope"]').isotope({
sortBy: sortValue
});
}
});
};
// Masonry
function masonryInit(){
var $grid = $('[data-init="masonry"]').imagesLoaded( function() {
// init Masonry after all images have loaded
$grid.masonry({
itemSelector: '[data-grid="grid-item"]',
columnWidth: '.grid-sizer',
percentPosition: true
});
});
};
// ImagesLoaded
function imagesLoadedInit() {
var imgLoad = imagesLoaded($('[data-imgloaded="imagesLoaded"]'));
imgLoad.on('progress', onProgress);
};
// triggered after each item is loaded
function onProgress( imgLoad, image ) {
// change class if the image is loaded or broken
var $item = $( image.img ).parents('[class*="__img"]');
$item.removeClass('is-loading');
if ( !image.isLoaded ) {
$item.addClass('is-broken');
}
};DATA
- img: https://placekitten.com/360/450
name: Lorem ipsum dolor sit amet, consectetur
author: Lorem ipsum
filter: branding
- img: https://placekitten.com/361/451
name: Nulla lobortis mauris justo, in pellentesque
author: Nulla lobortis
filter: decor
- img: https://placekitten.com/362/452
name: Pellentesque arcu nulla, lobortis quis
author: Pellentesque arcu
filter: fashion
- img: https://placekitten.com/363/453
name: Phasellus eget tristique diam, ut iaculis metus
author: Phasellus eget
filter: photography
- img: https://placekitten.com/364/454
name: Maecenas consequat, dui nec facilisis tempor
author: Maecenas consequat
filter: branding
- img: https://placekitten.com/365/455
name: Duis et neque rutrum augue fringilla sagittis
author: Duis et
filter: branding
- img: https://placekitten.com/366/456
name: Donec vel risus erat.
author: Donec vel
filter: decor
- img: https://placekitten.com/367/457
name: Curabitur sodales nibh non ex facilisis rhoncus
author: Curabitur sodales
filter: fashion
- img: https://placekitten.com/368/458
name: Quisque porta tellus vitae ante dictum
author: Quisque porta
filter: photography
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.