This is the documentation page for default/HTML version of Urip Landing Page. If you're looking for the documentation for Urip Builder please visit Builder Documentation.

1. Structure

All files and folders are well organized.

2. Header & Nav Menu

2.1 Header & Logo

Above is the screenshot of the header, there you will find two anchor links, one is for your logo and another one is the sliding menu trigger.

To change the logo, you can simply adjust the image source into the path of your logo file.

2.2 Nav Menu

This is the default menu of Urip, a sliding nav menu which will slide out after (hamburger)menu trigger clicked. Below is the structure of navigation menu.

The id="main-nav" is the main navigation menu that will scroll to the id of your element/section (using jQuery One Page Nav). While the class="secondary-nav" is the dummy navigation that can be used for external link. In the secondary nav there is an anchor link which has class contact-trigger, an anchor which has this class will trigger the overlay contact form.

2.3 Dropdown Menu

Starting from version 1.1 Urip support dropdown navigation menu. To create a dropdown menu you need to add a class="dropdown" into a list item. For example please take a look at the screenshot on section 2.2 above, the last list item inside .main-nav there will have a dropdown menu.

2.4 Navigation Bar New

Navigation bar available from Urip version 2.0. Different from the default menu, navigation bar has a menu list stretching on the top instead sliding in/out. You can find this navigation menu on Urip Event Layout. Below is the structure of navigation bar

2.5 External Link on Main Navigation

If you want to add external link on main navigation, simply add .external class on the anchor link. For example:

<li><a class="external" href="http://google.com">Google</a></li>

3. Background Image

3.1 Hero Background

To change the background image, find the following section on style.css file

As you can see from the screenshot above, on Session Video Background we use video poster image as fallback that will override the Youtube video background on mobile/touch devices.

3.2 Breaking / Parallax Background

Since Urip version 2.0, Stellar JS plugin will be used for parallax background section such as Hero and breaking section.

Below is the example code screenshot to make a breaking section or parallax section:

For more details about data-stellar-background-ratio="xx" data-stellar-vertical-offset="xx" please read it from Stellar JS documentation here.

To change the background please find the following section on style.css file

3.3 Video Background New

The video background that we are using on Event Layout hero is a Youtube video background using jquery.mb.YTPlayer. You can use any video from Youtube or upload your own videos to Youtube.

To use this plugin, first please include jquery.mb.YTPlayer.min.js and urip-ytplayer-setting.js to your HTML (currently only index-event.html that has been included these script on the package).

To setting video background section, first we need to call the video:

You can see the setting of how the video background work from the data-property above, and here is a bit explanation about it:

• videoURL: URL to your Youtube video.
• containment: the id of section where you want to place the video background.
• startAt: time which video will begin playing at.
• mute: true to mute the audio, false to unmute.
• autoPlay: play video once ready.
• loop: loops video once ended.
• opacity: define the opacity of the video.
• showControls: show or hide the controls bar at the bottom of the page.

4. Columns & Content

4.1 Full Width Column

Urip used class="container" from Bootstrap to wrap content and house the grid system. Therefore it has maximum width of 12 columns (1170px width on desktop screen). To make a full width column you need to change class container into class="container-full".

And to make padding-less column like the Featurettes section simply add class no-padding to the column class.

4.2 Vertical Center Content

To make vertically center content like Hero section and Featurettes Quote you need to wrap your content inside 3 divs with class vertical-center-wrapper, vertical-center-table, and vertical-center-content. But first you need to define the height of your element, for example is the class featurettes-quote-wrapper from Featurettes Quote content, it has 500px height defined on the css.

5. Expendable Gallery

Below is the screenshot of Expandable Gallery :

To add/edit the image just edit the image source under the .expandable-gallery-item list. To learn more about this gallery you can also visit Expendable Gallery page.

6. Tabs

6.1 Content Tab

The content tab has basic structure like the tab from Bootstrap, so you can learn more about the basic tab here. One thing you need to do is wrap it with div class="content-tab-wrapper">

6.2 Tab Section

Similar with the content tab, the section tab also has basic structure from Bootstrap. While the content tab need to be wrapped with div class="content-tab-wrapper">, the section tab need to be wrapped with div class="section-tab">.

7. Pricing Table

To create pricing tables you need to make a ul class="pricing" and then li class="price", wrap the li inside Bootstrap column class to set the width and column of a pricing table. If you have any recommended/special package of your product, add .best-value to the li. Below is the example of pricing table:

8. Forms

8.1 Subscription Forms

There are two kinds of subscription form in Urip, one in the hero section on Hero Subscribe Layout and another one in footer. Both integrated with Mailchimp service and works using jQuery Ajaxchimp.

How to connect to my mailchimp list?

Open urip.js file and find the Ajaxchimp JS section, replace the URL with your own mailchimp post URL

How to find my mailchimp post URL?

Just login to your Mailchimp account, go to your list or create a new one, head to the Signup Forms menu, select Embedded Form. There you will find "Copy/paste onto your site" section, find the URL inside form action="".

8.2 Contact Form

Contact form use contact.php to send the message to your email. The form itself will appear when a link with class="contact-trigger" clicked. To adjust the recipient address, please open the contact.php file, change the value of $to variable.

How to set up the form

To adjust the form to meet what you need, you can edit the name, id, and placeholder of an input. A field under div class="required-field" will have a blue label at the top-right corner to indicate that the field must be filled. Below is a screenshot of the existing contact form:

Contact Form Validation

Before the contact message sent, it needs to be validated to check whether all required fields have been filled correctly. To adjust the validation process, please open the urip.js file and head to Contact Form Validation section. You will find some validation code like this:

If you have custom field on your contact form, first you need to define the variable, give a variable name and define the id of the input. After that you need to define the validation just like code below // Form field validation comment. If the error variable it true then the error notification will appear and give a class of field-error to the parent div. If all the validation processes finished and no error found then the contact message will be sent using contact.php

8.3 Registration Form

Registration form placed on Hero Form Layout has similar functionality as how the contact form is working. It will also send email using hero-form.php. Below is the screenshot of the registration form:

9. Notification

9.1 Attention Box

If you check the Hero Form Layouts page you will find an attention box below the top clients logo section. This element is intended as an attention grabber to your visitor in case you have something to tell. Below are the screenshots of the attention box code and the result from Hero Form Layout:

9.2 Forms Notification Box

The notification box will tell you if the form you're submitted is success or error. The notification box will appear after the form validation has been processed and the class="show-up" added. Below is the example of notification box for contact form:

10. Content Filter

This template uses Isotope plugin as content filter. This template use content filter in Our Team and Portfolio section./p>

10.1 Our Team Filter

Basically There are two main elements for this content filter, first is the Filter button:

The attribute data-filter is the class of the filter items which used as category, while the * mark indicating all categories. The next element is Filter item:

All items are wrapped with div class team-list, and each item has div class team-item, you can place your category class along with this div.

Team photo dimensions

For making perfect team photo filter like the demo you need image with 270 x 320 pixels dimension. Or as long as you have a photo with 27:32 ratio (e.g. 540x640, etc) it would fit well.

10.2 Portfolio Filter

Portfolio filter has similar functionality as team filter, it use filter list and item list. If you click on an image you will get larger photo lightbox by Swipebox.

The anchor links href attribute is addressing a large photo for the lightbox, while the img tag is the photo of your portfolio item.

11. Skill Meter

Skill meter has similar structure as Bootstrap Progress Bar. But if bootstrap use attribute aria-valuenow, Urip use data-percent to define bar width.

12. RTL (Right-to-Left) Layout New

Good news for you that want to create an RTL website using Urip template because start from version 1.1 Urip support RTL Layout.

To create an RTL site, you need some rtl css files. Inside css folder you will find:

1. bootstrap-rtl.min.css - this is the RTL style of Bootstrap 3 (thanks to Morteza for creating this file).
2. rtl.css - this is the RTL style of Urip's default style.css
3. style-responsive-rtl.css - the RTL style of style-responsive.css
4. style-blog-rtl.css - the RTL style of style-blog.css (call these two files only when developing blog for Urip)

13. Carousel

To display Carousel, please include slick.min.js and urip-slick-carousel-setting.js to your HTML (currently only index-app.html that has been included these script on the package).

Below is the screenshot of carousel images on Urip App layout:

To change the screenshot images, just chage the image source inside .carousel-item with yours. Please use image with 295x524 pixels dimension. For more information/documentation about this carousel you can visit Slick Carousel page.

14. Countdown Timer New

To display Countdown Timer, please include jquery.countdown.min.js and urip-countdown-setting.js to your HTML (currently only index-event.html that has been included these script on the package)

then open urip-countdown-setting.js file, there you will find some date like this '2015/11/21', replace with your date. And finally deploy <ul class="countdown-timer"></ul> to your HTML file to display the timer. For more details about Countdown Timer plugin please visit its official documentation here.

15. Instagram Gallery New

To display Instagram Gallery, please include instagram.min.js and urip-instagram-setting.js to your HTML (currently only index-event.html that has been included these script on the package)

then open urip-instagram-setting.js file, replace the value of clientId variable with yours. You can obtain a client id registering a new Instagram API client app at http://instagram.com/developer/clients/register/.

To display your instagram photos please check the screenshot below:

The demo on Urip Event layout is using hash: 'tnwconference' to display all Instagram's photos with that hashtag, please replace the hash value with yours. For more details about this plugin or another examples for displaying photos please check the documentation here.

16. JavaScript

Here is the list of jQuery plugins used in Urip. Visit their website to find more documentation:

• jQuery
• Animated Headline - animated headline used in Creative Layout
• Expandable Gallery - gallery image slider on featurettes section
• Expandable Navigation
• Headhesive - create sticky header on scroll
• Ajaxchimp - used in subscribe form to send subscribers email to mailchimp list
• Classie - Class helper functions
• Counter Up
• One Nav - create one page navigation
• Isotope - create content filter, used in Creative layout for portfolio section
• Swipebox - touchable lightbox, used in video and portfolio lightbox
• Scroll Reveal - hide then reveal element once it enter viewport
• Smooth Scroll
• Slick - Carousel plugin, used in App Layout
• Stellar - create parallax background section
• YTPlayer - create video backgraound section
• Countdown Timer - create count down timer
• Instagram Gallery - display photos from Instagram

Inside the js folder you will find urip.js file, this file is the set up for all javascript plugins above for all layouts of this template, except the slick carousel plugin which set inside the html code (App Layout) to avoid crash with other layout which not use carousel.

17. Credits

I've used the following images, icons or other files as listed. *for demo only

• Unsplash - background images
• Device mockups
• Letter Icon by Piotrek Chuchla
• Pencil and Ruler Icon by Ryan Beck
• Documents Icon by James Cook
• Desktop+Mobile device iconby Garrett Knoll
• App UI Kit
• Client Logoby Ian Barnard
• Grocery Icon by Weirdeetz
• Team Photo
• Placeimg - people image placeholder on blog comment

That's all! Please let me know if I missed something here :)