Hi, welcome to the framework,
1.0.0TcSS stands for Thasin's Cascading Style Sheet. This is a free to use CSS framework made by Sass (Syntactically Awesome Style Sheets). Read the documentation to understand about the predefined classes.

Hi, I'm Thasin.
This is a short note, most of the UI component are already made in advance. All the default styles of previously made UI components are modifiable. You can also write you own CSS and include them in the project, doing so will override all predefined UI components. Check the Basic portion to get yourself acquainted with the framework. Enjoy 😊
CDN
Use these CDN to use TcSS in your project. Wish you all the best.
No traffic limits or throttling. Files are served via CloudFlare's CDN.
Files can be automatically optimized if added ?min=1 query parameter.
Using a specific tag or commit hash in the URL (not a branch). Files are cached permanently based on the URL. Query string is ignored. Online
<link rel="stylesheet" href="https://rawcdn.githack.com/Thasinmahmudbd/TcSS-Framework/8272c261b90f1bd691ade6402fa9f73ada36fa12/dist/css/tcss.min.css">
Version change pushes are reflected within minutes.
Excessive traffic are throttled. Pending
<link rel="stylesheet" href="https://raw.githack.com/Thasinmahmudbd/TcSS-Framework/Thasin/dist/css/tcss.min.css">
This is a backup CDN. Offline
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Thasinmahmudbd/TcSS-Framework/dist/css/tcss.min.css">
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.
All
Top
Right
Bottom
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.
Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset
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.
All
Top Left
Top Right
Bottom Left
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.
Ex
Note: You need to set the size first in order to use border colors.
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.
All
Top
Right
Bottom
Left
Note: This class is only useful if there is an existing border beforehand.
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.
Top
Right
Bottom
Left
Note: This class is only useful if there is an existing border beforehand.
This framework currently supports 6 fonts. They are:
Fonts | Default | Thin | Light | Regular | Medium | Bold | Bolder |
---|---|---|---|---|---|---|---|
Nunito | |||||||
OpenSans | |||||||
Roboto | |||||||
Lato | |||||||
Montserrat | |||||||
MonteCarlo |
To use defaults, simply type in the font in camelCase. Example: type class="openSans" to use the default OpenSans font.
<p class="nunito"> </p>
This is default version of nunito.
<p class="openSans"> </p>
This is default version of openSans.
<p class="roboto"> </p>
This is default version of roboto.
<p class="lato"> </p>
This is default version of lato.
<p class="montserrat"> </p>
This is default version of montserrat.
<p class="monteCarlo"> </p>
This is default version of monteCarlo.
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.
Example: I am written in 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>
this is an example
<p class="uppercase"> this is an example </p>
this is an example
<p class="lowercase"> This IS aN ExamPle </p>
This IS aN ExamPle
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>
Try to select me
You can change modes.
<p class="horModeTb"> Horizontal </p>
Horizontal
<p class="verModeLr"> Vertical 1 </p>
Vertical 1
<p class="verModeRl"> Vertical 2 </p>
Vertical 2
To style a link in paragraph use class="link".
<a class="link" href="#"> click me </a>
click me
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>
This portion is highlighted
<a class="highlightSuccess"> This portion is highlighted </a>
This portion is highlighted
<a class="highlightDanger"> This portion is highlighted </a>
This portion is highlighted
<a class="highlightAlert"> This portion is highlighted </a>
This portion is highlighted
<a class="highlightLink"> This portion is highlighted </a>
This portion is highlighted
You can add outline all around your markup using. Keep in mind outline and border are not the same.
lorem ipsum
Here the red is outline and green is border.
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>
Offset 1
Offset 5
Here the red is outline and green is border.
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.
Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset
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>
- Dics
- Dics
- Armenian
- Armenian
- Circle
- Circle
- Square
- Square
- Dec
- Dec
- DecFrom_0
- DecFrom_0
- Georgian
- Georgian
- LowerAlpha
- LowerAlpha
- LowerGreek
- LowerGreek
- LowerLatin
- LowerLatin
- LowerRoman
- LowerRoman
- UpperAlpha
- UpperAlpha
- UpperLatin
- UpperLatin
- UpperRoman
- UpperRoman
- None
- None
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.
Example: My background is Golden.
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:
Box 01
Box 02
Box 03
Box 04
Box 05
<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:
Box 01
Box 02
Box 03
Box 04
Box 05
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:
Box 01
Box 02
Box 03
Box 04
Box 05
<div class="gridRow_2_size_7_3">
<p> Box 01 </p>
<p> Box 02 </p>
</div>
Example:
Box 01
Box 02
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.
It can be "mobile, tablet" or "pc".
<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:
Box 01
Box 02
<div class="flexDirRevCol">
<p> Box 01 </p>
<p> Box 02 </p>
</div>
Example:
Box 01
Box 02
<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:
Box 01
Box 02
Box 03
Box 04
Box 05
<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:
Box 01
Box 02
Box 03
Box 04
Box 05
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.
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
None
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="">
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>
Preview generation is not possible. Click here to see the full navbar.
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.-->
Preview: Click on non sticky or sticky to see preview.
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-->
Preview: Click here to see a full preview of frame 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-->
Preview: Click here to see a full preview of frame 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>
frmElm_1
frmElm_2
frmElm_3
frmElm_4
frmElm_5
frmElm_6
frmElm_7
frmElm_8
frmElm_9
frmElm_10
frmElm_11
frmElm_12
frmElm_13
frmElm_14
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>
eff_1
eff_2
eff_3
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>
radio_1
radio_2
radio_3
radio_4
radio_5
radio_6
radio_7
radio_8
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>
check_1
check_2
check_3
check_4
check_5
check_6
check_7
check_8
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>
radioFam_1
radioFam_2
radioFam_3
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>
radioFam_1
radioFam_2
radioFam_3
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>
select_1
select_2
select_3
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>
select_1
select_2
select_3
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>
This field requires an email.
This field requires a number between 0 to 9.
This field requires only numbers, no text allowed.
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
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>
header | header | header | header |
---|---|---|---|
data | data | data | data |
data | data | data | data |
data | data | data | data |
data | data | data | data |
Scrollers are built in scrollable areas. There are 2 types of scrollers based on scroll direction. They are Vertical & Horizontal.
Enable Vertical Scroller by using class="vScrlr_#" here # is a placeholder for scroller height. It is an integer value, which has a range of {(100+n)<=2000}. Here the unit is px & n=50.
<div class="vScrlr_100">
<div class="vScrlrElm">Content 1</div>
<div class="vScrlrElm">Content 2</div>
<div class="vScrlrElm">Content 3</div>
<div class="vScrlrElm">Content 4</div>
<div class="vScrlrElm">Content 5</div>
</div>
Enable Vertical Scroller by using class="vScrlr_#" here # is a placeholder for visible content box on screen. It is an integer value, which has a range of (0-10).
<div class="hScrlr_4">
<div class="hScrlrElm">Content 1</div>
<div class="hScrlrElm">Content 2</div>
<div class="hScrlrElm">Content 3</div>
<div class="hScrlrElm">Content 4</div>
<div class="hScrlrElm">Content 5</div>
</div>
Note: Images can be added. Added image will receive default style.
<div class="hScrlr_4">
<div class="hScrlrElm">
<img src="file location" alt="">
<p>Content 1</p>
</div>
</div>

Content 1

Content 2

Content 3

Content 4

Content 5
Note: Background colors were added separately. Color used 'bgAbbeyWhite'.
Scroller elements are tags in side scroller div tag. Make scroller elements by using class="#ScrlrElm" here # is a placeholder for scroller type. It can be v or h.
To add scroll snap use class="snapInline" this will only work with horizontal scroll.
<div class="hScrlr_4 snapInline">
<div class="hScrlrElm">Content 1</div>
<div class="hScrlrElm">Content 2</div>
<div class="hScrlrElm">Content 3</div>
<div class="hScrlrElm">Content 4</div>
<div class="hScrlrElm">Content 5</div>
</div>
To implement scroll fix use class="hScrlrPFix_#px" here # is a placeholder for an integer value, which has a range of (0-1000). This will only work with horizontal scroll.
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>
png
pngLight
pngBlack
pngBlackLight
pngBlue
pngBlueLight
pngGreen
pngGreenLight
pngOrange
pngOrangeLight
pngPurple
pngPurpleLight
pngRed
pngRedLight
pngYellow
pngYellowLight
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>
box
boxLight
boxBlack
boxBlackLight
boxBlue
boxBlueLight
boxGreen
boxGreenLight
boxOrange
boxOrangeLight
boxPurple
boxPurpleLight
boxRed
boxRedLight
boxYellow
boxYellowLight
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>
checkBoard
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>
ruby
rubyBlack
rubyBlackLight
rubyBlue
rubyBlueLight
rubyGreen
rubyGreenLight
rubyOrange
rubyOrangeLight
rubyPurple
rubyPurpleLight
rubyRed
rubyRedLight
rubyYellow
rubyYellowLight
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>
clover
cloverBlack
cloverBlackLight
cloverBlue
cloverBlueLight
cloverGreen
cloverGreenLight
cloverOrange
cloverOrangeLight
cloverPurple
cloverPurpleLight
cloverRed
cloverRedLight
cloverYellow
cloverYellowLight
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>
rainbow
rainbowBlack
rainbowBlackLight
rainbowBlue
rainbowBlueLight
rainbowGreen
rainbowGreenLight
rainbowOrange
rainbowOrangeLight
rainbowPurple
rainbowPurpleLight
rainbowRed
rainbowRedLight
rainbowYellow
rainbowYellowLight
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>
target
targetBlack
targetBlackLight
targetBlue
targetBlueLight
targetGreen
targetGreenLight
targetOrange
targetOrangeLight
targetPurple
targetPurpleLight
targetRed
targetRedLight
targetYellow
targetYellowLight
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>
net
netBlack
netBlackLight
netBlue
netBlueLight
netGreen
netGreenLight
netOrange
netOrangeLight
netPurple
netPurpleLight
netRed
netRedLight
netYellow
netYellowLight
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>
shade
shadeLight
shadeBlack
shadeBlackLight
shadeBlue
shadeBlueLight
shadeGreen
shadeGreenLight
shadeOrange
shadeOrangeLight
shadePurple
shadePurpleLight
shadeRed
shadeRedLight
shadeYellow
shadeYellowLight