Demo - .gr

<ul class="cgcstyle" style="display:block;width:100%;min-width:20%;height:auto;margin:0 auto;padding:0;box-sizing:border-box;list-style:none;line-height:normal;"><li class="gr-12" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;">Header - .gr-12</li><li class="gr-12" style="list-style:none;padding:0;margin:0 auto;"><ul class="frow"  style="list-style:none;padding:0;margin:0 auto;"><li class="gr-3" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-3</li><li class="gr-3" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-3</li><li class="gr-3" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-3</li><li class="gr-3" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-3</li></ul></li><li class="gr-12" style="list-style:none;padding:0;margin:0 auto;"><ul class="frow"  style="list-style:none;padding:0;margin:0 auto;"><li class="gr-6" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-6</li><li class="gr-6" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-6</li></ul></li><li class="gr-12" style="list-style:none;padding:0;margin:0 auto;"><ul class="frow"  style="list-style:none;padding:0;margin:0 auto;"><li class="gr-4" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-4</li><li class="gr-4" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-4</li><li class="gr-4" style="text-align:center;background-color:#f1f1f1;color:#555;box-shadow:inset 0 0 1px #000;list-style:none;">.gr-4</li></ul></li></ul>
 
 
 
 <style>
 /*** The CSS Style loaded Globaly ***/
/***
 Custom Gem Class
 .cgcstyle must be set as the parent / class name assigned to parent element so no conflicts with other css styles
 Any type of elements added within this class name will become child and inherit/apply
 the following css
***/

.cgcstyle{line-height:normal;font-size: 100%;}
.cgcstyle *{box-sizing:border-box;}

/*** Block Width % expressed in fluid value ***/ 
.cgcstyle [class*="gr-"] {float: left;padding: 15px;}
.cgcstyle .gr-1 {width: 8.33%;}
.cgcstyle .gr-2 {width: 16.66%;}
.cgcstyle .gr-3 {width: 25%;}
.cgcstyle .gr-4 {width: 33.33%;}
.cgcstyle .gr-5 {width: 41.66%;}
.cgcstyle .gr-6 {width: 50%;}
.cgcstyle .gr-7 {width: 58.33%;}
.cgcstyle .gr-8 {width: 66.66%;}
.cgcstyle .gr-9 {width: 75%;}
.cgcstyle .gr-10 {width: 83.33%;}
.cgcstyle .gr-11 {width: 91.66%;}
.cgcstyle .gr-12 {width: 100%;}
/*** Float ***/
.cgcstyle .frow:before,.frow:after{content: "";clear: both;display: inline-table;}
.cgcstyle .fleft{float:left;}
.cgcstyle .fright{float:right;}
.cgcstyle .fnone{float:none;clear:both;}

/*** Block Transform skew CSS ***/ 
.cgcstyle .skewleft-10{transform: perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-10px) translateY(5%) translateX(2%);transform-style: preserve-3d;}
.cgcstyle .skewright-10{transform: perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(10px) translateY(5%) translateX(2%);transform-style: preserve-3d;}
.cgcstyle .skewleft-50{transform: perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-50px) translateY(5%) translateX(2%);transform-style: preserve-3d;}
.cgcstyle .skewright-50{transform: perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(50px) translateY(5%) translateX(2%);transform-style: preserve-3d;}
.cgcstyle .noskew{transform:none;}

/*** Block Box Shadow ***/
.cgcstyle .boxshadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.50);}
.cgcstyle .boxshadow-md{box-shadow:0 3px 7px rgba(0,0,0,0.50);}
.cgcstyle .boxshadow-xl{box-shadow:0 1px 14px rgba(0,0,0,0.70);}
.cgcstyle .boxshadow-xll{box-shadow:0 0 22px rgba(0,0,0,0.70);}
.cgcstyle .noboxshadow{box-shadow:0 0 0 rgba(0,0,0,0.0);}


/*** Font Style ***/
.cgcstyle .bosh-dark{font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.6);}
.cgcstyle .bosh-light{font-weight:bold;text-shadow:0 1px 2px rgba(255,255,255,0.6);}
.cgcstyle .smsh-dark{font-weight:100;text-shadow:0 1px 2px rgba(0,0,0,0.6);}
.cgcstyle .smsh-light{font-weight:100;text-shadow:0 1px 2px rgba(255,255,255,0.6);}
.cgcstyle .txtnosh{text-shadow:none; text-shadow:0 0 0 rgba(0,0,0,0.0);}
/*** Hover Block elements : Opacity ***/
.cgcstyle .hopa-3{opacity:.5;}
.cgcstyle .hopa-3:hover{opacity:1;}
.cgcstyle .hopa-5{opacity:.7;}
.cgcstyle .hopa-5:hover{opacity:1;}
.cgcstyle .nohopa{opacity:1;}
/*** Hover URL/Link Dark background***/
.cgcstyle a.urdark:link,.cgcstyle a.urdark:visited {color: #777;}
.cgcstyle a.urdark:hover,.cgcstyle a.urdark:active,.cgcstyle a.urdark:focus {color:#F36;}
/*** Hover URL/Link Light background***/
.cgcstyle a.urlight:link,.cgcstyle a.urlight:visited {color: #09C;}
.cgcstyle a.urlight:hover,.cgcstyle a.urlight:active,.cgcstyle a.urlight:focus {color:#F60;}
/*** Image Responsive ***/
.cgcstyle img.responsive,.cgcstyle .responsive img{width:100%;height:auto;}
/*** Font Size - Typography ***/
.cgcstyle h1.heading-1,.cgcstyle .heading-1 h1{font-size: 2.5em;line-height:normal;}
.cgcstyle h2.heading-2,.cgcstyle .heading-2 h2{font-size: 1.875em;line-height:normal;}
.cgcstyle p.para,.cgcstyle .para p{font-size: 0.875em;line-height:normal;}
/*** Scrollbar ***/
.xcr::-webkit-scrollbar {width: 8px; height:8px;background-color:#69BDDB;}
	/* Track */
.xcr::-webkit-scrollbar-track {background: #fff;box-shadow:inset 0 0 3px rgba(0,0,0,0.3); }
 /* Handle */
.xcr::-webkit-scrollbar-thumb {background:#69BDDB;}
/* Handle on hover */
.xcr::-webkit-scrollbar-thumb:hover {background: #69C;box-shadow:inset 0 0 3px rgba(0,0,0,0.5); }
.fxcr{scrollbar-color: #bbb #1f82ec;scrollbar-width: thin;overflow-y: scroll;}


@media
only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific css here */
.cgcstyle{line-height:normal;font-size: 100%;} 
.cgcstyle .boxshadow-sm,.cgcstyle .boxshadow-md,.cgcstyle .boxshadow-xl,.cgcstyle .boxshadow-xll,.cgcstyle .noboxshadow{box-shadow:0 0 0 rgba(0,0,0,0.0);}
.cgcstyle [class*="gr-"]{width:100%;float:none;clear:both;}
.cgcstyle .skewleft-10,.cgcstyle .skewright-10,.cgcstyle .skewleft-50,.cgcstyle .skewright-50,.cgcstyle .notransform{transform: none;}
}
@media screen and (max-height: 450px) {.cgcstyle [class*="gr-"]{width:100%;float:none;clear:both;}}
@media only screen and (max-width: 748px) and (min-width: 200px){.cgcstyle [class*="gr-"]{width:100%;float:none;clear:both;}
  }
  </style>
.gr

Source Editor tool is pretty straightforward
