Documentation

logo

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/Compression

Before 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 Transform

Now 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 block

This 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
This is the final snippet

<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