A Pen by Ted Whitehead

Thumbnail
This awesome code was written by tedw, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tedw ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Ted Whitehead</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  
  <h2>Responsive Grid Demo</h2>

  <ul class="grid-list">
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 1</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 2</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 3</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 4</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 5</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 6</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 7</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 8</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 9</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 10</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 11</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 12</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 13</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 14</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 15</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 16</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 17</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 18</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 19</div></div></li>
    <li class="grid-item"><div class="grid-item-inner"><div class="content">Item 20</div></div></li>
  </ul>
  
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/tedw/a-pen-by-ted-whitehead-lwvCo */
/* Base Styles */
body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
  margin: 40px 20px;
}

h2 {
  border-bottom: 4px solid CadetBlue;
}

.wrapper {
  margin: 0 auto;
  max-width: 700px;
}

.lt-ie7 .wrapper {
  width: 700px;
}


/* Debug styles */
.debug .grid-item { box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.4) }
.debug .grid-list { box-shadow: inset 0 0 0 2px rgba(0, 0, 255, 0.3) }
.debug .grid-item-inner { box-shadow: inset 0 0 0 1px rgba(0, 255, 0, 0.5) }


/* Grid Styles */

/* Set box-sizing to border-box */
.grid-item,
.grid-item-inner,
.content {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Grid wrapper */
.grid-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  overflow: hidden;/*for clearfix*/
}

/* Grid item wrapper */
.grid-item {
  float: left;
  padding: 0 0 20px;
  width: 100%; /* Base style for single column layout */
  transition: all 300ms ease-out; /* Just for fun */
}

/* Grid item inner wrapper */
.grid-item-inner {
  background-color: #fff;
  border: 1px solid #888;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  color: #000;
  font-size: 13px;
  padding: 10px;
}

/* Inner-most wrapper, required for maintaining aspect ratio */
.content {
  padding: 10px;
  text-align: center;
}


/* Maintain Aspect Ratio */
/* http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
.grid-item-inner  {
    position: relative;
}

.grid-item-inner:before {
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.content {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}


/* Columns */

/* 2-Col Layout */
@media all and (min-width: 320px) {
  .grid-list {
    margin-left: -5%;
    width: 105%;
  }

  .grid-item {
    padding-bottom: 5%;
    padding-left: 5%;
    width: 50%;
  }
}

/* 3-Col Layout */
@media all and (min-width: 470px) {
  .grid-list {
    margin-left: -4%;
    width: 104%;
  }

  .grid-item {
    padding-bottom: 4%;
    padding-left: 4%;
    width: 33.3333333334%;
  }
}

/* 4-Col Layout */
@media all and (min-width: 600px) {
  .grid-list {
    margin-left: -3%;
    width: 103%;
  }

  .grid-item {
    padding-bottom: 3%;
    padding-left: 3%;
    width: 25%;
  }
}

/* 5-Col Layout */
@media all and (min-width: 720px) {
  .grid-list {
    margin-left: -2.5%;
    width: 102.5%;
  }

  .grid-item {
    padding-bottom: 2.5%;
    padding-left: 2.5%;
    width: 20%;
  }
}


/* Force IE8 to always show 5-columns */
.lt-ie9 .grid-list {
  margin-left: -2.5%;
  width: 102.5%;
}

.lt-ie9 .grid-item {
  padding-bottom: 2.5%;
  padding-left: 2.5%;
  width: 20%;
}


/* IE7 and below require fixed px values */
.lt-ie8 .grid-list {
  margin-left: -20px;
  width: 720px;
}

.lt-ie8 .grid-item {
  padding-bottom: 20px;
  padding-left: 20px;
  width: 124px;
}

.lt-ie8 .content {
  height: 82px;
  position: static;
}

/*Downloaded from https://www.codeseek.co/tedw/a-pen-by-ted-whitehead-lwvCo */
// querySelectorAll polyfill for IE7
if (!document.querySelectorAll) {
	var d=document, s=d.createStyleSheet();
	d.querySelectorAll = function(r, c, i, j, a) {
		a=d.all, c=[], r = r.replace(/\[for\b/gi, '[htmlFor').split(',');
		for (i=r.length; i--;) {
			s.addRule(r[i], 'k:v');
			for (j=a.length; j--;) a[j].currentStyle.k && c.push(a[j]);
			s.removeRule(0);
		}
		return c;
	};
}


// Color pallet
var pallet = ['#FFE8E8', '#FFEACF','#FDFBE2','#DAF3DA','#DFF0FF'];

// Return a random color form pallet
var randomColor = function() {
  return pallet[Math.floor(Math.random()*pallet.length)];
};

// Apply color from pallet to each item
var items = document.querySelectorAll('.grid-item-inner');

for ( var i=0, len=items.length; i<len; i++ ) {
    items[i].style.backgroundColor = pallet[i%5];//randomColor();
}

Comments