Documentation

Tips / Some useful Stuff
Helper Classes Some helper classes, built to make web designing faster.# | Helper Class | uses |
---|---|---|
1 | .font-hind | Apply font 'Hind Madurai' |
2 | .font-pt-serif | Apply font 'PT Serif' |
3 | .font-pt-serif-italic | Apply font 'PT Serif Italics' |
4 | .font-poppins | Apply font 'Poppins' |
5 | .font-playfair | Apply font 'Playfair Display' |
6 | .font-playfair-italic | Apply font 'Playfair Display Italics' |
7 | .font-w300 | Keep font weight @ 300 |
8 | .font-w400 | Keep font weight @ 400 |
9 | .font-w500 | Keep font weight @ 500 |
10 | .font-w600 | Keep font weight @ 600 |
11 | .font-w700 | Keep font weight @ 700 |
11 | .section-padding-zero | Make section padding 0px from all sides |
12 | .section-padding | General Section Padding (120px 0px 120px 0px) |
13 | .section-padding-small | Small Section Padding (60px 0px 60px 0px) |
14 | .center-block-1 | Keep content block @ center with 540px width |
15 | .center-block-2 | Keep content block @ center with 620px width |
16 | .center-block-3 | Keep content block @ center with 740px width |
17 | .just-center | Keep content block @ center |
18 | .content-wrapper | Content Wrapper |
19 | .all-details-wrapper | Same as Content Wrapper with smaller Top Margin |
20 | .letter-spacing-close | Letter Spacing with -1px |
21 | .letter-spacing-ultraclose | Letter Spacing with -3px |
22 | .letter-spacing0 | Letter Spacing with 0px |
23 | .letter-spacing1 | Letter Spacing with 1px |
24 | .letter-spacing2 | Letter Spacing with 2px |
25 | .letter-spacing3 | Letter Spacing with 3px |
26 | .line-height | Line Height by 22px |
27 | .line-height-med | Line Height by 25px |
28 | .line-height-big | Line Height by 28px |
29 | .line-height-large | Line Height by 31px |
30 | .line-height-ultra | Line Height by 33px |
31 | .hr-left | Keep Horizontal Rule @ left side |
32 | .hr-small | Small Horizontal Rule with 50px width |
33 | .hr-med | Medium Horizontal Rule with 200px width |
34 | .hr-dark | Dark Horizontal Rule |
35 | .hr-semi-dark | Little Dark Horizontal Rule |
36 | .hr-white | White Horizontal Rule |
37 | .hr-black | Black Horizontal Rule |
38 | .text-small | Small Text |
39 | .text-med | Medium Sized Text |
40 | .text-large | Large Sized Text (15px) |
41 | .text-extra-large | Extra Large Sized Text (16px) |
42 | .text-ultra | Ultra Sized Text (32px) |
43 | .text-underline | Text Underline |
44 | .text-italics | Text Style Italics |
45 | .text-grey | Grey Colour text |
46 | .text-dark-grey | Dark Grey Colour text |
47 | .text-light-grey | Light Grey Colour text |
48 | .text-white | White Colour text |
49 | .text-black | Black Colour text |
50 | .text-blue | Blue Colour text |
51 | .bg-blue | Blue Background |
52 | .bg-black | Black Background |
53 | .bg-white | White Background |
54 | .subh-basic-light | Light Sub-Heading |
55 | .subh-basic-dark | Dark Sub-Heading |
56 | .subtext | Sub-Text |
57 | .overflow-hidden | Overflow Hidden |
58 | .display-block | Display Element - Block |
59 | .display-inline | Display Element - Inline Block |
60 | .display-table | Display Element - Table |
61 | .img-center | Align Image @ center |
62 | .opacity-light | Light Opacity (0.5) |
63 | .opacity-medium | Medium Opacity (0.7) |
64 | .opacity-full | Full Opacity (0.8) |
65 | .left | Float Element to the Left |
66 | .right | Float Element to the right |
67 | .no-float | No Floating |
68 | .bg-cover | Background Cover with fixed back. attahchment use for parallax |
69 | .bg-cover-simple | Simple background cover |
For Padding,Margin related and other classes, please refer main.style.css
Minification/CompressionBefore uploading your HTML, CSS, Js, Image and video files; make sure to compress those files so that your webpage will considerably load faster. You can use third party tools for that purpose.
Some of HTML/CSS/JS Compression Tools Some of Image Compression Tools Some of Video Compression Tools Working with CSS3 TransformNow a days we come across so many websites having some CSS3 transform effects like we implemented in .team-4. Let's start with some basic example,
First of all create a basic blockThis is a block
<div class="effect">
<p>This is a block</p>
</div>
<!-- CSS Style -->
.effect {
display:block;
width:200px;
height:150px;
background:#CCCCCC;
padding:20px;
text-align:center;
margin:10px 0px;
position:relative;
}
Now create a <div>...</div> to display on hover with position:absolute
This is a block
This info. display's on hover
<div class="effect">
<p>This is a block</p>
<div class="hover-effect">This info. display's on hover</div>
</div>
<!-- CSS Style -->
.effect {
display:block;
width:200px;
height:150px;
background:#CCCCCC;
padding:20px;
text-align:center;
margin:10px 0px;
position:relative;
}
.effect .hover-effect {
position:absolute;
background:#111111;
color:#FFFFFF;
width:100%;
display:block;
bottom:0;
left:0;
padding:20px;
}
Now use transform: translateX(100%); on .hover-effect to traslate it to the right
This is a block
This info. display's on hover
.effect .hover-effect {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
Now translate .hover-effect to the left side on hover. Please try to mouse hover .effect block.
This is a block
This info. display's on hover
.effect:hover .hover-effect {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
Now animate the effect and hide the .hover-effect block. Please try to mouse hover .effect block.
This is a block
This info. display's on hover
<div class="effect">
<p>This is a block</p>
<div class="hover-effect">This info. display's on hover</div>
</div>
/* CSS Style */
.effect {
display:block;
width:200px;
height:150px;
background:#CCCCCC;
padding:20px;
text-align:center;
margin:10px 0px;
position:relative;
overflow:hidden;
cursor:pointer;
}
.effect .hover-effect {
position:absolute;
background:#111111;
color:#FFFFFF;
width:100%;
display:block;
bottom:0;
left:0;
padding:20px;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.effect:hover .hover-effect {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
Before using this CSS3 2D Transforms please chekout,
its compatibility with different browsers Here on caniuse.com/transforms2d