These are the features that can be added to your page, please read carefully!
Epslion (2.0) HTML5 and CSS3 framework is a compiled set of components we used for mobile devices added to one single file, optimized for load speed, optimized for code, and built as much as possible to be compiled as CSS3
Definitions and gotcha's:
Content box: a content box is the main housing div for your template, every item you'll be inserting in a template will be added inside one wrapper, called content <div class="content"></div>
Container: a container is a wrapper for individual elements, basically, all the features presented bellow will be added inside contaienrs, an instant example can be found bellow.
If your container has a paragraph at the end of it, or you simply notice it's too big, you can add "container no-bottom" at the of your class, that will remove the bottom, or if you only want a half bottom, you can add "container half-bottom" at the end of it.
<div class="container">
<p>This is a demo</p>
<div>
Containers are used to add a bottom margin for visual hierarchy and also to keep the code nice and neet. You'll be seeing the following expression a lot " add the item to a container, that means, doing the structure above.
Decoration: a decoration is simply a dividing line that can be added by inserting the following code after closing a container. <div class="decoration"></div>
Responsive Image: you can make any image responsive by adding a class to it img class="responsive-image"
Responsive Video: you can make any video responsive by adding a class to the iframe class="responsive-video"
Responsive Maps: to create responsive maps simply use the code bellow and replace the iframe src with your iframe src
<div class="container">
<div class="maps-container">
<iframe class="responsive-image maps" src="https://maps.google.com/?ie=UTF8&ll=47.595131,-122.330414&spn=0.006186,0.016512&t=h&z=17&output=embed"></iframe>
</div>
</div>
To create any column use the bottom code, you can simply copy paste them. Each column has a class, the last class of that specific column has the class last-column to be a clear fix for floatation. Please make sure that the columns are inserted into the containers. This is also a clear fix solution for them.
<div class="container">
<p>
1/1<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="container">
<div class="one-half">
<p>
1/2<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="two-half last-column">
<p>
2/2<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
</div>
<div class="container">
<div class="one-third">
<p>
1/3<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="one-third">
<p>
2/3<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="one-third last-column">
<p>
3/3<br>
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
</div>
One column, center icon.
<div class="container">
<img class="center-icon" src="images/icons-large/icon1.png" alt="img">
<h2 class="center-text">1/1</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="container">
<div class="one-half">
<img class="center-icon" src="images/icons-large/icon2.png" alt="img">
<h2 class="center-text">1/2</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="two-half last-column">
<img class="center-icon" src="images/icons-large/icon3.png" alt="img">
<h2 class="center-text">2/2</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
</div>
<div class="container">
<div class="one-third">
<img class="center-icon" src="images/icons-large/icon1.png" alt="img">
<h2 class="center-text">1/3</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="one-third">
<img class="center-icon" src="images/icons-large/icon3.png" alt="img">
<h2 class="center-text">2/3</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
<div class="one-third last-column">
<img class="center-icon" src="images/icons-large/icon4.png" alt="img">
<h2 class="center-text">3/3</h2>
<p class="center-text">
Lorem ipsum dol sit amet, consectetur adipiscing elit.
Sed ultrices cursus libero ut scelerisque
</p>
</div>
</div>
<div class="container no-bottom">
<h2 class="left-text">Left text.</h2>
<p class="left-text">
This is a simple paragrahp aligned to the left side of the screen!
This is a simple paragrahp aligned to the left side of the screen!
</p>
<div class="decoration"></div>
<h2 class="center-text">Center text.</h2>
<p class="center-text">
This is a simple paragraph aligned to the center part of the screen!
This is a simple paragraph aligned to the center part of the screen!
</p>
<div class="decoration"></div>
<h2 class="right-text">Right text.</h2>
<p class="right-text">
This is a simple paragraph aligned to the right side of the screen!
This is a simple paragraph aligned to the right side of the screen!
</p>
</div>
Any of the following quotes inside the container box can be used to showcase a quote! Slider quotes can be found in the slider section and will be discussed a little bit lower.
<div class="container">
<div class="quote-style-one">
<img src="images/general/1s.jpg" alt="img">
<em>A nice way of showing off a quote maybe? It's absolutely simple!</em>
<strong>John Doe - Annonymus Name</strong>
</div>
<div class="quote-style-two">
<em>Another nice way to show off a quote or a testimonial</em>
<strong>John Doe - Annonymus Name</strong>
</div>
<div class="quote-style-three">
<em>Another nice way to show off a quote or a testimonial </em>
<strong>John Doe - Annonymus Name</strong>
</div>
<div class="quote-style-four">
<em>Another nice way to show off a quote or a testimonial </em>
<strong>John Doe - Annonymus Name</strong>
</div>
</div>
Each text hightlight has a class to it that represents the general class and followed is the color of the highlight, use any secondary class values to give them the color you wish!
<div class="container no-bottom">
<p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-green">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-blue">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-dark">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-red">This is a highlight</span>and this is regular text</p>
<p><span class="text-highlight highlight-orange">This is a highlight</span>and this is regular text</p>
</div>
Small buttons
Buttons are divided into four classes. Small buttons, big buttons, buttons with icons and full screen buttons. Each of these hrefs will generate a button, to create more icon buttons, locate the .button class in framework.css and you will find the classes regarding icons. We have a tone of compressed icons you can use to create your buttons as the examples we provided located in images/icons
<div class="container">
<a href="#" class="button button-turqoise">Button</a>
<a href="#" class="button button-green">Button</a>
<a href="#" class="button button-blue">Button</a>
<a href="#" class="button button-magenta">Button</a>
<a href="#" class="button button-dark">Button</a>
<a href="#" class="button button-yellow">Button</a>
<a href="#" class="button button-red">Button</a>
<a href="#" class="button button-orange">Button</a>
<a href="#" class="button-icon icon-home button-turqoise">Button</a>
<a href="#" class="button-icon icon-setting button-green">Button</a>
<a href="#" class="button-icon icon-mail button-blue">Button</a>
</div>
<div class="container">
<a href="#" class="button-big button-turqoise">Button</a>
<a href="#" class="button-big button-green">Button</a>
<a href="#" class="button-big button-blue">Button</a>
<a href="#" class="button-big button-magenta">Button</a>
<a href="#" class="button-big button-dark">Button</a>
<a href="#" class="button-big button-yellow">Button</a>
<a href="#" class="button-big button-red">Button</a>
<a href="#" class="button-big button-orange">Button</a>
<a href="#" class="button-big button-turqoise">Button</a>
<a href="#" class="button-big-icon icon-home button-turqoise">Ico Button</a>
<a href="#" class="button-big-icon icon-setting button-green">Ico Button</a>
</div>
<div class="container">
<a href="#" class="button button-red button-fullscreen">FULLSCREEN BUTTON</a>
</div>
There are 3 variations of speach bubbles, green, blue, and gray. The have to be housed in the container, and each one of them has a specific class for the paragraph. The em class is just the title of the conversation.
<div class="container no-bottom">
<em class="speach-left-title">John Doe says:</em>
<p class="speach-left">
This is just an awesome bubble! It's quite cute isn't it?
</p>
<div class="clear"></div>
<em class="speach-right-title">Jane Doe replied:</em>
<p class="speach-right green-bubble">
Yeap! It's awesome isn't it and it's not that hard to use!
</p>
<div class="clear"></div>
<em class="speach-left-title">John Doe says:</em>
<p class="speach-left">Awesome stuff!</p>
<div class="clear"></div>
<em class="speach-right-title">Jane Doe replied:</em>
<p class="speach-right blue-bubble">
Yeap! It's awesome isn't it and it's not that hard to use!
</p>
</div>
The tables are created using CSS3, but there is nothing different about them than the plain old HTML. Copy paste the code bellow to create a table.
<div class="container no-bottom">
<table cellspacing='0' class="table">
<tr>
<th>TABLE</th>
<th class="table-title">PLUS</th>
<th class="table-title">PRO</th>
</tr>
<tr>
<td class="table-sub-title"> ONE</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr class='even'>
<td class="table-sub-title"> TWO</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td class="table-sub-title"> THREE</td>
<td>No</td>
<td>No</td>
</tr>
<tr class='even'>
<td class="table-sub-title">VALUE</td>
<td class="price">$9.<sup class="small-price">99</sup></td>
<td class="price">$109.<sup class="small-price">99</sup></td>
</tr>
</table>
</div>
Lists must be added into an ul with the class icon-list, inside them you can add li classes with the specfic names given bellow.
<div class="container no-bottom">
<ul class="icon-list">
<li class="address-list">Address icon</li>
<li class="block-list">Block icon</li>
<li class="bookmark-list">Bookmark icon</li>
<li class="briefcase-list">Briefcase icon</li>
<li class="bubble-list">Bubble icon</li>
<li class="buy-list">Buy icon</li>
<li class="calendar-list">Calendar icon</li>
<li class="clipboard-list">Clipboard icon</li>
<li class="clock-list">Clock icon</li>
<li class="delete-list">Delete icon</li>
<li class="diagram-list">Diagram icon</li>
<li class="document-list">Document icon</li>
<li class="down-list">Down icon</li>
<li class="flag-list">Flag icon</li>
<li class="folder-list">Folder icon</li>
<li class="gear-list">Gear icon</li>
<li class="globe-list">Globe icon</li>
<li class="heart-list">Heart icon</li>
<li class="help-list">Help icon</li>
<li class="info-list">Info icon</li>
<li class="key-list">Key icon</li>
<li class="left-list">Left icon</li>
<li class="letter-list">Letter icon</li>
<li class="monitor-list">Monitor icon</li>
<li class="pencil-list">Pencil icon</li>
<li class="plus-list">Plus icon</li>
<li class="present-list">Present icon</li>
<li class="print-list">Print icon</li>
<li class="right-list">Right icon</li>
<li class="save-list">Save icon</li>
<li class="search-list">Search icon</li>
<li class="shield-list">Shield icon</li>
<li class="statistics-list">Statistics icon</li>
<li class="stop-list">Stop icon</li>
<li class="tick-list">Tick icon</li>
<li class="trash-list">Trash icon</li>
<li class="up-list">Up icon</li>
<li class="user-list">User icon</li>
<li class="wallet-list">Walet icon</li>
<li class="warning-list">Warning icon</li>
<li class="home-list">Home icon</li>
<li class="label-list">Label icon</li>
</ul>
</div>
Formating code must be done using HTML syntaxes, as the code will be rendered as code if you write regulary. To do that, search for HTML characters and replace the code structure bellow with your own. wline creates a white box, gline creates a gray box.
<div class="container no-bottom">
<div class="code">
<span class="wline"> <p class="test1">Simple code!</p></span>
<span class="gline"> <p class="test2">Simple code!</p></span>
</div>
</div>
We've considered this a lot and the decision has been made to make horizontal charts only, the reason is quite simple, devices have variable widths, so making something that expands horizontally will always look better than something that gets wider. Horizontal charts are the way to go for mobiles. We've included 2 variations, rounded, and regular. We've also included 4 color schemes, green-chart, yellow-chart, blue-chart, red-chart. These are class extensios that are added inside the chart-background class. Check out the examples bellow.
p10 represents the percerntage of the chart, use p10, p20, p30, p40, p50, p60, p70, p80, p90, p100 to add the value, if you need more values added, open framework.css and locate the .p10 class for example. Create a new one, example p53, and give it the width 53% as it's set to display block it will extend it to exactly 53% of the screen width
<div class="container">
<div class="chart">
<strong>A red chart</strong>
<em>10%</em>
<div class="chart-background">
<div class="red-chart p10"></div>
</div>
</div>
<div class="chart chart-round">
<strong>A red chart</strong>
<em>10%</em>
<div class="chart-background">
<div class="red-chart p10"></div>
</div>
</div>
</div>
We can only detect a few styes of phones, this is not because we didn't do our research properly, it's because the user agents are EXTREMLY long and hard to implement, so we've limited our devices to the most important ones out there. Android Mobiles, iPhones, iPads and iPods. You can add whatever features you wish to have inside
<div class="container">
<div class="android-detected float-left">
<a href="#" class="mobile-detector-button">Android <br> Detected</a>
</div>
<div class="ipod-detected float-left">
<a href="#" class="mobile-detector-button">iOS <br>Detected</a>
</div>
<div class="ipad-detected float-left">
<a href="#" class="mobile-detector-button">iPad <br>Detected</a>
</div>
<div class="iphone-detected float-left">
<a href="#" class="mobile-detector-button">iPhone <br>Detected</a>
</div>
</div>
The sliding door principle is simple, tap a box, and the top slides of and the bottom one is visible. This is nice if you want to hide a mobile device or maybe a mail address. Copy and paste the code bellow and replace the text.
<div class="container no-bottom">
<div class="sliding-door">
<div class="sliding-door-top">
<a href="#"><em></em>
Tap for our phone number!
</a>
</div>
<div class="sliding-door-bottom">
<a href="tel:+12 345 7890"><em></em>
<strong>Call us:</strong>
+1 555 354 7890
</a>
</div>
</div>
<div class="sliding-door-clear"></div>
</div>
Submenus can have an infinite ammount of items!
<div class="container">
<div class="submenu-navigation">
<a href="#" class="submenu-nav-deploy">Deploy Submenu</a>
<div class="submenu-nav-items">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</div>
</div>
</div>
There are three variations of toggles, use the codes bellow to generate them!
<div class="container">
<div class="toggle-1">
<a href="#" class="deploy-toggle-1">This is content toggle</a>
<div class="toggle-content">
<p>
Toggle Text
</p>
</div>
</div>
</div>
<div class="container">
<div class="toggle-2">
<a href="#" class="deploy-toggle-2">This is content toggle</a>
<div class="toggle-content">
<p>
Toggle Text
</p>
</div>
</div>
</div>
<div class="container">
<div class="toggle-3">
<a href="#" class="deploy-toggle-3">
This is content toggle
<em><strong></strong></em>
</a>
<div class="toggle-content">
<p>
Toggle Text
</p>
</div>
</div>
</div>
Tabs are very easy to use but you must understand that tabs expand on a horizontal basis. Their title SHOULD not be big, as this will cause them to jump a row on devices such as nokias or blackberries that have lower screen sizes. We suggest using a page similar to http://www.responsinator.com/ to test your tabs. Usually 4 tabs, 5/6 letters in each will be exactly the right size.
<div class="container">
<div class="tabs">
<a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a>
<a href="#" class="tab-but tab-but-2">Tab 2</a>
<a href="#" class="tab-but tab-but-3">Tab 3</a>
<a href="#" class="tab-but tab-but-4">Tab 4</a>
<a href="#" class="tab-but tab-but-5">Tab 5</a>
</div>
<div class="tab-content tab-content-1">
<p>
Tab 1 Text
</p>
</div>
<div class="tab-content tab-content-2">
<p>
Tab 2 Text
</p>
</div>
<div class="tab-content tab-content-3">
<p>
Tab 3 Text
</p>
</div>
<div class="tab-content tab-content-4">
<p>
Tab 4 Text
</p>
</div>
<div class="tab-content tab-content-5">
<p>
Tab 4 Text
</p>
</div>
</div>
Big Notifications
Big notifications can be created using the code bellow, there are 4 color variations red-notification, blue-notification, yellow-notification, green-notification
<div class="container">
<div class="big-notification red-notification">
<h3 class="uppercase">Notification Title</h3>
<a href="#" class="close-big-notification">x</a>
<p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p>
</div>
</div>
Small Notifications
Small notifications can be created using the code bellow, there are 4 color variations static-notification-red, static-notification-blue, static-notification-green, static-notification-yellow. If you remove the "tap-dismiss-notification" the notification will no longer disapear when you tap it.
<div class="container">
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">A red notification! Tap to dismiss!</p>
</div>
</div>
Checkbox examples can be found bellow, copy and paste them to create them
<div class="container half-bottom">
<a href="#" class="checkbox checkbox-one">Checkbox</a>
<a href="#" class="checkbox checkbox-two">Checkbox</a>
<a href="#" class="checkbox checkbox-three">Checkbox</a>
<a href="#" class="checkbox radio-one">Radio</a>
<a href="#" class="checkbox radio-two">Radio</a>
<a href="#" class="checkbox checkbox-three">Checkbox</a>
</div>
To generate a complete contact form copy and paste the code bellow. To change the contact form address, simply edit the php file found in the pack!
<div class="container no-bottom">
<div class="contact-form no-bottom">
<div class="formSuccessMessageWrap" id="formSuccessMessageWrap">
<div class="big-notification green-notification">
<h3 class="uppercase">Message Sent </h3>
<a href="#" class="close-big-notification">x</a>
<p>Your message has been successfuly sent. Please allow up to 48 hours for a reply! Thank you!</p>
</div>
</div>
<form action="php/contact.php" method="post" class="contactForm" id="contactForm">
<fieldset>
<div class="formValidationError" id="contactNameFieldError">
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">Name is required!</p>
</div>
</div>
<div class="formValidationError" id="contactEmailFieldError">
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">Mail address required!</p>
</div>
</div>
<div class="formValidationError" id="contactEmailFieldError2">
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">Mail address must be valid!</p>
</div>
</div>
<div class="formValidationError" id="contactMessageTextareaError">
<div class="static-notification-red tap-dismiss-notification">
<p class="center-text uppercase">Message field is empty!</p>
</div>
</div>
<div class="formFieldWrap">
<label class="field-title contactNameField" for="contactNameField">
Name:
<span>(required)</span>
</label>
<input type="text" name="contactNameField" value="" class="contactField requiredField" id="contactNameField"/>
</div>
<div class="formFieldWrap">
<label class="field-title contactEmailField" for="contactEmailField">
Email:
<span>(required)</span>
</label>
<input type="text" name="contactEmailField" value="" class="contactField requiredField requiredEmailField" id="contactEmailField"/>
</div>
<div class="formTextareaWrap">
<label class="field-title contactMessageTextarea" for="contactMessageTextarea">
Message:
<span>(required)</span>
</label>
<textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"></textarea>
</div>
<div class="formSubmitButtonErrorsWrap">
<input type="submit" class="buttonWrap button button-green contactSubmitButton" id="contactSubmitButton" value="SUBMIT" data-formId="contactForm"/>
</div>
</fieldset>
</form>
</div>
</div>
We have a large variety of sliders, check them out bellow!
<div class="container">
<a href="#" class="next-quote"></a>
<a href="#" class="prev-quote"></a>
<div class="quote-slider">
<div>
<div class="quote-style-four">
<img src="images/icons-large/icon1.png" alt="img">
<em>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</em>
<strong>John Doe - Annonymus Name</strong>
</div>
</div>
<div>
<div class="quote-style-four">
<img src="images/icons-large/icon2.png" alt="img">
<em>That's why we made a quote slider!</em>
<strong>John Doe - Annonymus Name</strong>
</div>
</div>
</div>
<div class="container no-bottom">
<div class="slider-controls">
<div>
<img src="images/general/1.jpg" class="responsive-image">
<p class="small-slider-caption">A small caption</p>
</div>
<div>
<img src="images/general/6.jpg" class="responsive-image">
<p class="large-slider-caption">A BIG AWESOME<br>CAPTION</p>
</div>
<div>
<img src="images/general/2.jpg" class="responsive-image">
<p class="title-slider-caption">
<strong>A caption title</strong>
<em>A caption text and what not!</em>
</p>
</div>
</div>
<a href="#" class="next-slider"></a>
<a href="#" class="prev-slider"></a>
</div>
<div class="slider-no-controls">
<div>
<img src="images/general/1.jpg" class="responsive-image">
<p class="small-slider-caption">A small caption</p>
</div>
<div>
<img src="images/general/2.jpg" class="responsive-image">
<p class="large-slider-caption">A BIG AWESOME<br>CAPTION</p>
</div>
<div>
<img src="images/general/3.jpg" class="responsive-image">
<p class="title-slider-caption">
<strong>A caption title</strong>
<em>A caption text and what not!</em>
</p>
</div>
</div>
<div class="slider-no-controls">
<div>
<img src="images/general/1w.jpg" class="responsive-image">
</div>
<div>
<img src="images/general/2w.jpg" class="responsive-image">
</div>
<div>
<img src="images/general/3w.jpg" class="responsive-image">
</div>
</div>
<div class="container no-bottom">
<div class="slider-controls">
<div>
<img src="images/general/1.jpg" class="responsive-image">
</div>
<div>
<img src="images/general/2.jpg" class="responsive-image">
</div>
<div>
<img src="images/general/3.jpg" class="responsive-image">
</div>
</div>
<a href="#" class="next-slider"></a>
<a href="#" class="prev-slider"></a>
</div>
<div class="slider-two-thumbs">
<div class="thumbnail-slide">
<div class="third-thumb">
<img class="responsive-image" src="images/general/1s.jpg" alt="img">
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/2s.jpg" alt="img">
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/3s.jpg" alt="img">
</div>
</div>
<div class="thumbnail-slide">
<div class="third-thumb">
<img class="responsive-image" src="images/general/4s.jpg" alt="img">
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/5s.jpg" alt="img">
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/6s.jpg" alt="img">
</div>
</div>
</div>
<div class="slider-two-thumbs">
<div class="thumbnail-slide">
<div class="third-thumb">
<img class="responsive-image" src="images/general/1s.jpg" alt="img">
<h2 class="center-text">One</h2>
<p class="center-text half-bottom">This is a thumbnail caption, it's just awesome!</p>
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/2s.jpg" alt="img">
<h2 class="center-text">Two</h2>
<p class="center-text half-bottom">Captions support html text, <strong>bold</strong>, <em>italic</em> and <a href="#">links</a>!</p>
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/3s.jpg" alt="img">
<h2 class="center-text">Three</h2>
<p class="center-text half-bottom">This is also touch enabled. Drag em left or right!</p>
</div>
</div>
<div class="thumbnail-slide">
<div class="third-thumb">
<img class="responsive-image" src="images/general/4s.jpg" alt="img">
<h2 class="center-text">Four</h2>
<p class="center-text half-bottom">This is a thumbnail caption, it's just awesome!</p>
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/5s.jpg" alt="img">
<h2 class="center-text">Five</h2>
<p class="center-text half-bottom">Captions support html text, <strong>bold</strong>, <em>italic</em> and <a href="#">links</a>!</p>
</div>
<div class="third-thumb">
<img class="responsive-image" src="images/general/6s.jpg" alt="img">
<h2 class="center-text">Six</h2>
<p class="center-text half-bottom">This is also touch enabled. Drag em left or right!</p>
</div>
</div>
</div>
<div class="slider-two-thumbs">
<div class="thumbnail-slide">
<div class="half-thumb">
<img class="responsive-image" src="images/general/1s.jpg" alt="img">
</div>
<div class="half-thumb">
<img class="responsive-image" src="images/general/2s.jpg" alt="img">
</div>
</div>
<div class="thumbnail-slide">
<div class="half-thumb">
<img class="responsive-image" src="images/general/3s.jpg" alt="img">
</div>
<div class="half-thumb">
<img class="responsive-image" src="images/general/4s.jpg" alt="img">
</div>
</div>
</div>
<div class="slider-two-thumbs">
<div class="thumbnail-slide">
<div class="half-thumb">
<img class="responsive-image" src="images/general/1s.jpg" alt="img">
<h2 class="center-text">One</h2>
<p class="center-text half-bottom">This is a thumbnail caption, it's just awesome!</p>
</div>
<div class="half-thumb">
<img class="responsive-image" src="images/general/2s.jpg" alt="img">
<h2 class="center-text">Two</h2>
<p class="center-text half-bottom">These captions support html text, <strong>bold</strong>, <em>italic</em> and <a href="#">links</a> too!</p>
</div>
</div>
<div class="thumbnail-slide">
<div class="half-thumb">
<img class="responsive-image" src="images/general/3s.jpg" alt="img">
<h2 class="center-text">Three</h2>
<p class="center-text half-bottom">This slider is also touch enabled. Drag em left or right!</p>
</div>
<div class="half-thumb">
<img class="responsive-image" src="images/general/4s.jpg" alt="img">
<h2 class="center-text">Four</h2>
<p class="center-text half-bottom">You can add as many items as you want! It's super easy!</p>
</div>
</div>
</div>
Copy and paste the code bellow and replace the images and text with your values. the href will be the location of the image opened by the colorbox gallery and the img tag will be the image shown. The h4 is the image title and the p is the image text.
<div class="container no-bottom">
<div class="portfolio-item-thumb one-half">
<a href="images/general/2s.jpg">
<img class="responsive-image" src="images/general/1s.jpg" alt="img">
</a>
<h4 class="uppercase">Image Title</h4>
<p>Portfolio text</p>
</div>
<div class="portfolio-item-thumb one-half last-column">
<a href="images/general/1s.jpg">
<img class="responsive-image" src="images/general/2s.jpg" alt="img">
</a>
<h4 class="uppercase">Image Title</h4>
<p>Portfoio text</p>
</div>
</div>
Copy and paste the code bellow and replace the images and text with your values. the href will be the location of the image opened by the colorbox gallery and the img tag will be the image shown. The h4 is the image title and the p is the image text.
<div class="container no-bottom">
<div class="portfolio-item-full-width">
<a href="images/general/1.jpg">
<img class="responsive-image" src="images/general/1w.jpg" alt="img">
</a>
<h4 class="uppercase">A full width portfolio item!</h4>
<p>Portfolio Text</p>
</div>
<div class="decoration"></div>
<div class="portfolio-item-full-width">
<a href="images/general/2.jpg">
<img class="responsive-image" src="images/general/2w.jpg" alt="img">
</a>
<h4 class="uppercase">A full width portfolio item!</h4>
<p>Portfolio Text</p>
</div>
</div>
Copy paste the UL and then simply copy lists inside to create more captions. The a will be the image opened, the img will be the thumbnail shown. You can specify the title of the href and this will show up as an image caption.
<ul class="gallery">
<li>
<a class="swipebox" href="images/gallery/full/1.jpg" title="Caption">
<img src="images/general/1s.jpg" alt="img" />
</a>
</li>
<li>
<a class="swipebox" href="images/gallery/full/2.jpg" title="Caption">
<img src="images/general/2s.jpg" alt="img" />
</a>
</li>
<li>
<a class="swipebox" href="images/gallery/full/3.jpg" title="Caption">
<img src="images/general/3s.jpg" alt="img" />
</a>
</li>
</ul>
Responsive elements are extremly ease to use!
<div class="one-half-responsive"> <!--(1)-->
<div class="one-half">Left Column On Mobile</div><!--(2)-->
<div class="one-half-last-column">Right Column On Mobile</div><!--(3)-->
</div>
<div class="decoration hide-if-responsive"></div> <--(7)-->
<div class="one-half-responsive last-column"><--(4)-->
<div class="one-half">Left Column On Mobile</div><!--(5)-->
<div class="one-half-last-column">Right Column On Mobile</div><--(6)-->
</div>
<div class="clear"></div>
(1) and (4) will appear only on tablets, and will make (2) and (3) float to (5) and (6), basically, on tablets it will go from a 2 column layout to a 4 column layout!
This only happens if you include the elements you want to float on tablets in one-half-responsive or one-third-responsive classes. the second class of each one-half or one-half responsive must have an extra class , last-column to clear the right margin and make it fit perfectly. lnstant example (3) (4) and (6)
For one-third and one-third-responsive you must do the same but for the third apparence of that class.
Specific classes for devices
If you look at (7) you might want to have a decoration between certain contaieners or columns on your mobile device, but adding this to a tablet would break the floatation, so, if you wish to have a class only show on mobiles, add hide-if-responsive to it, if you want a class only to show on tablets add hide-if-mobile to it!