Loading

Flex-grid Mixin

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Flex-grid Mixin</title>
  <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .grid-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-1 > * {
  width: 31%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-1 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-1 > * {
    width: 98%;
  }
}
.grid-1 li {
  background: #B6B2C8;
  color: #000000;
}
.grid-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-2 > * {
  width: 14%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-2 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-2 > * {
    width: 98%;
  }
}
.grid-2 li {
  background: #BCBDBC;
  color: #000000;
}
.grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-3 > * {
  width: 23%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-3 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-3 > * {
    width: 98%;
  }
}
.grid-3 li {
  background: #8A827B;
  color: #000000;
}
ol {
  background: #eee;
}
ol li {
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  padding: 0.4em 0.8em;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
ol li p {
  margin: 0.4em 0;
}
html {
  padding: 0;
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  background: silver;
  font-family: sans-serif;
  margin-left: calc(0vw);
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: inherit;
  line-height: 1.33;
}
.container {
  width: 90%;
  max-width: 1800px;
  min-width: 320px;
  margin: 2em auto;
}
.container h1 {
  font-weight: 700;
  margin: 0 0 0.8em 0;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.inner {
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
body:before {
  background: red;
  color: white;
  content: "undefined";
  opacity: 0.8;
  padding: 0.5em 1em;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 0;
  z-index: 99;
}
@media only screen and (max-width: 529px) {
  body:before {
    background: orange;
    content: "mobile";
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  body:before {
    background: purple;
    content: "tablet";
  }
}
@media only screen and (min-width: 950px) and (max-width: 1128px) {
  body:before {
    background: green;
    content: "desktop";
  }
}
@media only screen and (min-width: 1129px) {
  body:before {
    background: blue;
    content: "desktop-xl";
  }
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="container">
  
  <h1>A Flex-grid Mixin</h1>
  
  <section class="inner">
  
    <ol class="grid-1">
      <!-- We could use ounters to number these, but it's just not needed here -->
      <li><p>First pod</p></li>
      <li><p>Second pod</p></li>
      <li><p>Third pod that has a bit more text so that we can get the height sizing right. Stretch should be the default, so no bother there then.</p></li>
      <li><p>Fourth pod</p></li>
      <li><p>Fifth pod</p></li>
      <li><p>Sixth pod</p></li>
    </ol>

    <ol class="grid-2">
      <li><p>First pod</p></li>
      <li><p>Second pod</p></li>
      <li><p>Third pod that has a bit more text so that we can get the height sizing right. Stretch should be the default, so no bother there then.</p></li>
      <li><p>Fourth pod</p></li>
      <li><p>Fifth pod</p></li>
      <li><p>Sixth pod</p></li>
    </ol>

    <ol class="grid-3">
      <li><p>First pod</p></li>
      <li><p>Second pod</p></li>
      <li><p>Third pod that has a bit more text so that we can get the height sizing right. Stretch should be the default, so no bother there then.</p></li>
      <li><p>Fourth pod</p></li>
      <li><p>Fifth pod</p></li>
      <li><p>Sixth pod</p></li>
    </ol>
    
  </section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.grid-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-1 > * {
  width: 31%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-1 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-1 > * {
    width: 98%;
  }
}
.grid-1 li {
  background: #B6B2C8;
  color: #000000;
}
.grid-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-2 > * {
  width: 14%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-2 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-2 > * {
    width: 98%;
  }
}
.grid-2 li {
  background: #BCBDBC;
  color: #000000;
}
.grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.4em;
  list-style: none;
}
.grid-3 > * {
  width: 23%;
  min-width: 50;
  flex: 1 1 auto;
  min-height: 60px;
  margin: 0.4em;
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  .grid-3 > * {
    width: 48%;
  }
}
@media only screen and (max-width: 529px) {
  .grid-3 > * {
    width: 98%;
  }
}
.grid-3 li {
  background: #8A827B;
  color: #000000;
}
ol {
  background: #eee;
}
ol li {
  background: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  padding: 0.4em 0.8em;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
ol li p {
  margin: 0.4em 0;
}
html {
  padding: 0;
  margin: 0;
  height: 100%;
  box-sizing: border-box;
  background: silver;
  font-family: sans-serif;
  margin-left: calc(0vw);
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: inherit;
  line-height: 1.33;
}
.container {
  width: 90%;
  max-width: 1800px;
  min-width: 320px;
  margin: 2em auto;
}
.container h1 {
  font-weight: 700;
  margin: 0 0 0.8em 0;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.inner {
  background: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
body:before {
  background: red;
  color: white;
  content: "undefined";
  opacity: 0.8;
  padding: 0.5em 1em;
  position: fixed;
  text-align: center;
  bottom: 0;
  right: 0;
  z-index: 99;
}
@media only screen and (max-width: 529px) {
  body:before {
    background: orange;
    content: "mobile";
  }
}
@media only screen and (min-width: 530px) and (max-width: 949px) {
  body:before {
    background: purple;
    content: "tablet";
  }
}
@media only screen and (min-width: 950px) and (max-width: 1128px) {
  body:before {
    background: green;
    content: "desktop";
  }
}
@media only screen and (min-width: 1129px) {
  body:before {
    background: blue;
    content: "desktop-xl";
  }
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Chris Mounsey, you can se more from this user in the personal repository