Documentation

documentation for Polar HTML template

Thank you very much for purchasing Polar!

If you have any issue or question that this document does not cover, feel free to post it on Wegrass Support Forum

Devices

  • devices class : ipad-portrait, ipad-landscape, iphone-portrait, iphone-landscape, android-phone-portrait, android-phone-landscape, android-tablet-portrait, android-tablet-landscape, window-phone-portrait, window-phone-landscape, macbook
<!-- Change "ipad-portrait" to any value from list above -->
<div id="product-container" class="container ipad-portrait">
...
</div>

Screen Size

  • iPad - Portrait : 382 x 520
  • iPad - Landscape : 556 x 380
  • iPhone - Portrait : 334 x 450
  • iPhone - Landscape : 480 x 310
  • Android Phone - Portrait : 338 x 450
  • Android Phone - Landscape : 328 x 480
  • Android Tablet - Portrait : 400 x 550
  • Android Tablet - Landscape : 594 x 400
  • Window Phone - Portrait : 328 x 480
  • Window Phone - Landscape : 540 x 320
  • Macbook : 680 x 400

Scheme

you can define dark/light version by adding class "light" or "dark" to body tag.

<body class="light"> ... </body>
<body class="dark"> ... </body>

you can define color scheme at /css/custom.css

/* # SCHEME
example: #e90000, #0095e2, #ff4100, #9EC408, #333
-------------------------------------*/
a { color: #0095e2; }
.icon, #content .section-title span em {
  background-color: #0095e2; }

Splash Background

  • color : change it at /css/custom.css
  • image : replace the file /images/bg.jpg
  • texture class : diagonal-1, diagonal-2, grain, grid-black-1, grid-black-2, grid-black-3, grid-black-4, grid-white-1, grid-white-2, grid-white-3, grid-white-4, mosaic
<section id="splash">
	...
	<div class="pattern"></div>
	<div class="inner-shadow"></div>
</section><!-- #splash -->

Border

  • color : change it at /css/custom.css
  • texture class : grass, grain, grunge, wood
<div id="border" class="wood">
	<div id="border-top"></div>
	<div id="border-body"></div>
	<div class="drop-shadow"></div>
</div><!-- #border -->

Google Web Font

You can change font face at /css/custom.css. Find all fonts list on : http://www.google.com/webfonts

Utility Class

Responsive Visible & Hidden

  • visible : visible-desktop, visible-tablet, visible-phone
  • hidden : hidden-desktop, hidden-tablet, hidden-phone
Desktop Tablet Phone
.visible-desktop Show
.visible-tablet Show
.visible-phone Show
Desktop Tablet Phone
.hidden-desktop Show Show
.hidden-tablet Show Show
.hidden-phone Show Show

MailChimp Subscribe Form

  1. Register MailChimp account at https://mailchimp.com/signup/ and then login to your MailChimp account
  2. Create List : List > Create List
  3. Open File /php/config.inc.php located in your download package
  4. Fill in MailChimp API Key - see http://admin.mailchimp.com/account/api
  5. Fill in List ID - MailChimp Account > List > Setting > List Setting and Unique ID
  6. Save file and use markup below.
<form action="/php/subscribe.php" method="post" data-mailchimp="">
	<div class="input">
		<label for="subscribe-email">Your Email <em>*</em></label>
		<input type="text" id="subscribe-email" name="subscribe-email" class="{required:true, email:true}" />
	</div>
	<div class="form-respond"><strong>Sending ...</strong></div>
	<div class="input">
		<div class="button secondary submit">
			<a href="#"><span>Subscribe</span></a>
		</div>
	</div>
</form>

Contact Form

  1. Open File /php/config.inc.php located in your download package.
  2. At "Contact Form" section, fill in value by follow the instruction in the config file.
  3. Save file and use markup below.
<form action="/php/contact.php" method="post">
	<input type="text" name="email" class="pot" />
	<div class="input">
		<label for="name">Your Name <em>*</em></label>
		<input type="text" id="name" name="name" class="{required:true}" />
	</div>
	<div class="input">
		<label for="email-r">Your Email <em>*</em></label>
		<input type="text" id="email-r" name="email-r" class="{required:true, email:true}" />
	</div>
	<div class="input">
		<label for="contact-message">Message</label>
		<textarea id="contact-message" name="contact-message" rows="8" /></textarea>
	</div>
	<div class="form-respond"><strong>Sending ...</strong></div>
	<div class="input">
		<div class="button secondary submit">
			<a href="#"><span>Submit</span></a>
		</div>
	</div>
</form>

Layout

<!-- Full Width -->
<section> <!-- Wrap each block with "section" tag -->
	<div class="container">
		<!-- Content Here -->
	</div>
</section>

<!-- one_half / one_half -->
<section>
	<div class="container">
		<div class="one_half"> <!-- Content Here --> </div>
		<div class="one_half last"> <!-- Content Here --> </div>
	</div>
</section>

<!-- one_third / two_third -->
<section>
	<div class="container">
		<div class="one_third"> <!-- Content Here --> </div>
		<div class="two_third last"> <!-- Content Here --> </div>
	</div>
</section>

<!-- two_third / one_third -->
<section>
	<div class="container">
		<div class="two_third"> <!-- Content Here --> </div>
		<div class="one_third last"> <!-- Content Here --> </div>
	</div>
</section>

Slider

Slider's height will be its' content max height.

<div class="flexslider">
	<ul class="slides">
		<li><img src="../images/sample/slide-1.jpg" /></li>
		<li><img src="../images/sample/slide-2.jpg" /></li>
	</ul>
</div>

Gallery

<div class="frame">
	<ul class="gallery-list">
		<li class="greyscale"><a href="..." class="modal-gallery"><img src="..." alt="img"></a></li>
		<li class="greyscale"><a href="..." class="modal-gallery"><img src="..." alt="img"></a></li>
	</ul>
</div>

Elements

Icons

<i class="icon-adjust"></i>
<i class="icon-asterisk"></i>

Rating

.rating-fill : width = 226 * rating(0-5) / 5
for example : 4.5 stars = 226 * 4.5 / 5

<div class="rating">
	<div style="width:203px;" class="rating-fill"></div>
	4.5 stars <small>on</small> ThemeForest Market
</div>

Pricing Table

<div class="pricing-box ">
	<div class="header">
		<div class="package">Basic Package</div>
		<div class="price">$49.00 <small>/ month</small></div>
	</div>
	<div class="content">
		<ul>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Nulla elementum velit ut purus.</li>
		</ul>
		<a class="button yellow" href="#"><span>Signup Now</span></a>
	</div>
	<div class="ribbon"></div>
</div>

Toggle

<div class="toggle">
	<div class="tab"><i class="icon-plus"></i><i class="icon-minus"></i>In ut massa massa, feugiat interdum lorem</div>
	<div class="pane">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>

Tab

<div class="tabs-wrap" data-initial-tab="2">
	<ul class="tabs">
		<li><a href="#">Tab #1</a></li>
		<li><a href="#">Tab #2</a></li>
	</ul>
	<div class="panes">
		<div class="pane"><p>Lorem ipsum dolor sit amet, consectetur.</p></div>
		<div class="pane"><p>Vestibulum mattis lacus at erat cursus ac.</p></div>
	</div>
</div>

Button

  • color : black, blue, green, magenta, orange, red, yellow
<div class="button button-icon blue">
	<a href="#"><span><i class="icon-ok"></i>$3.99 <small>Window App Store</small></span></a>
</div>

<div class="button button-icon black">
	<a href="#"><span><i class="icon-android"></i>$3.99 <small>Google Play Market</small></span></a>
</div>

Map

  • data-lat : latitude
  • data-long : longituide
  • data-zoom : zoom level
<div id="map" style="height: 250px;" data-lat="14.26438308756265" data-long="100.1953125" data-zoom="5"></div>

Modal Link

  • class : modal-image, modal-vimeo, modal-youtube
<a href="../images/sample/image-1.jpg" class="modal-image" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">Image Lighbox</a>
<a href="http://www.youtube.com/watch?v=J_UBKHxTkgI" class="modal-youtube">Youtube Modal</a>
<a href="http://vimeo.com/27299211" class="modal-vimeo">Vimeo Modal</a>

<div class="button">
	<a href="../images/sample/image-1.jpg" class="modal-image" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
		<span>Image Modal</span>
	</a>
</div>

<div class="button">
	<a href="http://www.youtube.com/watch?v=J_UBKHxTkgI" class="modal-youtube">
		<span>Youtube Modal</span>
	</a>
</div>

<div class="button">
	<a href="http://vimeo.com/27299211" class="modal-vimeo">
		<span>Vimeo Modal</span>
	</a>
</div>

Quote

<blockquote>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula laoreet gravida. Pellentesque sagittis tincidunt mauris id venenatis. Vestibulum rhoncus rhoncus auctor. Duis rhoncus, diam ut interdum fermentum.</p>
	<div class="rating-small-wrap">
		<!-- .rating-small width = 112 * rating(0-5) / 5 -->
		<div style="width:112px;" class="rating-small-fill"></div>
	</div>
	<p class="cite"><cite>John Doe</cite></p>
</blockquote>

Sample Content

5 stars on ThemeForest Market
<div class="rating">
	<div style="width:226px;" class="rating-fill"></div>
	5 stars <small>on</small> ThemeForest Market
</div>

12 Showcase Devices

Pellentesque ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.

Fully Responsive

Maecenas ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.

Easily Customizable

Maecenas ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.

HTML 5 & CSS3

Lorem posuere luctus nisi, in rutrum erat egestas ac. Aliquam eu sollicitudin sapien. Nullam nulla est, rhoncus a porttitor sit amet.

<div class="one_half">
	<h3><span class="icon"></span> Easily Customizable</h3>
	<div class="clear"></div>
	<p>Maecenas ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.</p>
</div>
<div class="one_half last">
	<h3><span class="icon"></span> HTML 5 & CSS3</h3>
	<div class="clear"></div>
	<p>Lorem posuere luctus nisi, in rutrum erat egestas ac. Aliquam eu sollicitudin sapien. Nullam nulla est.</p>
</div>
<div class="flexslider">
	<ul class="slides">
		<li><img src="../images/sample/slide-1.jpg" /></li>
		<li><img src="../images/sample/slide-2.jpg" /></li>
	</ul>
</div>
<div class="slide-control"></div>

Consectetur Adipiscing Elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum augue et felis dapibus luctus. Donec sit amet ultrices leo. Vestibulum odio enim

<div class="one_half">
	<div class="frame"><a href="../images/sample/image-1.jpg" class="modal-image" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img src="../images/sample/image-1.jpg" /></a></div>
</div>

<div class="one_half last">
	<h3>Consectetur Adipiscing Elit</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum augue et felis dapibus luctus. Donec sit amet ultrices leo. Vestibulum odio enim</p>
	<div class="button blue">
		<a href="http://wegrass.com"><span>More Info</span></a>
	</div>
</div>

Consectetur Adipiscing Elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum augue et felis dapibus luctus. Donec sit amet ultrices leo. Vestibulum odio enim

<div class="one_half align-right">
	<h3>Consectetur Adipiscing Elit</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum augue et felis dapibus luctus. Donec sit amet ultrices leo. Vestibulum odio enim</p>
	<div class="button magenta">
		<a href="http://wegrass.com"><span>More Info</span></a>
	</div>
</div>

<div class="one_half last">
	<div class="frame"><img src="../images/sample/image-2.jpg" /></div>
</div>
Basic Package
$39.00 / month
  • Lorem ipsum dolor sit amet
  • Nulla elementum velit ut purus porttitor non rutrum eros scelerisque
  • Nam vel ipsum purus
  • Phasellus sit amet mauris
Signup Now
Basic Package
$49.00 / month
  • Lorem ipsum dolor sit amet
  • Nulla elementum velit ut purus porttitor non rutrum eros scelerisque
  • Nam vel ipsum purus
  • Phasellus sit amet mauris
Signup Now
Basic Package
$59.00 / month
  • Lorem ipsum dolor sit amet
  • Nulla elementum velit ut purus porttitor non rutrum eros scelerisque
  • Nam vel ipsum purus
  • Phasellus sit amet mauris
Signup Now
<div class="one_third">
	<div class="pricing-box ">
		<div class="header">
			<div class="package">Basic Package</div>
			<div class="price">$49.00 <small>/ month</small></div>
		</div>
		
		<div class="content">
			<ul>
				<li>Lorem ipsum dolor sit amet</li>
				<li>Nulla elementum velit ut purus porttitor non rutrum eros scelerisque</li>
				<li>Nam vel ipsum purus</li>
				<li>Phasellus sit amet mauris</li>
			</ul>
			<a class="button yellow" href="#"><span>Signup Now</span></a>
		</div>
		<div class="ribbon"></div>
	</div>
</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula laoreet gravida. Pellentesque sagittis tincidunt mauris id venenatis. Vestibulum rhoncus rhoncus auctor. Duis rhoncus, diam ut interdum fermentum.

    John Doe

  • Morbi malesuada, tortor eu cursus mattis, nunc leo pretium orci, non pharetra neque turpis at odio. In egestas magna non nunc hendrerit adipiscing eget eu erat.

    John Doe

  • Morbi malesuada, tortor eu cursus mattis, nunc leo pretium orci, non pharetra neque turpis at odio. In egestas magna non nunc hendrerit adipiscing eget eu erat.

    John Doe

<div class="flexslider">
	<ul class="slides">
		<li>
			<blockquote>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula.</p>
				<div class="rating-small-wrap">
					<div style="width:112px;" class="rating-small-fill"></div>
				</div>
				<p class="cite"><cite>John Doe</cite></p>
			</blockquote>
		</li>
		<li>
			<blockquote>
				<p>Morbi malesuada, tortor eu cursus mattis, nunc leo pretium orci.</p>
				<div class="rating-small-wrap">
					<div style="width:112px;" class="rating-small-fill"></div>
				</div>
				<p class="cite"><cite>John Doe</cite></p>
			</blockquote>
		</li>
	</ul>
</div>
<div class="slide-control"></div>

We are located in Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.

johndoe@gmail.com 1234568, 1234568 1234568, 1234568 1234568, 1234568

Sending…
<div class="frame">
<div class="map-wrap">
		
	<div id="map" style="height: 700px;" data-lat="-12.043333" data-long="-77.028333"></div>

	<div class="contact-info-pane">
		<p>We are located in Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat, libero non elementum aliquam.</p>

		<p>
			<span class="info"><i class="icon-envelope-alt"></i> johndoe@gmail.com</span>
			<span class="info"><i class="icon-mobile-phone"></i> 1234568, 1234568</span>
			<span class="info"><i class="icon-phone"></i> 1234568, 1234568</span>
			<span class="info"><i class="icon-print"></i> 1234568, 1234568</span>
		</p>

		<form action="/php/contact.php" method="post">
			<input type="text" name="email" class="pot" />
			<div class="input">
				<input type="text" id="name" name="name" class="{required:true}" placeholder="Name" />
			</div>
			<div class="input">
				<input type="text" id="email-r" name="email-r" class="{required:true, email:true}" placeholder="Email" />
			</div>

			<!-- 	Additional Field 
					Use name="add[*]", where * is the information name, you wish to show in Email.
			-->
			<div class="input">
				<input type="text" id="phone" name="add[Phone Number]" class="{required:false}" placeholder="Phone Number" />
			</div>

			<div class="input">
				<textarea id="contact-message" name="contact-message" rows="8" placeholder="Message"></textarea>
			</div>
			<div class="form-respond"><strong>Sending…</strong></div>
			<div class="input">
				<div class="button small secondary submit">
            		<a href="#">	            		
            			<span>Submit</span>
            		</a>
            	</div>
			</div>
		</form>
	</div>

</div>
</div><!-- .frame -->
Sending ...
<form action="/php/subscribe.php" method="post" data-mailchimp="">
	<div class="two_third">
		<div class="input subscribe-wrap">
			<input type="text" id="subscribe-email" name="subscribe-email" class="{required:true, email:true}" placeholder="Your Email" />
			<div class="button secondary submit">
        		<a href="#"><span>Subscribe</span></a>
        	</div>
		</div>
	</div>
	
	<div class="two_third">
   		<div class="form-respond"><strong>Sending ...</strong></div>
   	</div>
</form>