Weking Demo - Grid

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

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

<head>
  <meta charset="UTF-8">
  <title>Weking Demo - Grid</title>
  
  
  <link rel='stylesheet prefetch' href='https://rawgit.com/weking/weking-frontend/master/dist/css/weking.min.css'>
<link rel='stylesheet prefetch' href='https://rawgit.com/weking/weking-frontend/master/dist/css/weking-theme.min.css'>

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

  
</head>

<body>

  <div id="grids" class="main">
  <h2 class="typo_h2">Grids</h2>

  <h3 class="typo_h3">Simple grids</h3>
  <div class="showGrid">

    <div class="row">
      <div class="col col_sm12">
        <div class="inner">12</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm11">
        <div class="inner">11</div>
      </div>
      <div class="col col_sm1">
        <div class="inner">1</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm10">
        <div class="inner">10</div>
      </div>
      <div class="col col_sm2">
        <div class="inner">2</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm9">
        <div class="inner">9</div>
      </div>
      <div class="col col_sm3">
        <div class="inner">3</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm8">
        <div class="inner">8</div>
      </div>
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm7">
        <div class="inner">7</div>
      </div>
      <div class="col col_sm5">
        <div class="inner">5</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm6">
        <div class="inner">6</div>
      </div>
      <div class="col col_sm6">
        <div class="inner">6</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
    </div>

    <div class="row">
      <div class="col col_sm3">
        <div class="inner">3</div>
      </div>
      <div class="col col_sm3">
        <div class="inner">3</div>
      </div>
      <div class="col col_sm3">
        <div class="inner">3</div>
      </div>
      <div class="col col_sm3">
        <div class="inner">3</div>
      </div>
    </div>

  </div>

  <h3 class="typo_h3">Nested Grids</h3>
  <div class="showGrid">
    <div class="row">
      <div class="col col_sm12">
        <div class="inner">12</div>

        <div class="col col_sm6">
        	<div class="inner">6</div>
        </div>
        <div class="col col_sm6">
        	<div class="inner">6</div>
        </div>
      </div>
    </div>
  </div>

  <h3 class="typo_h3">Responsive Grids</h3>
  <div class="showGrid">
    <div class="row">
      <div class="col col_xs6_sm3">
        <div class="inner">Mobile 6, Tablet 3</div>
      </div>
      <div class="col col_xs6_sm3">
        <div class="inner">Mobile 6, Tablet 3</div>
      </div>
      <div class="col col_xs6_sm3">
        <div class="inner">Mobile 6, Tablet 3</div>
      </div>
      <div class="col col_xs6_sm3">
        <div class="inner">Mobile 6, Tablet 3</div>
      </div>
    </div>
  </div>

  <h3 class="typo_h3">Offset</h3>
  <div class="showGrid">
    <div class="row">
      <div class="col col_xs8-xsOffsetL4">
        <div class="inner">Column 8 with left offset 4</div>
      </div>
    </div>
    <div class="row">
      <div class="col col_xs4-xsOffsetR8 alignright">
        <div class="inner">Column 4 with right offset 8</div>
      </div>
    </div>
  </div>
  
  <h3 class="typo_h3">Grids with gutters</h3>
  <div class="showGrid">
    <div class="row row-gutters">
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
      <div class="col col_sm4">
        <div class="inner">4</div>
      </div>
    </div>
  </div>
</div>

<div class="fab">
  <span class="tooltip tooltip-left" data-tooltip="Show grid">
    <a class="fab_btn btn btn-default-radius">
      <i class="icon icon_grid-on"></i>
    </a>
  </span>
</div>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/hustlahusky/weking-demo-grid-vEbZXj */
.main {
  padding: 24px 0;
}
.paint {
  background: #E0E0E0;
  outline: 1px solid #BDBDBD;
}
.paint:hover {
  background-color: #EEEEEE;
}
/* GRIDS */
.showGrid [class*="col"] .inner {
  text-align: center;
  min-height: 48px;
  line-height: 48px;
  background: #E0E0E0;
  outline: 1px solid #BDBDBD;
}
.showGrid [class*="col"] .inner:hover {
  background-color: #EEEEEE;
}
.showGrid [class*="col"] [class*="col"] .inner {
  background-color: #BDBDBD;
  outline-color: #9E9E9E;
}
.showGrid [class*="col"] [class*="col"] [class*="col"] .inner {
  background-color: #9E9E9E;
  outline-color: #757575;
}
.fab {
  padding-right: 16px;
  padding-bottom: 60px;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10000;
}
@media (min-width: 768px) {
  .fab {
    padding-right: 24px;
  }
}
.fab_btn {
  width: 56px;
  height: 56px;
  padding: 14px;
}
.fab .icon {
  position: relative;
  width: 24px;
  height: 24px;
}
.fab .icon:before {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 24px;
}
body[class*=-showGrid]:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-image: -moz-linear-gradient(bottom, rgba(240, 162, 196, 0.5) 5%, rgba(240, 162, 196, 0) 5%);
  background-image: -webkit-linear-gradient(bottom, rgba(240, 162, 196, 0.5) 5%, rgba(240, 162, 196, 0) 5%);
  background-image: linear-gradient(to top, rgba(240, 162, 196, 0.5) 5%, rgba(240, 162, 196, 0) 5%);
  -moz-background-size: 100% 24px;
  -o-background-size: 100% 24px;
  -webkit-background-size: 100% 24px;
  background-size: 100% 24px;
  background-position: left top;
}


/*Downloaded from https://www.codeseek.co/hustlahusky/weking-demo-grid-vEbZXj */
var fab = document.querySelector('.fab_btn'),
    fab_icon = document.querySelector('.fab_btn .icon'),
    body = document.getElementsByTagName('body')[0];

fab.addEventListener('click', function () {
  if (body.className == '' && fab_icon.className == 'icon icon_grid-on') {
    body.className += '-showGrid';
    fab_icon.className = fab_icon.className.replace(/-on/gi, '-off');
  } else {
    body.className = body.className.replace('-showGrid', '');
    fab_icon.className = fab_icon.className.replace(/-off/gi, '-on');
  }
})

Comments