Pirate Grid

In this example below you will see how to do a Pirate Grid with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by blackratio, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright blackratio ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pirate Grid</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="wrapper">
		<div id="section2" class="section">
			<h2>DEMO</h2>
			<h3>Avec marge</h3>
			<div class="wrapp_grid first">
				<div class="inner">
					<div class="bloc grid7">
						<div class="inner">
							7
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid6">
						<div class="inner">
							6
						</div>
					</div>
				</div>
			</div>
			<h3>Sans marge</h3>
			<div class="wrapp_grid noMarge first">
				<div class="inner">
					<div class="bloc grid7">
						<div class="inner">
							7
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
					<div class="bloc grid2">
						<div class="inner">
							2
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
					<div class="bloc grid3">
						<div class="inner">
							3
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
					<div class="bloc grid5">
						<div class="inner">
							5
						</div>
					</div>
				</div>
			</div>
			<div class="wrapp_grid noMarge">
				<div class="inner">
					<div class="bloc grid4">
						<div class="inner">
							4
						</div>
					</div>
					<div class="bloc grid6">
						<div class="inner">
							6
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/blackratio/pirate-grid-Abcwe */
/****************************************************************************
*****************************************************************************
		SIMPLE FLUID GRID SYSTEM
		Auteur : David Wieczorek
		Année: 2013
		Version: 2_3
		Mail: Blackratio@gmail.com
*****************************************************************************
****************************************************************************/


/**** STRUCTURE ****/

/* Général */
.wrapp_grid > .inner {
	overflow:hidden;
	padding:0 1%;
}
.bloc {
	float:left;
	display:inline;
	margin-left:2%;
}
.wrapp_grid { margin-bottom: 10px }
.wrapp_grid .bloc .inner { padding:10px }
.wrapp_grid .wrapp_grid { margin-top:-10px; }
.wrapp_grid .wrapp_grid:first-child { margin-top:0; }

/* Suppression des marges */
.noMarge > .inner { padding:0 !important; }

/* Supprime les marges gauche des premiers éléments de type bloc */
.grid1:first-child,
.grid2:first-child,
.grid3:first-child,
.grid4:first-child,
.grid5:first-child,
.grid6:first-child,
.grid7:first-child,
.grid8:first-child,
.grid9:first-child,
.grid10:first-child,
.grid11:first-child,
.grid12:first-child {
	margin-left:0
}


/**** GRIDS ****/
.grid1 { width:15%; }
.grid2 { width:18.4% }
.grid3 { width:23.5% }
.grid4 { width:32% }
.grid5 { width:49% }
.grid6 { width:66% }
.grid7 {
	width:100%;
	clear:both;
}


/***** PERSONNALISATION *****/
.section {
	overflow:hidden;
	padding: 30px 50px;
}
#section0 {
	
}
#section1 {
	background-color: #f9f9f9;
}
#section2 {
	background-color: #f5f5f5;
}
h1, h2, h3 {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: lighter;
}
h1 {
	text-align: center;
	margin: 15px 0 30px 0;
	font-size: 30px;
	text-transform: uppercase;
	color: #bbb;
}

h1 span { color:red; }
h2 {
	text-transform: uppercase;
	font-size:25px;
	padding: 15px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd; 
	color:#333;
	margin: 30px 0 15px 0;
}

h3 {
	font-size:20px;
	color:#555;
	margin:15px 0;
}

.paragraph .bloc { 
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background:none;
}
.paragraph .bloc .inner { padding:0 !important; }
.noMarge .bloc { 
	color: #fff;
	background:#333 !important; }

.bloc {
	border-radius: 10px;
	height: 60px;
	line-height: 40px;
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
	background:#ddd;
}
.wrapp_grid .wrapp_grid .bloc {
	-webkit-transition: background .6s ease-in;
	-moz-transition: background .6s ease-in;
	-o-transition: background .6s ease-in;
	transition: background .6s ease-in;
	background:#97fccb;
}
.normal {  }
.mqueries { display:none; }




/***** MEDIAS QUERIES / RESPONSIVE GRID *****/
@media screen and (max-width: 1024px) /*iPad Landscpae*/ {

}

@media screen and (max-width: 770px) /*iPad Portrait */ {
/* Perso */
.section {
	width: 98%;
	padding: 0 1%;
 }
.bloc {
	color:#333;
	background:#ccc;
}
.secteur > .wrapp_grid:first-child { margin-bottom: 0 }
.wrapp_grid .wrapp_grid .bloc { color:#aaa }
.wrapp_grid.first { margin-bottom: 0 }
.noMarge .bloc {  }

/* Mise en page */
.bloc {
	overflow:hidden;
	height: 150px;
	line-height: 130px;
	text-align: center;
	width:100% !important;
	margin-left:0;
	margin-bottom:10px;
}
.normal { display:none; }
.mqueries { display:block; }
.grid1:last-child,
.grid2:last-child,
.grid2_3:last-child,
.grid3:last-child,
.grid33:last-child,
.grid1_3:last-child,
.grid4:last-child,
.grid5:last-child,
.grid6:last-child { margin-bottom:0 }
}

@media screen and (max-width: 480px) /*iPhone Landscape */ {

}

@media screen and (max-width: 320px) /*iPhone Portrait */ {

}

/*Downloaded from https://www.codeseek.co/blackratio/pirate-grid-Abcwe */
$(document).ready(function(){
  $('.heightauto').each(function(){  
    var highestBox = 0;
    $('.bloc', this).each(function(){
      if($(this).height() > highestBox) 
        highestBox = $(this).height(); 
    });  
    $('.bloc',this).height(highestBox);
  });      
});

Comments