hyyan/css3-masonry-grid.markdown

## css3-masonry-grid.markdown

      
    Raw
  

              css3-masonry-grid.markdown
            
          
    CSS3 Masonry Grid

Simple CSS3 Masonry Grid , which can be used to create image gallery or to display posts grid wih no Javascript
A Pen by Hyyan Abo Fakher on CodePen.
License.

  
## index.html

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS3 Masonry Grid</title>

 </head>
 <body>
  <section id="masonry" class="masonry">
    <!-- template
    <figure>
      <img src="..." />
      <figcaption>
        <div class="title"></div>
        <div class="category"></div>
      </figcaption>
    </figure>
    -->
  </section>
 </body>
</html>

## script.js
 (function() {

   var mas = document.querySelector('#masonry');
   for (var x = 0; x < 30; x++) {

     var w = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
     var h = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
     var price = Math.floor(Math.random() * (1500) + 1);
     var src = 'http://lorempixel.com/' + w + '/' + h + '/food/';

     var category = 'CSS3 ';
     var title = 'CSS3 Masonry Grid';

     var content = '<figure>' +
       '<img src="' + src + '" />' +
       '<figcaption>' +
       '<div class="price">' + price + '€</div>' +
       '<div class="info">' +
       '<div class="category">' + category + '</div>' +
       '<div class="title">' + title + '</div>' +
       '</div>' +
       '</figcaption>' +
       '</figure>';
     mas.innerHTML = mas.innerHTML + content;

   }
 })();

## style.scss
/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($declarations, $prefixes: ()) {
  @each $property, $value in $declarations {
    @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
    }

    // Output standard non-prefixed declaration
    #{$property}: $value;
  }
}

$masonry-border-color: #673AB7;
$masonry-border-color-hover: #E91E63;
$masonry-caption-bg: #000;
$masonry-caption-category-color: #90A4AE;
$masonry-caption-title-color: #fff;
$masonry-caption-price-color: #fff;

@keyframes "fadeIn" {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes "fadeIn" {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes "fadeIn" {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

body{
  margin: 0;
  padding: 0;
  background : #2e3141
}
.masonry {

	position: relative;
  width: 100%;
	min-height: 1200px;
	overflow: hidden;

  @include prefix((
    column-count: 4,
    column-gap: 0,
    box-sizing: border-box,
    animation: fadeIn 500ms linear
  ), webkit moz ms o);

	& , & * {
		// fix css3 flickering
		@include prefix((
				transform: translate3d(0,0,0),
				backface-visibility: hidden
		), webkit moz ms o);
	}

	figure {

		position: relative;
		display: block;
		padding: 0;
		margin: 0;
		width: 100%;
		overflow: hidden;
		cursor: auto;

    @include prefix((
      box-sizing: border-box
    ), webkit moz ms o);

		&::before {
			content: '';
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 25px;
			z-index: 1000;
			border-bottom: 8px solid $masonry-border-color;

      @include prefix((
        	transition: 1s ease,
					transform: translate3d(0,0,0),
					backface-visibility: hidden
      ), webkit moz ms o);
		}
		&:hover {

			&::before {
				border-color: $masonry-border-color-hover;
			}

			img {
				opacity: 1;
        @include prefix((
            transform: scale(1.2)
        ), webkit moz ms o);
			}

			figcaption {
				bottom: 0;
			}

		}

		img {

			display: block;
			width: 100%;
			height: 200%;
			opacity: .9;

      @include prefix((
          transform: scale(1),
          transition: transform 500ms
      ), webkit moz ms o);

		}
		figcaption {

			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100%;
			padding: 2%;
			opacity: .7;

      @include prefix((
          box-sizing: border-box,
          transition: "bottom 500ms,border-bottom-color 500ms"
      ), webkit moz ms o);

			background: $masonry-caption-bg;
			background: -webkit-linear-gradient(transparent, $masonry-caption-bg);
			background: -o-linear-gradient(transparent, $masonry-caption-bg);
			background: -moz-linear-gradient(transparent, $masonry-caption-bg);
			background: linear-gradient(transparent, $masonry-caption-bg);

      .price , .info {
        position: absolute;
        bottom: 4%;
      }

			.price {
				right: 2%;
				font-size: 2.5vw;
        color: $masonry-caption-price-color;
			}

			.info {

				left: 2%;

				.title {

          a {
            text-decoration: none !important;
          }
					font-weight: bolder;
					font-size: 1.5vw;
          color: $masonry-caption-title-color;
				}

				.category {
					color: $masonry-caption-category-color;
				}

			}
		}
	}
}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
	.masonry{
		@include prefix((
			column-count: 1
		), webkit moz ms o);
	}
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
	.masonry{
		@include prefix((
			column-count: 1
		), webkit moz ms o);
	}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  .masonry{
		@include prefix((
	    column-count: 2
	  ), webkit moz ms o);
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.masonry{
		@include prefix((
	    column-count: 3
	  ), webkit moz ms o);
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.masonry{
		@include prefix((
	    column-count: 4
	  ), webkit moz ms o);
  }
}

	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS3 Masonry Grid</title>

	</head>
	<body>
	<section id="masonry" class="masonry">
	<!-- template
	<figure>
	<img src="..." />
	<figcaption>
	<div class="title"></div>
	<div class="category"></div>
	</figcaption>
	</figure>
	-->
	</section>
	</body>
	</html>
	(function() {

	var mas = document.querySelector('#masonry');
	for (var x = 0; x < 30; x++) {

	var w = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
	var h = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
	var price = Math.floor(Math.random() * (1500) + 1);
	var src = 'http://lorempixel.com/' + w + '/' + h + '/food/';

	var category = 'CSS3 ';
	var title = 'CSS3 Masonry Grid';

	var content = '<figure>' +
	'<img src="' + src + '" />' +
	'<figcaption>' +
	'<div class="price">' + price + '€</div>' +
	'<div class="info">' +
	'<div class="category">' + category + '</div>' +
	'<div class="title">' + title + '</div>' +
	'</div>' +
	'</figcaption>' +
	'</figure>';
	mas.innerHTML = mas.innerHTML + content;

	}
	})();
	/// Mixin to prefix several properties at once
	/// @author Hugo Giraudel
	/// @param {Map} $declarations - Declarations to prefix
	/// @param {List} $prefixes (()) - List of prefixes to print
	@mixin prefix($declarations, $prefixes: ()) {
	@each $property, $value in $declarations {
	@each $prefix in $prefixes {
	#{'-' + $prefix + '-' + $property}: $value;
	}

	// Output standard non-prefixed declaration
	#{$property}: $value;
	}
	}

	$masonry-border-color: #673AB7;
	$masonry-border-color-hover: #E91E63;
	$masonry-caption-bg: #000;
	$masonry-caption-category-color: #90A4AE;
	$masonry-caption-title-color: #fff;
	$masonry-caption-price-color: #fff;

	@keyframes "fadeIn" {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@-webkit-keyframes "fadeIn" {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}
	@-moz-keyframes "fadeIn" {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	body{
	margin: 0;
	padding: 0;
	background : #2e3141
	}
	.masonry {

	position: relative;
	width: 100%;
	min-height: 1200px;
	overflow: hidden;

	@include prefix((
	column-count: 4,
	column-gap: 0,
	box-sizing: border-box,
	animation: fadeIn 500ms linear
	), webkit moz ms o);

	& , & * {
	// fix css3 flickering
	@include prefix((
	transform: translate3d(0,0,0),
	backface-visibility: hidden
	), webkit moz ms o);
	}

	figure {

	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	width: 100%;
	overflow: hidden;
	cursor: auto;

	@include prefix((
	box-sizing: border-box
	), webkit moz ms o);

	&::before {
	content: '';
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 25px;
	z-index: 1000;
	border-bottom: 8px solid $masonry-border-color;

	@include prefix((
	transition: 1s ease,
	transform: translate3d(0,0,0),
	backface-visibility: hidden
	), webkit moz ms o);
	}
	&:hover {

	&::before {
	border-color: $masonry-border-color-hover;
	}

	img {
	opacity: 1;
	@include prefix((
	transform: scale(1.2)
	), webkit moz ms o);
	}

	figcaption {
	bottom: 0;
	}

	}

	img {

	display: block;
	width: 100%;
	height: 200%;
	opacity: .9;

	@include prefix((
	transform: scale(1),
	transition: transform 500ms
	), webkit moz ms o);

	}
	figcaption {

	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	padding: 2%;
	opacity: .7;

	@include prefix((
	box-sizing: border-box,
	transition: "bottom 500ms,border-bottom-color 500ms"
	), webkit moz ms o);

	background: $masonry-caption-bg;
	background: -webkit-linear-gradient(transparent, $masonry-caption-bg);
	background: -o-linear-gradient(transparent, $masonry-caption-bg);
	background: -moz-linear-gradient(transparent, $masonry-caption-bg);
	background: linear-gradient(transparent, $masonry-caption-bg);

	.price , .info {
	position: absolute;
	bottom: 4%;
	}

	.price {
	right: 2%;
	font-size: 2.5vw;
	color: $masonry-caption-price-color;
	}

	.info {

	left: 2%;

	.title {

	a {
	text-decoration: none !important;
	}
	font-weight: bolder;
	font-size: 1.5vw;
	color: $masonry-caption-title-color;
	}

	.category {
	color: $masonry-caption-category-color;
	}

	}
	}
	}
	}


	/========== Mobile First Method ==========/

	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px) {
	.masonry{
	@include prefix((
	column-count: 1
	), webkit moz ms o);
	}
	}

	/* Extra Small Devices, Phones */
	@media only screen and (min-width : 480px) {
	.masonry{
	@include prefix((
	column-count: 1
	), webkit moz ms o);
	}
	}

	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px) {
	.masonry{
	@include prefix((
	column-count: 2
	), webkit moz ms o);
	}
	}

	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px) {
	.masonry{
	@include prefix((
	column-count: 3
	), webkit moz ms o);
	}
	}

	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px) {
	.masonry{
	@include prefix((
	column-count: 4
	), webkit moz ms o);
	}
	}