TcSS

Basic

You can do anything and everything using the basic classes. Read the documentation to learn about the fixed classes. This will save you a huge amount of time. You won't have to create, link or write any external CSS in your project. Then again fixed classes can be easily overwritten at anytime using css, so no need to worry.

You can add padding all around your markup using class="p_#" here # is a placeholder for an integer value, which has a range of (0-100) for "rem" unit & (0-1000) for "pixel" unit. You have to specify which unit you are using. By default it is in rem unit, in-order to use pixel unit type px after integer value.

                

                    <div class="p_5px"> </div> //this div has 5 px padding all around.
                    <div class="p_5"> </div> //this div has 5 rem padding all around.

                

            

For floating values we can use _q, _h, _tq which are respectively adding .25, .50, .75 to the integer value of # After adding floating point extensions the classes will look something like these class="p_#_q" class="p_#_h" class="p_#_tq" Note that this is only available for rem unit.

                

                    <div class="p_5_q"> </div> //this div has 5.25 rem padding all around.
                    <div class="p_5_h"> </div> //this div has 5.5 rem padding all around.
                    <div class="p_5_tq"> </div> //this div has 5.75 rem padding all around.

                

            

You can add padding on top of your markup using class="pt_#"

                

                    <div class="pt_5px"> </div> //this div has 5 px padding on top.
                    <div class="pt_5"> </div> //this div has 5 rem padding on top.
                    <div class="pt_5_q"> </div> //this div has 5.25 rem padding on top.
                    <div class="pt_5_h"> </div> //this div has 5.5 rem padding on top.
                    <div class="pt_5_tq"> </div> //this div has 5.75 rem padding on top.

                

            

You can add padding on the right side of your markup using class="pr_#"

                

                    <div class="pr_5px"> </div> //this div has 5 px padding on the right.
                    <div class="pr_5"> </div> //this div has 5 rem padding on the right.
                    <div class="pr_5_q"> </div> //this div has 5.25 rem padding on the right.
                    <div class="pr_5_h"> </div> //this div has 5.5 rem padding on the right.
                    <div class="pr_5_tq"> </div> //this div has 5.75 rem padding on the right.

                

            

You can add padding on the right side of your markup using class="pb_#"

                

                    <div class="pb_5px"> </div> //this div has 5 px padding on the bottom.
                    <div class="pb_5"> </div> //this div has 5 rem padding on the bottom.
                    <div class="pb_5_q"> </div> //this div has 5.25 rem padding on the bottom.
                    <div class="pb_5_h"> </div> //this div has 5.5 rem padding on the bottom.
                    <div class="pb_5_tq"> </div> //this div has 5.75 rem padding on the bottom.

                

            

You can add padding on the left side of your markup using class="pl_#"

                

                    <div class="pl_5px"> </div> //this div has 5 px padding on the left.
                    <div class="pl_5"> </div> //this div has 5 rem padding on the left.
                    <div class="pl_5_q"> </div> //this div has 5.25 rem padding on the left.
                    <div class="pl_5_h"> </div> //this div has 5.5 rem padding on the left.
                    <div class="pl_5_tq"> </div> //this div has 5.75 rem padding on the left.

                

            

You can add margin all around your markup using class="m_#" here # is a placeholder for an integer value, which has a range of (0-100) for "rem" unit & (0-1000) for "px" unit. You have to specify which unit you are using. By default it is in rem unit, in-order to use pixel unit type px after integer value.

                

                    <div class="m_5px"> </div> //this div has 5 px margin all around.
                    <div class="m_5"> </div> //this div has 5 rem margin all around.

                

            

For floating values we can use _q, _h, _tq which are respectively adding .25, .50, .75 to the integer value of # After adding floating point extensions the classes will look something like these class="m_#_q" class="m_#_h" class="m_#_tq"

                

                    <div class="m_5_q"> </div> //this div has 5.25 rem margin all around.
                    <div class="m_5_h"> </div> //this div has 5.5 rem margin all around.
                    <div class="m_5_tq"> </div> //this div has 5.75 rem margin all around.

                

            

You can add margin on top of your markup using class="mt_#"

                

                    <div class="mt_5px"> </div> //this div has 5 px margin on top.
                    <div class="mt_5"> </div> //this div has 5 rem margin on top.
                    <div class="mt_5_q"> </div> //this div has 5.25 rem margin on top.
                    <div class="mt_5_h"> </div> //this div has 5.5 rem margin on top.
                    <div class="mt_5_tq"> </div> //this div has 5.75 rem margin on top.

                

            

You can add margin on the right side of your markup using class="mr_#"

                

                    <div class="mr_5px"> </div> //this div has 5 px margin on the right.
                    <div class="mr_5"> </div> //this div has 5 rem margin on the right.
                    <div class="mr_5_q"> </div> //this div has 5.25 rem margin on the right.
                    <div class="mr_5_h"> </div> //this div has 5.5 rem margin on the right.
                    <div class="mr_5_tq"> </div> //this div has 5.75 rem margin on the right.

                

            

You can add margin on the bottom side of your markup using class="mb_#"

                

                    <div class="mb_5px"> </div> //this div has 5 px margin on the bottom.
                    <div class="mb_5"> </div> //this div has 5 rem margin on the bottom.
                    <div class="mb_5_q"> </div> //this div has 5.25 rem margin on the bottom.
                    <div class="mb_5_h"> </div> //this div has 5.5 rem margin on the bottom.
                    <div class="mb_5_tq"> </div> //this div has 5.75 rem margin on the bottom.

                

            

You can add margin on the left side of your markup using class="ml_#"

                

                    <div class="ml_5px"> </div> //this div has 5 px margin on the left.
                    <div class="ml_5"> </div> //this div has 5 rem margin on the left.
                    <div class="ml_5_q"> </div> //this div has 5.25 rem margin on the left.
                    <div class="ml_5_h"> </div> //this div has 5.5 rem margin on the left.
                    <div class="ml_5_tq"> </div> //this div has 5.75 rem margin on the left.

                

            

You can add auto margin on your markup using class="m_a"

                

                    <div class="m_a"> </div> //this div has auto margin.

                

            

You can add borders to your markup using some pre fixed classes. You'll need to specify the size, color and style of the border.

You can set border size for your markup using class="borSize_#" here # is a placeholder for an integer value, which has a range of (0-1000). Only "px" unit is supported, no need to mention unit. Also note that if you only use this class and no other border prefixed classes, you'll get a black solid border all around with the selected size.

                

                    <div class="borSize_5"> </div> //this div has 5 px border all around.

                

            

You can add border on top of your markup using class="borSizeT_#"

                

                    <div class="borSizeT_5"> </div> //this div has 5 px border on top.

                

            

You can add border on the right side of your markup using class="borSizeR_#"

                

                    <div class="borSizeR_5"> </div> //this div has 5 px border on the right.

                

            

You can add border on the bottom side of your markup using class="borSizeB_#"

                

                    <div class="borSizeB_5px"> </div> //this div has 5 px border on the bottom.

                

            

You can add border on the left side of your markup using class="borSizeL_#"

                

                    <div class="borSizeL_5px"> </div> //this div has 5 px border on the left.

                

            

You can add style to your border using class="borStyle#" here # is a placeholder for the styles name.

  <div class="borStyleSolid"> </div> //this will make border solid.  

  <div class="borStyleDashed"> </div> //this will make border dashed.  

  <div class="borStyleDotted"> </div> //this will make border dotted.  

  <div class="borStyleDouble"> </div> //this will make border doubled.  

  <div class="borStyleGroove"> </div> //this will make border grooved.  

  <div class="borStyleRidge"> </div> //this will make border Ridge.  

  <div class="borStyleInset"> </div> //this will set border inside.  

  <div class="borStyleOutset"> </div> //this will set border outside.  

  <div class="borStyleHidden"> </div> //this will hide border.  

  <div class="borStyleUnset"> </div> //this will unset border.  

You can set border radius for your markup using class="borRad_#" here # is a placeholder for an integer value, which has a range of (0-1000) for px unit & (0-100) for % unit. "Per" needs to be mentioned when using % unit.

                

                    <div class="borRad_5"> </div> //this border has a radius of 100 px all around.
                    <div class="borRad_5Per"> </div> //this border has a radius of 100 % all around.

                

            

You can change radius of the top left side of your markup using class="borRadTL_#"

                

                    <div class="borRadTL_5"> </div> //this div has a radius of 5 px on the top left.

                

            

You can change radius of the top right side of your markup using class="borRadTR_#"

                

                    <div class="borRadTR_5"> </div> //this div has a radius of 5 px on the top right.

                

            

You can change radius of the bottom left side of your markup using class="borRadBL_#"

                

                    <div class="borRadBL_5"> </div> //this div has a radius of 5 px on the bottom left.

                

            

You can change radius of the bottom right side of your markup using class="borRadBR_#"

                

                    <div class="borRadBR_5"> </div> //this div has a radius of 5 px on the bottom right.

                

            

You can change border color using class="borClr#" here # is a placeholder for the color. To see all the available colors go to Colors.

                

                    <div class="borClrGold"> </div> //this border is Golden.

                

            

You can remove border from all or any particular side using class="borNone#" here # is a placeholder for selected side. All around border removal hold no value for #, for top border removal # is T, for right R, for bottom B, for left L.

                

                    <div class="borNone"> </div> //borders removed from all sides.
                    <div class="borNoneT"> </div> //borders removed from top.
                    <div class="borNoneR"> </div> //borders removed from right.
                    <div class="borNoneB"> </div> //borders removed from bottom.
                    <div class="borNoneL"> </div> //borders removed from left.

                

            

You can keep border to a particular side and remove borders from other sides using class="borOnly#" here # is a placeholder for selected side. For top border removal # is T, for right R, for bottom B, for left L.

                

                    <div class="borOnlyT"> </div> //border added to top and removed from other sides.
                    <div class="borOnlyR"> </div> //border added to right and removed from other sides.
                    <div class="borOnlyB"> </div> //border added to bottom and removed from other sides.
                    <div class="borOnlyL"> </div> //border added to left and removed from other sides.

                

            

This framework currently supports 6 fonts. They are:

To use defaults, simply type in the font in camelCase. Example: type class="openSans" to use the default OpenSans font.

<p class="nunito"> </p>

<p class="openSans"> </p>

<p class="roboto"> </p>

<p class="lato"> </p>

<p class="montserrat"> </p>

<p class="monteCarlo"> </p>

To add font weights use class="{fontName}#" here replace {fontName} with supported font name & # with supported font weight. List of supported weights are given above. An example of this is:

                

                    <p class="latoBold"> </p> This is bold version of lato.

                

            

To declare font size use class="fSize_#" here # is a placeholder for an integer value, which has a range of (0-100) for "rem" unit & (0-500) for "pixel" unit. You have to specify which unit you are using. By default it is in rem unit, in-order to use pixel unit type px after integer value.

                

                    <p class="fSize_5"> </p> //this paragraph has a font size of 5 rem.
                    <p class="fSize_5px"> </p> //this paragraph has a font size of 5 px.

                

            

You can change text color using class="clr#" here # is a placeholder for the color. To see all the available colors go to Colors.

                

                    <p class="clrGoGreen"> </p> //this paragraph is Green.

                

            

In-order to align text use class="txt#" here # is a placeholder for alignment, such as center, left, right, justify.

                

                    <p class="txtCenter"> </p> //text inside this paragraph is aligned center.
                    <p class="txtRight"> </p> //text inside this paragraph is aligned right.
                    <p class="txtLeft"> </p> //text inside this paragraph is aligned left.
                    <p class="txtJustify"> </p> //text inside this paragraph is aligned justify.

                

            

In-order to decorate text use class="txtDecor#" here # is a placeholder for decoration, such as underline, line through, dotted, dashed, etc.

                

                    <p class="txtDecorDashed"> </p> //this paragraph is dashed.
                    <p class="txtDecorDotted"> </p> //this paragraph is dotted.
                    <p class="txtDecorUnderline"> </p> //this paragraph is underlined.
                    <p class="txtDecorLineThrough"> </p> //this paragraph is line through.
                    <p class="txtDecorOverline"> </p> //this paragraph is overline.
                    <p class="txtDecorWavy"> </p> //this paragraph is wavy.
                    <p class="txtDecorNone"> </p> //this paragraph is none.

                

            

To tackle text overflow use class="overflow" this will prevent text overflow.

                

                    <p class="overflow"> </p> //this paragraph will not overflow.

                

            

You can capitalize text or do uppercase and lowercase.

<p class="capitalize"> this is an example </p>

<p class="uppercase"> this is an example </p>

<p class="lowercase"> This IS aN ExamPle </p>

You can set Line height using class="lineHeight_#_#" here both # are placeholders for integer values.

                
                
                    
                    <p class="lineHeight_1_2"> </p> //Here line height is 1.2.
                
                
            
            

You can set white-space using class="#WS" here # is a placeholder for white space options, such as pre, normal, noWrap

                
                
                    
                    <p class="normalWS"> </p> //Here white-space is normal.
                
                
            
            

You can block selection using class="blockSelect"

<p class="blockSelect"> Try to select me </p>

You can change modes.

<p class="horModeTb"> Horizontal </p>

<p class="verModeLr"> Vertical 1 </p>

<p class="verModeRl"> Vertical 2 </p>

To style a link in paragraph use class="link".

<a class="link" href="#"> click me </a>

To highlight a specific portion of a paragraph use class="highlight#" here # is a placeholder. You can use Success, Danger, Alert, Link or Black instead of #.

<a class="highlightBlack"> This portion is highlighted </a>

<a class="highlightSuccess"> This portion is highlighted </a>

<a class="highlightDanger"> This portion is highlighted </a>

<a class="highlightAlert"> This portion is highlighted </a>

<a class="highlightLink"> This portion is highlighted </a>

You can add outline all around your markup using. Keep in mind outline and border are not the same.

To set grid gap use class="olWidth_#" here # is a placeholder for an integer value, which has a range of (0-20) for "px" unit.

                
                    <div class="olWidth_1"> outline width is 1px. </div>
                
            

To set grid gap use class="olOffset_#" here # is a placeholder for an integer value, which has a range of (0-20) for "px" unit.

                
                    <div class="olOffset_1"> outline offset is 1px. </div>
                    <div class="olOffset_5"> outline offset is 1px. </div>
                
            

To set outline style: use class="olStyle#t" here #t is a placeholder for gap type. It can be "Dotted, Dashed, Double, Groove, Solid, Ridge, Inset, Outset, Hidden" or "Unset".

  <div class="olStyleSolid"> </div> //this will make outline solid.  

  <div class="olStyleDashed"> </div> //this will make outline dashed.  

  <div class="olStyleDotted"> </div> //this will make outline dotted.  

  <div class="olStyleDouble"> </div> //this will make outline doubled.  

  <div class="olStyleGroove"> </div> //this will make outline grooved.  

  <div class="olStyleRidge"> </div> //this will make outline Ridge.  

  <div class="olStyleInset"> </div> //this will set outline inside.  

  <div class="olStyleOutset"> </div> //this will set outline outside.  

  <div class="olStyleHidden"> </div> //this will hide outline.  

  <div class="olStyleUnset"> </div> //this will unset outline.  

To set outline color use class="olClr#" here # is a placeholder for color name. This class has a limited number of colors only they are "White,PureBlack, Gray, Dark, DarkGray, DarkAsh, DarkBlue, Sky, Danger, Success, Alert" & "Gold".

                
                    <div class="olClrSuccess"> outline color is now green. </div>
                
            

To declare position of an element use class="pos#" here # is a placeholder for Rel, Abs, Fix, Stat, Stik.

                
                    <div class="posRel"> position of this div is relative </div>
                
            

Move fixed or absolute positioned elements around using class="top_#" class="right_#" class="bottom_#" class="left_#" here # is a placeholder for an integer value which has a range of (0-1000) px.

                
                    <div class="top_10"> 10px from top </div>
                
            

To use negative values use class="negTop_#" class="negRight_#" class="negBottom_#" class="negLeft_#"

                
                    <div class="negTop_10"> negative 10px from top </div>
                
            

To set Z index use class="zIndex#s_#v" here #s is a placeholder for index status. It can be "Neg" or "Null". #v is a placeholder for an integer value, which has a range of (0-20).

                
                    <div class="zIndex_1">  </div>
                    <div class="zIndexNeg_1">  </div>
                
            

To set position of an list use class="list#" here # is a placeholder for position marker, which are "In" & "Out".

                
                    <li class="listIn"> position of list is inside </li>
                    <li class="listOut"> position of list is outside </li>
                
            

To set type of an list use class="list#" here # is a placeholder for type, which are "Disc, Armenian, Circle, Square, Dec, DecFrom_0, Georgian, LowerAlpha, LowerGreek, LowerLatin, LowerRoman, UpperAlpha, UpperLatin, UpperRoman, None" & "Unset".

                
                    <li class="listCircle"> type of list is circle </li>
                
            

To set display of an element use class="dis#" here # is a placeholder for Block, Inline, InlineBlock, Table, Grid, Flex, None.

                
                    <div class="disBlock"> display of this div is block </div>
                
            

To set height use class="h_#" here # is a placeholder for an integer value, which has a range of (0-1000) for "px" unit & (0-100) for "percentage" and "vh" unit. You have to specify which unit you are using. By default it is in pixel unit, in-order to use percentage unit type Per and in-order to use viewport height unit type vh after integer value.

                
                    <div class="h_10"> height 10px </div>
                    <div class="h_10Per"> height 10% </div>
                    <div class="h_10vh"> height 10vh </div>
                
            

To set max height use class="maxH_#"

                
                    <div class="maxH_10"> maximum height 10px </div>
                    <div class="maxH_10Per"> maximum height 10% </div>
                    <div class="maxH_10vh"> maximum height 10vh </div>
                
            

To set width use class="w_#" here # is a placeholder for an integer value, which has a range of (0-1000) for "px" unit & (0-100) for "percentage" and "vw" unit. You have to specify which unit you are using. By default it is in pixel unit, in-order to use percentage unit type Per and in-order to use viewport width unit type vw after integer value.

                
                    <div class="w_10"> width 10px </div>
                    <div class="w_10Per"> width 10% </div>
                    <div class="w_10vh"> width 10vh </div>
                
            

To set max width use class="maxW_#"

                
                    <div class="maxW_10"> maximum width 10px </div>
                    <div class="maxW_10Per"> maximum width 10% </div>
                    <div class="maxW_10vw"> maximum width 10vh </div>
                
            

To set opacity use class="opacity_#i_#f" here #i is a placeholder for an binary value, which has a range of (0-1) and #f is a placeholder for an integer value, which has a range of (0-9).

                
                    <div class="opacity_0_0"> opacity is 0% </div>
                    <div class="opacity_0_5"> opacity is 50% </div>
                    <div class="opacity_1_0"> opacity is 100% </div>
                
            

To make something invisible use class="invisible"

                
                    <div class="invisible"> John Cena. </div>
                
            

To make something visible use class="visible"

                
                    <div class="visible"> visible content. </div>
                
            

You can change background color using class="bg#" here # is a placeholder for the color. To see all the available colors go to Colors.

                

                    <p class="bgGold"> </p> //this paragraph background is Green.

                

            

To set display to grid use class="disGrid"

                
                    <div class="disGrid"> display of this div is grid </div>
                
            

To set column template use class="gridCol_#c_size_#s_#s_...._#s" here #c is a placeholder for an integer value, which has a range of (1-10). This represents the number of columns in grid. #s is a placeholder for an integer value, which has a range of (1-9). This represents the sizes of columns respectively.

Note: While allocating multiple column sizes(#s), make sure that summation of #s = 10.

                
                    <div class="gridCol_5_size_1"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                        <p> Box 03 </p>
                        <p> Box 04 </p>
                        <p> Box 05 </p>
                    </div>
                
            

Example:

                
                    <div class="gridCol_2_size_7_3"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                        <p> Box 03 </p>
                        <p> Box 04 </p>
                        <p> Box 05 </p>
                    </div>
                
            

Example:

To set row template use class="gridRow_#c_size_#s_#s_...._#s" here #c is a placeholder for an integer value, which has a range of (1-10). This represents the number of rows in grid. #s is a placeholder for an integer value, which has a range of (1-9). This represents the sizes of rows respectively.

Note: While allocating multiple row sizes(#s), make sure that summation of #s = 10.

                
                    <div class="gridRow_5_size_1"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                        <p> Box 03 </p>
                        <p> Box 04 </p>
                        <p> Box 05 </p>
                    </div>
                
            

Example:

                
                    <div class="gridRow_2_size_7_3"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                    </div>
                
            

Example:

To set grid gap use class="grid(#t)Gap_#s" here #t is a placeholder for gap type. It can be "Col, Row" or "Null". #s is a placeholder for an integer value, which has a range of (0-100) for "rem" unit.

For floating values we can use _q, _h, _tq which are respectively 0.25, 0.50, 0.75. Floating value pointers will replace #s.

                
                    <div class="gridGap_2"> gap between grid rows and columns are 2rem </div>
                    <div class="gridColGap_2"> gap between grid columns are 2rem, rows undefined. </div>
                    <div class="gridRowGap_2"> gap between grid rows are 2rem, columns undefined.</div>
                
            

By default basic grid classes are responsive to mobile. To make grid classes even more responsive use class="res#t--#d" here #t is a placeholder for gap type. It can be "COL" or "ROW". #d is a placeholder for device.

                
                    <div class="resCOL--tablet"> responsive columns in tablet device.</div>
                    <div class="resROW--tablet"> responsive rows in tablet device. </div>
                
            

To set display to flex use class="disFlex"

                
                    <div class="disFlex"> display of this div is Flex </div>
                
            

To set flex direction use class="flexDir#d" here #d is a placeholder for direction. It can be "Col, RevCol, Row, RevRow" or "Unset".

                
                    <div class="flexDirCol"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                    </div>
                
            

Example:

                
                    <div class="flexDirRevCol"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                    </div>
                
            

Example:

                
                    <div class="flexDirRow"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                        <p> Box 03 </p>
                        <p> Box 04 </p>
                        <p> Box 05 </p>
                    </div>
                
            

Example:

                
                    <div class="flexDirRevRow"> 
                        <p> Box 01 </p>
                        <p> Box 02 </p>
                        <p> Box 03 </p>
                        <p> Box 04 </p>
                        <p> Box 05 </p>
                    </div>
                
            

Example:

To set flex wrap use class="flex#Wrap" here # is a placeholder for direction. It can be "No, Rev" or "Null".

Note: By default flex is set to flex wrap.

                
                    <div class="flexWrap"> </div>
                    <div class="flexNoWrap"> </div>
                    <div class="flexRevWrap"> </div>
                
            

To set flex basis use class="basis_#" here # is a placeholder for an integer value, which has a range of (0-100).

                
                    <div class="basis_1">  </div>
                
            

To set flex order use class="flexOrder_#" here # is a placeholder for an integer value, which has a range of (0-100).

                
                    <div class="flexOrder_1">  </div>
                
            

To set flex grow and shrink elements use class="flex_#" here # is a placeholder for an integer value, which has a range of (0-100).

                
                    <div class="flex_1">  </div>
                
            

To use alignment on an element use class="align#m#n" here #m is a placeholder for align area. It can be "Content, Self" or "Items" and here #n is a placeholder for align type. It can be "Start, FlexStart, Center, End, FlexEnd, SpaceAround, SpaceBetween, SpaceEvenly, Stretch, Baseline, Auto, Normal" or "Unset".

                
                    <div class="alignContentCenter"> </div>
                
            

To use justification on an element use class="justify#m#n" here #m is a placeholder for align area. It can be "Content, Self" or "Items" and here #n is a placeholder for align type. It can be "Start, FlexStart, Center, End, FlexEnd, SpaceAround, SpaceBetween, SpaceEvenly, Stretch, Baseline, Auto, Normal" or "Unset".

                
                    <div class="justifyContentCenter"> </div>
                
            

To set object fit in images/videos use class="obj#" here # is a placeholder for fit type. It can be "Fill, Contain, Cover, ScaleDown" or "None".

                
                    <div class="objFill"> </div>
                
            

To set object position use class="objPos_#_px_#_px" here # is a placeholder for an integer value, which has a range of (0-100) for "px" & "per unit. To use negative values type "n-" before unit.

                
                    <div class="objPos_10_n-px_0_per"> </div>
                
            

To adjust overflow use class="of#" here # is a placeholder for flow type. It can be "Scroll, Auto, Visible, HiddenX, ScrollX, AutoX, VisibleX, HiddenY, ScrollY, AutoY, VisibleY" or "Hidden".

                
                    <div class="ofVisible"> </div>
                
            

To break page after use class="pageBrkA" & to break page before use class="pageBrkB"

                
                    <div class="pageBrkA"> </div>
                    <div class="pageBrkB"> </div>
                
            

By default scroll is set to smooth scroll. If by default smooth scroll is not activated use class="smoothScroll" to reset page.

                
                    <html class="smoothScroll"> </html>
                
            

To set cursor use class="cur#" here # is a placeholder for cursor type. It can be "Alias, AllScroll, Auto, Cell, ContextMenu, ColResize, Copy, CrossHair, Default, EResize, EwResize, Grab, Grabbing, Help, Move, NResize, NeResize, NeswResize, NsResize, NwResize, NwseResize, NoDrop, NotAllowed, Pointer, Progress, RowResize, SResize, SeResize, SwResize, Txt, WResize, Wait, ZoomIn, ZoomOut" or "None".

                
                    <div class="curPointer"> </div>
                
            

Example: Hover over to see cursor shifts.

Navbar

There are two basic types of navigation bars, one being non sticky & the other being sticky. Inside them consists three important sections, which are logo, search bar & navigation buttons. The defaults are pretty bland, but customization is possible using the Basic classes.

In order to access non sticky navbar, use class="nav"

                

                    <div class="nav"> <!--Non sticky navbar start.-->

                

            

In order to access sticky navbar, use class="navType_2"

                

                    <div class="navType_2"> <!--Sticky navbar start.-->

                

            

Logos can be image or text. In order to access image logo, use class="imgLogo"

                

                    <img class="imgLogo" src="" alt="">

                

            

Preview:

In order to access text logo, use class="txtLogo"

                

                    <p class="txtLogo">TcSS</p>

                

            

In case logo is not required, use span tag as placeholder for grid template.

                

                    <span></span>

                

            

Search bar slot is in the middle. In order to access search bar, use class="searchBar" to style search field, use class="searchField" to style search button, use class="searchBtn"

                

                    <form class="searchBar" action="">
                
                        <input class="searchField" type="text">

                        <button class="searchBtn clrWhite" type="input">
                            <i class="fas fa-search"></i>
                        </button>
                
                    </form>

                

            

In case search bar is not required, use span tag as placeholder for grid template.

                

                    <span></span>

                

            

In order to access div that holds all the main buttons for the non sticky, version use class="mainLinks" to put style on a single button, use class="mainLink"

                

                    <!--Main links for non sticky.-->
                    <div class="mainLinks"> <!--Main links start.-->

                        <a class="mainLink" href="">main 1</a>
                        <a class="mainLink" href="">main 2</a>

                

            

In order to access div that holds all the main buttons for the sticky, version use class="mainLinks_2" to put style on a single button, use class="mainLink_2"

                

                    <!--Main links for sticky.-->
                    <div class="mainLinks_2"> <!--Main links start.-->

                        <div class="mainLink_2"> 
                            <a href="#">main 1</a> 
                        </div>

                        <div class="mainLink_2"> 
                            <a href="#">main 2</a> 
                        </div>

                

            

Sub buttons will always be contained by a main button. They will only appear when container main button is hovered. class="dropDown" is used for positioning, it is only used in non sticky nav. In order to access div that holds all the sub buttons for non sticky nav, use class="subLinks" to put style on a single button, use class="subLink"

Note: Fixing the position of non sticky nav bar will will lead to unresponsive sub buttons.

                
                    <!--Sub links for non sticky.-->
                    <div class="dropDown">

                        <a class="mainLink" href="">main 3</a>

                        <div class="subLinks"> <!--Sub links start.-->
                            <a class="subLink" href="#">sub 1</a>
                            <a class="subLink" href="#">sub 2</a>
                            <a class="subLink" href="#">sub 3</a>
                        </div> <!--Sub links end.-->

                    </div> 

                

            

In order to access div that holds all the sub buttons for sticky nav, use class="subLinks_2" to put style on a single button, use class="subLink_2"

                

                    <!--Sub links for sticky.-->
                    <div class="mainLink_2">

                        <a href="#">main 3

                            <div class=" subLinks_2"> <!--Sub links start.-->
                                <a class="subLink_2" href="#">sub 1</a>
                                <a class="subLink_2" href="#">sub 2</a>
                                <a class="subLink_2" href="#">sub 3</a>
                            </div> <!--Sub links end.-->

                        </a>

                    </div>

                

            

Extra button section is a section that contains additional buttons. This section will only appear when container sub button section is hovered. In order to access div that holds extra sub buttons, use class="exSubLinks_2" to put style on a single button, use class="exSubLink_2"

Note: This is unique to sticky navigation bar.

                

                        <!--Extra links for sticky.-->
                        <div class="mainLink_2">

                            <a   href="#">main 4

                                <div class=" subLinks_2">

                                    <a class="subLink_2" href="#">sub 1

                                        <div class="exSubLinks_2"> <!--Extra links start.-->
                                            <a class="exSubLink_2" href="#">extra sub 1</a>
                                            <a class="exSubLink_2" href="#">extra sub 2</a>
                                            <a class="exSubLink_2" href="#">extra sub 3</a>
                                        </div> <!--Extra links end.-->

                                    </a>
                                    <a class="subLink_2" href="#">sub 2</a>
                                    <a class="subLink_2" href="#">sub 3</a>

                                </div> 

                            </a>

                        </div> 

                    </div>  <!--Main links end.-->

                

            

Hamburger menu button will appear only when screen size is bellow 1000px. In order to access hamburger menu buttons, use class="hamburger"

                
                            <!--Hamburger btn for non sticky.-->
                            <a class="hamburger" href=""><i class="fas fa-bars"></i></a>
                
                        </div> <!--Main links end.-->
                
                    </div> <!--Non sticky navbar end.-->

                

            

Copy the portion below if your using sticky nav.

                

                        <!--Hamburger btn for sticky.-->    
                        <div class="mainLinks"> <!--Main links start.-->

                            <a class="hamburger" href=""><i class="fas fa-bars"></i></a>

                        </div> <!--Main links end.-->

                    </div> <!--Sticky navbar end.-->

                

            

Frames

Frames are built-in structures that are responsive by default. Using frames will minimizes the design time massively. The default frames are pretty bland, but customization is possible using the Basic classes.

This frame is divided into 3 sections which are main, middle & footer. In order to access this frame, use class="fr"

Note: An empty span tag is required inside the "fr" classed div. This will act as an filler behind the navbar assuming navbar is being used. The span tag is unnecessary if navbar is not applied.

                

                    <div class="fr"> <!--Starting: frame no.1-->

                    <span> <!--Gap balancer for nav-->
                        This portion goes behind the navbar as a gap filler.
                    </span>

                

            

This section is the very top section of the frame which will act as a content container. To create main section on frame 1, use class="frTs_1"

Note: Multiple main sections can be added all over the frame.

                

                    <div class="frTs_1"> <!--Starting: main section-->
                        <p>
                            This is the main section.
                        </p>
                    </div> <!--Ending: main section-->

                

            

There are multiple templates in middle section. To create middle section on frame 1, use class="frMs_#" here # is a placeholder for section type. Supported section types are "1, 1_1, 2_1, 1_2, 3_1, 1_3, 1_1_1, R100px_1, 1_R100px, 1_s2" & "s2_1"

Note: All the templates are by default responsive.

                

                    <div class="frMs_1_1"> <!--Starting: mid section-->

                        <div>  <!--Starting: mid section - left-->
                            <p>
                                Middle section type: 1 - left part.
                            </p>
                        </div> <!--Ending: mid section - left-->

                        <div> <!--Starting: mid section - right-->
                            <p>
                                Middle section type: 1 - right part.
                            </p>
                        </div> <!--Ending: mid section - right-->

                    </div> <!--Ending: mid section-->

                

            

To create footer section on frame 1, use class="frBs_1"

                

                    <div class="frBs_1"> <!--Starting: footer section-->
                        <p>
                            This is the footer section.
                        </p>
                    </div> <!--Ending: footer section-->

                    </div> <!--Ending: frame no.1-->

                

            

This frame is divided into 2 sections which are side bar & content container. In order to access this frame, use class="fr2"

                

                    <div class="fr2"> <!--Starting: frame no.2-->

                

            

Side bar can be on the left or the right depending on the class used. To implement side bar on the left, use class="fr2Ls_1"

                

                    <div class="fr2Ls_1"> <!--Starting: left side - fixed-->
                        
                        <ul> <!--Starting: side panel - main links-->
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 1</a>
                                <ul> <!--Starting: side panel - sub links-->
                                    <li><a class="fr2Ls_btn" href="#">Demo sub nav 1</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo sub nav 2</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo sub nav 3</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo sub nav 4</a></li>
                                    <li><a class="fr2Ls_btn" href="#">Demo sub nav 5</a></li>
                                </ul> <!--Ending: side panel - sub links-->
                            </li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 2</a></li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 3</a></li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 4</a></li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 5</a></li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 6</a></li>
                            <li><a class="fr2Ls_btn" href="#">Demo main nav 7</a></li>
                        </ul> <!--Ending: side panel - main links-->
                            
                    </div> <!--Ending: left side - fixed-->

                

            

To implement side bar on the right, use class="fr2Rs_2"

                

                    <div class="fr2Rs_2"> <!--Starting: right side - fixed-->
                        
                        <ul> <!--Starting: side panel - main links-->
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 1</a>
                                <ul> <!--Starting: side panel - sub links-->
                                    <li><a class="fr2Rs_btn" href="#">Demo sub nav 1</a></li>
                                    <li><a class="fr2Rs_btn" href="#">Demo sub nav 2</a></li>
                                    <li><a class="fr2Rs_btn" href="#">Demo sub nav 3</a></li>
                                    <li><a class="fr2Rs_btn" href="#">Demo sub nav 4</a></li>
                                    <li><a class="fr2Rs_btn" href="#">Demo sub nav 5</a></li>
                                </ul> <!--Ending: side panel - sub links-->
                            </li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 2</a></li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 3</a></li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 4</a></li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 5</a></li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 6</a></li>
                            <li><a class="fr2Rs_btn" href="#">Demo main nav 7</a></li>
                        </ul> <!--Ending: side panel - main links-->
                            
                    </div> <!--Ending: right side - fixed-->
                        
                    </div> <!--Ending: frame no.2-->

                

            

Content container can be on the left or the right depending on the class used. To implement content container on the left, use class="fr2Ls_2"

                

                    <div class="fr2Ls_2"> <!--Starting: left side - scrollable-->

                        <div> <!--Content container-->
                            <p>This is the main body container. You can add various content here.</p>
                        </div>
                                
                        <span> <!--Gap balancer for nav-->
                            <p>Gap for navbar.</p>
                        </span>
                            
                    </div> <!--Ending: left side - scrollable-->

                

            

To implement content container on the right, use class="fr2Rs_2"

                

                    <div class="fr2Rs_1"> <!--Starting: right side - scrollable-->
                        
                        <span> <!--Gap balancer for nav-->
                            <p>Gap for navbar.</p>
                        </span>
                        
                        <div> <!--Content container-->
                            <p>This is the main body container. You can add various content here.</p>
                        </div>
                            
                    </div> <!--Ending: right side - scrollable-->
                        
                    </div> <!--Ending: frame no.2-->

                

            

Form

Forms are a collection of inputs with labels. To make things easy and uncomplicated, form classes are divided into various sections.

To declare a particular div as a form element, use class="frmElm_#" here # is a placeholder for an integer value, which has a range of (1-15). Each values will lead to an unique input & label template design.

Note: Following markup example is suggested, while using form classes.

                

                    <div class="frmElm_1">

                        <label  for=""> Demo label </label>
                        <input  type="text">

                    </div>

                

            

Note: There will be a slight change in markup, while using frmElm_15 class. Follow the markup given below to avert issues.

                

                    <div class="frmElm_15">

                        <input type="text" required>
                        <label for="">Demo label</label>

                    </div>

                

            

To place effects on input fields, use class="effCont" on the container that holds the input field & class="eff_#" on the input field, here # is a placeholder for an integer value, which has a range of (1-3). Each values will lead to an unique effect.

Note: The effects will not display without the extra span tag.

                

                    <div class="frmElm_1 effCont">

                        <label for="">Demo label</label>
                        <input class="eff_1" type="text">
                        <span></span> <!--Important-->

                    </div>

                

            

To implement custom radio/checkbox designs, use class="radio_#" or class="check_#", here # is a placeholder for an integer value, which has a range of (1-8). Each values will lead to an unique design.

Note: Both classes are practically same, only markup varies from one another, also the design will not display without the extra span tag. The markup below is for, radio input types.

                

                    <div>

                        <label class="radio_1" for="Demo1">
                            <input type="radio" id="Demo1" name="1" value="">
                            <span></span> <!--Important-->
                            Demo 1
                        </label>

                        <label class="radio_1" for="Demo2">
                            <input type="radio" id="Demo2" name="1" value="">
                            <span></span> <!--Important-->
                            Demo 2
                        </label>

                        <label class="radio_1" for="Demo3">
                            <input type="radio" id="Demo3" name="1" value="">
                            <span></span> <!--Important-->
                            Demo 3
                        </label>

                    </div>

                

            

Note: The markup below is for, checkbox input types.

                

                    <div>

                        <label class="check_1" for="Demo1">
                            <input type="checkbox" id="Demo1" name="1" value="">
                            <span></span> <!--Important-->
                            Demo 1
                        </label>

                        <label class="check_2" for="Demo2">
                            <input type="checkbox" id="Demo2" name="2" value="">
                            <span></span> <!--Important-->
                            Demo 2
                        </label>

                        <label class="check_3" for="Demo3">
                            <input type="checkbox" id="Demo3" name="3" value="">
                            <span></span> <!--Important-->
                            Demo 3
                        </label>
                        
                    </div>

                

            

To implement custom radio/checkbox group designs, use class="radioFam_#" or class="checkFam_#" on the container that holds the radio or checkbox elements, here # is a placeholder for an integer value, which has a range of (1-3). Each values will lead to an unique group design.

Note: The markup below is for, radio input types.

                
                    
                    <div class="radioFam_3">

                        <input type="radio" id="Demo1" name="1" value="">
                        <label for="Demo1">Demo 1</label>

                        <input type="radio" id="Demo2" name="1" value="">
                        <label for="Demo2">Demo 2</label>

                        <input type="radio" id="Demo3" name="1" value="">
                        <label for="Demo3">Demo 3</label>

                    </div> 

                

            

Note: The markup below is for, checkbox input types.

                

                    <div class="checkFam_1">

                        <input type="checkbox" id="Demo1" name="1" value="">
                        <label for="Demo1">Demo 1</label>

                        <input type="checkbox" id="Demo2" name="2" value="">
                        <label for="Demo2">Demo 2</label>

                        <input type="checkbox" id="Demo3" name="3" value="">
                        <label for="Demo3">Demo 3</label>

                    </div>

                

            

To implement custom selector designs, use class="select_#" on the container that holds the selector elements, here # is a placeholder for an integer value, which has a range of (1-4). Each values will lead to an unique selector design.

Note: This will not work without the extra span tag.

                

                    <div class="select_1">

                        <label for="">I have a pet </label>

                        <select name="" id="">
                            <option value="">cat.</option>
                            <option value="">dog.</option>
                            <option value="">bird.</option>
                        </select>

                        <span></span> <!--Important-->

                    </div>

                

            

Note: There will be a slight change in markup, while using select_4 class. Follow the markup given below to avert issues.

                

                    <div class="select_4">

                        <label for="">I have a pet 
                            <select name="" id="">
                                <option value="">cat</option>
                                <option value="">dog</option>
                                <option value="">bird</option>
                            </select>
                            . His name is Bo.
                        </label>

                        <span></span> <!--Important-->

                    </div>

                

            

To implement custom file selectors, apply class="file_#" on the container that holds the selector elements also use class="fBtn" on the label tag & class="fName" on the input tag. The # is a placeholder for an integer value, which has a range of (1-3). Each values will lead to an unique file selector design.

                

                    <div class="file_1">

                        <label for="" class="fBtn">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </label>

                        <input class="fName" type="file" name="" id="">

                    </div>

                

            

Note: Following icons are supported in this design.

                         <i class="fas fa-cloud-upload-alt"></i> 
                    

                         <i class="fas fa-file-pdf"></i> 
                    

                         <i class="fas fa-file-alt"></i> 
                    

                         <i class="fas fa-file"></i> 
                    

                         <i class="fas fa-file-medical"></i> 
                    

                         <i class="fas fa-file-medical-alt"></i> 
                    

                         <i class="fas fa-file-archive"></i> 
                    

                         <i class="fas fa-file-video"></i> 
                    

                         <i class="fas fa-file-image"></i> 
                    

                         <i class="fas fa-file-audio"></i> 
                    

                         <i class="fas fa-compact-disc"></i> 
                    

                         <i class="fas fa-photo-video"></i> 
                    

To disable an input field, use class="disable" You can replace the default shade with other patterns. Click here to learn more about patterns.

Note: Using disable attribute in the markup will also activate this class. This is not recommended, because then the default shade will be fixed.

                

                    <div>

                        <label for="">Disabled</label>
                        <input class="disable" type="text">

                    </div>

                

            

To add validity checker on an input field, use class="valCheck"

Note: This will indicate invalid input with red & valid with green.

                

                    <div>

                        <label for="">Email</label>
                        <input class="valCheck" type="email">

                    </div>

                

            

To add custom form buttons, use class="#btn*" here # is a placeholder for button type, which are form, success, danger & pending & * is a placeholder for border radius confirmation, to use rounded buttons replace * with R otherwise omit *.

Note: A basic design will be provided to button tag by default.

                         <button>Demo button</button> 
                    

                         <input class="frmBtn" value="Demo button" type="button"> 
                    

                         <input class="successBtn" value="Demo button" type="button"> 
                    

                         <input class="dangerBtn" value="Demo button" type="button"> 
                    

                         <input class="pendingBtn" value="Demo button" type="button"> 
                    

                         <input class="frmBtnR" value="Demo button" type="button"> 
                    

                         <input class="successBtnR" value="Demo button" type="button"> 
                    

                         <input class="dangerBtnR" value="Demo button" type="button"> 
                    

                          <input class="pendingBtnR" value="Demo button" type="button"> 
                    

Table

To access tables using provided classes a proper table structure is needed. This will not work if table is constructed using div tags instead of table tags. Types of table that can be created:

There are 4 basic tables. In order to access basic tables, use class="tableBasic#" Here # is a placeholder for Black, Blue and Dark. # can also be null.

                

                    <table class="tableBasic pinPoint">//pinPoint is experimental and will only be functional with this class.
                        <tr>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table>

                

            

There are 2 classic tables. In order to access classic tables, use class="tableClassic#" Here # is a placeholder for Black & Blue. # can not be null.

                

                    <table class="tableClassicBlack">
                        <tr>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table>

                

            

There are 2 calendar tables. In order to access calender tables, use class="tableCalendar#" Here # is a placeholder for Black & Blue. # can not be null.

                

                    <table class="tableCalendarBlack">
                        <tr>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table>

                

            

There are 2 modern tables. In order to access modern tables, use class="tableModern#" Here # is a placeholder for Black & Blue. # can not be null. width attribute is required for this class.

                

                    <table class="tableModernBlack">
                        <tr>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                    </table>

                

            

There are 2 stacked tables. In order to access stacked tables, use class="tableStacked#" Here # is a placeholder for Black & Blue. # can not be null.

                

                    <table class="tableStackedBlack">
                        <tr>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                            <th>header</th>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                            <td>data</td>
                        </tr>
                    </table>

                

            

There are 2 shredded tables. In order to access shredded tables, use class="tableShredded#" Here # is a placeholder for Black & Blue. # can not be null. width attribute is required for this class.

                

                    <table class="tableShreddedBlack">
                        <tr>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                    </table>

                

            

There's only 1 zig zag tables. In order to access zigzag table, use class="tableZigZag" width attribute is required for this class.

                

                    <table class="tableZigZag">
                        <tr>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                            <th width="25%">header</th>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                        <tr>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                            <td width="25%">data</td>
                        </tr>
                    </table>

                

            

Patterns

This framework has a number of built in patterns that can be used as backgrounds. These patterns can be easily over written by basic classes, at any given point.

To set background as png, use class="png#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can't be changed using background colors. Using background colors will result in over writing this pattern.

                

                    <div class="png"> </div>

                

            

To set background as box, use class="box#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can't be changed using background colors. Using background colors will result in over writing this pattern.

                

                    <div class="box"> </div>

                

            

To set background as check board, use class="checkBoard"

Note: Pattern colors can't be changed using background colors. Using background colors will result in over writing this pattern.

                

                    <div class="chackBoard"> </div>

                

            

To set background as ruby, use class="ruby#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can be changed using background colors. Go to colors to check all available background colors.

                

                    <div class="ruby"> </div>

                

            

To set background as clover, use class="clover#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can be changed using background colors. Go to colors to check all available background colors.

                

                    <div class="clover"> </div>

                

            

To set background as rainbow, use class="rainbow#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can't be changed using background colors. Using background colors will result in over writing this pattern.

                

                    <div class="rainbow"> </div>

                

            

To set background as target, use class="target#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can be changed using background colors. Go to colors to check all available background colors.

                

                    <div class="target"> </div>

                

            

To set background as net, use class="net#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can be changed using background colors. Go to colors to check all available background colors.

                

                    <div class="net"> </div>

                

            

To set background as shade, use class="shade#" here # is a placeholder for color names. Supported colors are"Black, Blue, Green, Orange, Purple, Red" & "Yellow". Each color value has a light version, to use light version type "Light" after the color name.

Note: Pattern colors can't be changed using background colors. Using background colors will result in over writing this pattern.

                

                    <div class="shade"> </div>