1. Start
  2. Helpful Tips
  3. HTML Structure
  4. CSS Structure
  5. Portfolio Filtering
  6. JavaScript
  7. Sources & Credits

Candy

Responsive HTML5 Template


Thank you for your purchase! If you have any questions that you feel should have been in this document, please log in using the account used to purchase the file and email via my user page contact form here. Thanks so much!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme.

Helpful Tips


Do not start from scratch, use an existing page I have created and modify it to learn how it works

Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F.

Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching

Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.

Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code

HTML Structure


Candy template is based on Skeleton - a small collection of CSS & JS by Dave Gamache files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

 

1. Section Separator
    <div class="bgsepara bg-section">
<div class="img-section"></div>
<div id="anchor" style="position: absolute; top: 200px;"></div>
</div>
2. Section Structure
    <!-- 960 Container -->
    <section id="sectionId" class="container">
	   </section>
    <!-- End 960 Container -->
3. Two columns example
    <!-- 960 Container -->
    <div class="container">
         <div class="eight columns">1/2 Column - Content Here</div>
         <div class="eight columns">1/2 Column - Content Here</div>
    </div>
    <!-- End 960 Container -->

 

CSS Structure


I used some CSS files in this template (all styles're imported in main file of CSS - style.css). By using of them, we can work round this. Those files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the files below:

  1. main.css - main css file;
  2. layout.css - media query layouts
  3. base.css, portfoliostyle.css, roll_over.css - contains the basic styles
  4. normalize.css, skeleton.css, animate.css - contains third party styles

Candy template is based on Skeleton - a small collection of CSS & JS by Dave Gamache files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

If you create you own styles you must check the 4 sizes of responsive so all works ok, if you need to change your own styles at certain size you will do it at media_queries.css.
The 4 sizes are the following:

 

Portfolio Filtering


Filters

To add new or modify current categories change category attribute to category which you want.

<!-- Filters -->
<div class="element category category"> Thumbnails

To connect filter button with project add to first div's class name of your category (in example below: sample-a). You can add there categories how many you want (use spaces between classes).

<article class="columns one-third example-a">
  <div>"place your content here"</div>
</article>

 

JavaScript


You can see some help info, when click links which are below each regarding script:

  1. jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/
  2. Isotope - Refer to the author's documentation for additional notes on how to use it.

You will find more scripts refered to previous ones at js folder like jquery.easing or jquery.mousewheel, to add new scripts you can use custom.js or create your own js

Sources & Credits


  1. Slider Photos
    Sasha Vinogradova http://www.behance.net/MelaMel
  2. Recent projects
  3. 01 Ben Cousin http://www.behance.net/bewod
    02 Designembraced http://www.designembraced.com
    03 123klan www.123klan.com
  4. Photos team
  5. Cristian Girotto http://www.behance.net/cristiangirotto
  6. Works
    01Pablo Moreno http://www.behance.net/IamPablo
    02 Pablo Moreno http://www.behance.net/IamPablo
    03 Diego Flórez http://www.behance.net/misterD
    04 Pablo Moreno http://www.behance.net/IamPablo
    05 Applove http://www.behance.net/applove
    06 Pablo Moreno http://www.behance.net/IamPablo
    07 DHNN Creative Agency http://www.behance.net/dhnn
    08 DHNN Creative Agency http://www.behance.net/dhnn
    09 Mohamed El-Araby http://www.behance.net/elaraby
  7. Interior projects
  8. Project http://www.designembraced.com
    Vimeo Video Snoop Barcelona 10
  9. Blog credits
    01 Designembraced http://www.designembraced.com
    02 Sasha Vinogradova http://www.behance.net/MelaMel
    03 Sasha Vinogradova http://www.behance.net/MelaMel
  10. Description / Candy V2- Responsive One Page Portfolio
      Candy is a modern responsive parallax HTML one page template, perfect to promote your portfolio With a responsive design it is easily usable with any device (Desktop, tablet, mobile phone…)
      Features:
    1. Responsive
    2. Single Page
    3. Cool Design
    4. Sticky Navigation
    5. HTML5/CSS3
    6. Ajax Contact Form
    7. Cross-browser Compatible
    8. Photoshop file included
    9. Filterable portfolio
    10. jQuery Enhanced

The images included in preview are for demonstration purposes and should always be replaced with your own work.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Regards,
Jellythemes