.cgcstyle as mentioned above, the parent wrapper must use this custom class in order for additional child class names to work

Example:

<p class="cgcstyle">
<b class="hopa-3">Hover me. This is a text using additional class names</b></p>

Render:

Hover me. This is a text using additional class names

The above text is using .hopa-3 class which adds a hover opacity effect.
Without the parent class .cgcstyle the functionality of the opacity effect will not work.

Our suggestion is to use .cgcstyle as the parent class and assigned to the main HTML element. Most flexible one is ul.

Example:

For the purpose of this demo, I'm using ul HTML markup tag with inline css

<ul class="cgcstyle" style="display:block;width:100%;min-width:10%;height:auto;padding:0;list-style:none;margin:0 auto;background-color:#222;color:#f1f1f1;font-size:15px;">... all other HTML elements holding content to be added here...</ul>

Render:

... all other HTML elements holding content to be added here...

.gr-1 {width: 8.33%;}
.gr-2 {width: 16.66%;}
.gr-3 {width: 25%;}
.gr-4 {width: 33.33%;}
.gr-5 {width: 41.66%;}
.gr-6 {width: 50%;}
.gr-7 {width: 58.33%;}
.gr-8 {width: 66.66%;}
.gr-9 {width: 75%;}
.gr-10 {width: 83.33%;}
.gr-11 {width: 91.66%;}
.gr-12 {width: 100%;}
to show a full-width block use .gr-12

[class*="gr-"] {float: left;padding: 15px;} - all these blocks are set to float left.

See demo and source code

.frow:before,.frow:after{content: "";clear: both;display: inline-table;} - fix floating, makes blocks display in row

Example:

<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="list-style:none;padding:0;margin:0 auto;"><ul id="show" 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></ul>

Render:

• • .gr-3
  • .gr-3
  • .gr-3
  • .gr-3

The above markup is using .gr-3 and .frow class to display the main parent and a 4 child blocks in a single row floating left. Markup tag used is li and it is responsive

See demo and source code

Let's try with 2 child elements

Example:

2 elements using li HTML tag with .gr-6 class

<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 show" 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><li class="fnone"></li></ul></li></ul>

Render:

• • .gr-6
  • .gr-6

.lskew- is the class name for a combination of css transform. Transfrom Left

lskew-1 renders less css effect

.lskew-1{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-100px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

lskew-2 renders a stronger css effect

.lskew-2{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-200px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

lskew-3 renders a stronger css effect

.lskew-3{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-300px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

lskew-4 renders a stronger css effect

.lskew-4{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(-400px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

.rskew- is the class name for a combination of css transform. Transfrom Right

rskew-1 renders less css effect

.rskew-1{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(100px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

rskew-2 renders a stronger css effect

.rskew-2{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(200px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

rskew-3 renders a stronger css effect

.rskew-3{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(300px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

rskew-4 renders a stronger css effect

.rskew-4{transform:  perspective(2100px) rotateY(25deg) scaleZ(1.2) translateZ(400px) translateY(5%) translateX(2%);transform-style: preserve-3d;}

noskew - Adding this class is removing any skew effect. NO Transfrom

.noskew removes any transform css effect

.noskew{transform:none;}

brad

.brad- adds a piece of css to render round corners

Bigger border radius / round corners using following class names:
.brad-5 5px border radius / round corners
.brad-10 15px border radius / round corners
.brad-25 25px border radius / round corners
.brad-100 100% border radius / round corners

norad

.norad

Removes any border radius (if existing).

boxshadow

.boxsh- add css box-shadow to any blcok element

.boxsh-sm{box-shadow:0 1px 2px rgba(0,0,0,0.50);}

.boxsh-md{box-shadow:0 3px 7px rgba(0,0,0,0.50);}

.boxsh-xl{box-shadow:0 1px 14px rgba(0,0,0,0.70);}

.boxsh-lg{box-shadow:0 0 22px rgba(0,0,0,0.70);}

nosh

.nosh{box-shadow:0 0 0 rgba(0,0,0,0.0);} remove any shadow effect

Simple inline css will do the trick

text-align:left; text align left

text-align:right; text align right

text-align:center; text align center

Use inline css when needed

margin-left: {value} moves a block elements away from left margin with {value}

margin-right: {value} moves a block elements away from right margin with {value}

margin-top: {value} moves a block elements away from top margin with {value}

margin-bottom: {value} moves a block elements away from bottom margin with {value}

Use inline css when needed

padding-left: {value} adds padding to left expressed by {value}

padding-right: {value} adds padding to right expressed by {value}

padding-top: {value} adds padding to top expressed by {value}

padding-bottom: {value} adds padding to bottom expressed by {value}