What is Sweet Candy UI Kit

Sweet Candy UI Kit is a number of useful user interface components built on Bootstrap 3 framework. We did not modify any line of Bootstrap, but we rewrote some of its grid rules in our style.css to disable responsiveness. Sweet Candy is not a responsive UI Kit.

What is included

Once purchased, unzip the compressed folder to see the directory structure of Sweet Candy UI Kit. You'll see something like this:

sweet-candy
├───docs
│   ├───css
│   ├───images
│   └───js
├───sweet-candy-css
│   ├───css
│   ├───fonts
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   ├───js
│   │   └───libs
│   └───styles
│       ├───blue
│       ├───green
│       └───purple
└───sweet-candy-less
    ├───fonts
    ├───images
    │   ├───icons
    │   ├───prettyPhoto
    │   └───temp
    ├───js
    │   └───libs
    ├───less
    │   └───bootstrap
    └───styles
        ├───blue
        ├───green
        └───purple

docs/: contains this documentation.
sweet-candy-css/: contains Sweet Candy UI Kit in simple CSS format. Use it to easily start your project.
css/: contains all the stylesheets for CSS version of the kit.
fonts/: contains Bootstrap Glyphicons for CSS version of the kit.
images/: contains all the images for CSS version of the kit.
images/icons/: contains all the icons for CSS version of the kit.
images/temp/: contains all the temporary images for CSS version of the kit.
js/: contains all the JS files for CSS version of the kit.
styles/: contains all the stylesheets for different color schemes (CSS Version).
styles/blue/: contains all the images for Blue color scheme (CSS Version).
styles/green/: contains all the images for Green color scheme (CSS Version).
styles/purple/: contains all the images for Purple color scheme (CSS Version).
sweet-candy-less/: contains Sweet Candy UI Kit in LESS format. Use it to modify this kit in your project.
fonts/: contains Bootstrap Glyphicons for LESS version of the kit.
images/: contains all the images for LESS version of the kit.
images/icons/: contains all the icons for LESS version of the kit.
images/temp/: contains all the temporary images for LESS version of the kit.
js/: contains all the JS files for LESS version of the kit.
less/: contains all the stylesheets for LESS version of the kit.
styles/: contains all the stylesheets for different color schemes (LESS Version).
styles/blue/: contains all the images for Blue color scheme (LESS Version).
styles/green/: contains all the images for Green color scheme (LESS Version).
styles/purple/: contains all the images for Purple color scheme (LESS Version).

Note: The folders sweet-candy-css and sweet-candy-less is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.

Browser support

Since Sweet Candy UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.

Getting Started

To start working with Sweet Candy UI Kit you can use a basic template.html, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.

CSS Version: You can use CSS version by dropping contents of sweet-candy-css folder to your project folder and including style.css file in your HTML page: <link href="style.css" media="screen" rel="stylesheet">

LESS Version: You can find it in sweet-candy-less folder. Use LESS if you want to modify Sweet Candy UI Kit. We built it Bootstrap way so you won't find big difference. Use less/variables.less to modify different styles, use style.less to remove needless components.

If you want to start from scratch, the best way is to use our template where all startup files are already included and ready to be used. You can find template.html file both for CSS and LESS version in their respective folders.

Basic Template

You can use a basic HTML template to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the Sweet Candy UI Kit.

<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>

    <!-- main JS libs -->
    <script src="js/libs/modernizr.min.js"></script>
    <script src="js/libs/jquery-1.10.0.js"></script>
    <script src="js/libs/jquery-ui.min.js"></script>
    <script src="js/libs/bootstrap.min.js"></script>

    <!-- Style CSS -->
    <link href="css/bootstrap.css" media="screen" rel="stylesheet">
    <link href="style.css" media="screen" rel="stylesheet">

    <!-- scripts -->
    <script src="js/general.js"></script>

    <!-- Include all needed stylesheets and scripts here -->

    <!--[if lt IE 9]><script src="js/respond.min.js"></script><![endif]-->
    <!--[if gte IE 9]>
    <style type="text/css">
        .gradient {filter: none !important;}
    </style>
    <![endif]-->
</head>

<body>
    <!-- container -->
    <div class="container">

        Start your work here.

    </div>
    <!--/ container -->
</body>
</html>

Typography

Sweet Candy UI Kit uses free Scada webfont available at the Google Fonts. The global default font-size is 14px, with a font-weight of 400. This is applied to the <body>. In addition, all <p> (paragraphs) receive bottom margin of 16px.
Also, all headings, <h1> through <h6> are available.

Example

Example (h1)

Example (h2)

Example (h3)

Example (h4)

Example (h5)

Example (h6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

<h1>Example (h1)</h1>
<h2>Example (h2)</h2>
<h3>Example (h3)</h3>
<h4>Example (h4)</h4>
<h5>Example (h5)</h5>
<h6>Example (h6)</h6>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>

Buttons

Simple Buttons

Use any of the available button classes to quickly create a simple button.

Example

Default Yellow Blue Green Grey White Purple
Yellow Blue Green Purple Grey

<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-yellow"><span>Yellow</span></a>
<a href="#" class="btn btn-blue"><span>Blue</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-grey"><span>Grey</span></a>
<a href="#" class="btn btn-white"><span>White</span></a>
<a href="#" class="btn btn-purple"><span>Purple</span></a>

<a href="#" class="btn btn-yellow btn-large"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-large"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-large"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-large"><span>Purple</span></a>
<a href="#" class="btn btn-grey btn-large"><span>Grey</span></a>

Buttons with rounded corners

Example

Yellow Blue Green Purple
Yellow Blue Green Purple

<a href="#" class="btn btn-yellow btn-round"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-round"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-round"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-round"><span>Purple</span></a>

<a href="#" class="btn btn-yellow btn-round btn-large"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-round btn-large"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-round btn-large"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-round btn-large"><span>Purple</span></a>

Rounded Buttons with hover effect

Button with hover and active states. Four color styles available.

Example

Normal Hover Pressed
Normal Hover Pressed
Normal Hover Pressed
Normal Hover Pressed

<a href="#" class="btn btn-hover btn-yellow"><span>Yellow</span></a>

<a href="#" class="btn btn-hover btn-blue"><span>Blue</span></a>

<a href="#" class="btn btn-hover btn-green"><span>Green</span></a>

<a href="#" class="btn btn-hover btn-purple"><span>Purple</span></a>

Shaped Buttons

Buttons with left and right pointers.

Example

Yellow Blue Green Purple
Yellow Blue Green Purple
Yellow Blue Green Purple
Yellow Blue Green Purple

<a href="#" class="btn btn-yellow btn-right"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-right"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-right"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-right"><span>Purple</span></a>

<a href="#" class="btn btn-yellow btn-left"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-left"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-left"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-left"><span>Purple</span></a>

<a href="#" class="btn btn-yellow btn-right btn-large"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-right btn-large"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-right btn-large"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-right btn-large"><span>Purple</span></a>

<a href="#" class="btn btn-yellow btn-left btn-large"><span>Yellow</span></a>
<a href="#" class="btn btn-blue btn-left btn-large"><span>Blue</span></a>
<a href="#" class="btn btn-green btn-left btn-large"><span>Green</span></a>
<a href="#" class="btn btn-purple btn-left btn-large"><span>Purple</span></a>

Buttons with Icons

Example

Statistic Favorites Comments Games World Photography
Design Ideas TV Show

<a href="#" class="btn btn-icon"><span><i class="icon-statistic"></i>Statistic</span></a>
<a href="#" class="btn btn-icon"><span><i class="icon-favorites"></i>Favorites</span></a>
<a href="#" class="btn btn-icon"><span><i class="icon-comments"></i>Comments</span></a>
<a href="#" class="btn btn-icon"><span><i class="icon-games"></i>Games</span></a>
<a href="#" class="btn btn-icon"><span><i class="icon-world"></i>World</span></a>
<a href="#" class="btn btn-icon"><span><i class="icon-photo"></i>Photography</span></a>

<a href="#" class="btn btn-icon btn-left"><span><i class="icon-design"></i>Design</span></a>
<a href="#" class="btn btn-icon btn-left"><span><i class="icon-ideas"></i>Ideas</span></a>
<a href="#" class="btn btn-icon btn-right"><span><i class="icon-tv"></i>TV Show</span></a>

Buttoned Input

Wrap input type="submit" into span and use available button classes to create a styled Input.

Example

<span class="btn btn-hover btn-blue"><input type="submit" value="Send Message" /></span>

Ribbons

Easily highlight items with Ribbons.

Example

Default Ribbon

Blue Ribbon

Green Ribbon

Purple Ribbon

<div class="ribbon"><span>Default Ribbon</span></div>
<div class="ribbon ribbon_blue"><span>Blue Ribbon</span></div>
<div class="ribbon ribbon_green"><span>Green Ribbon</span></div>
<div class="ribbon ribbon_purple"><span>Purple Ribbon</span></div>

Badges

Easily highlight items with Badges.

Example

<div class="badge"></div>
<div class="badge badge_blue"></div>
<div class="badge badge_green"></div>
<div class="badge badge_purple"></div>
                                    
<div class="badge badge-small"><span></span></div>
<div class="badge badge-small badge_green"><span></span></div>

Rating Stars

Use rating stars for voting.

Example

<div class="rating">
    <span class="star on"><input type="hidden" value="1"></span><!--
    --><span class="star on"><input type="hidden" value="2"></span><!--
    --><span class="star on"><input type="hidden" value="3"></span><!--
    --><span class="star off"><input type="hidden" value="4"></span><!--
    --><span class="star off"><input type="hidden" value="5"></span>
</div>

Form Elements

Checkboxes

Use styled checkboxes instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Checkbox require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>

Example

Default Checkbox

Blue Checkbox

Purple Checkbox

Yellow Checkbox

Switch

<div class="input_styled checklist">
    <div class="rowCheckbox">
        <input name="check-1" type="checkbox" id="check-1" value="check-1">
        <label for="check-1">Default Checkbox</label>
    </div>
    <div class="rowCheckbox rowCheckbox-blue">
        <input name="check-2" type="checkbox" id="check-2" value="check-2">
        <label for="check-2">Blue Checkbox</label>
    </div>
    <div class="rowCheckbox rowCheckbox-purple">
        <input name="check-3" type="checkbox" id="check-3" value="check-3">
        <label for="check-3">Purple Checkbox</label>
    </div>
    <div class="rowCheckbox rowCheckbox-yellow">
        <input name="check-4" type="checkbox" id="check-4" value="check-4">
        <label for="check-4">Yellow Checkbox</label>
    </div>
    <div class="rowCheckbox checkbox-large">
        <input name="check-5" type="checkbox" id="check-5" value="check-5">
        <label for="check-5">Switch</label>
    </div>
</div>

Radio Buttons

Use styled radio buttons instead of the usual ones.

Element specific usage

Attribute name required for input element.

Styled Radio Button require next file to be included into <head> section of the page:

<script src="js/jquery.customInput.js"></script>

Example

Default Radio

Blue Radio

Purple Radio

Yellow Radio

<div class="input_styled inlinelist">
    <div class="rowRadio">
        <input type="radio" name="ex-radio" value="radio-1" id="radio-1" checked>
        <label for="radio-1">Default Radio</label>
    </div>
    <div class="rowRadio rowRadio-blue">
        <input type="radio" name="ex-radio" value="radio-2" id="radio-2">
        <label for="radio-2">Blue Radio</label>
    </div>
    <div class="rowRadio rowRadio-purple">
        <input type="radio" name="ex-radio" value="radio-3" id="radio-3">
        <label for="radio-3">Purple Radio</label>
    </div>
    <div class="rowRadio rowRadio-yellow">
        <input type="radio" name="ex-radio" value="radio-4" id="radio-4">
        <label for="radio-4">Yellow Radio</label>
    </div>
</div>

Text Inputs

All Text inputs are styled.

Element specific usage

Text Inputs with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>

Example

<div class="field_text">
    <input type="text" name="name" id="name" placeholder="Name">
</div>

<div class="field_text omega">
    <input type="text" name="email" id="email" placeholder="Email">
</div>

Textareas

All Textareas are styled similar to Text inputs.

Element specific usage

Textareas with placeholders require next file to be included into <head> section of the page:

<script src="js/jquery.powerful-placeholder.min.js"></script>

Example

<div class="field_text field_textarea">
    <textarea id="message" placeholder="Message"></textarea>
</div>

Scroll Bars

Use any of the available classes to quickly create a styled Scroll Bar for your site.

Element specific usage

Styled Scroll Bar require next files to be included into <head> section of the page:

<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>

Example

These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.

<div class="scrollbar">
    <!--Place your content here-->
</div>

<div class="scrollbar style2">
    <!--Place your content here-->
</div>

<div class="scrollbar style3">
    <!--Place your content here-->
</div>

<div class="scrollbar style4">
    <!--Place your content here-->
</div>

<div class="scrollbar style5">
    <!--Place your content here-->
</div>
                                    
<div class="scrollbar style6">
    <!--Place your content here-->
</div>

Enable Scroll Bars via JS:

<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style2').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style3').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style4').jScrollPane({
            verticalDragMaxHeight: 43,
            verticalDragMinHeight:43
        });

        jQuery('.scrollbar.style5').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style6').jScrollPane({
            verticalDragMaxHeight: 23,
            verticalDragMinHeight:23
        });
    });
</script>

Progress Bars

Use styled Progress Bars on your site.

Element specific usage

Styled Progress Bar require next files to be included into <head> section of the page:

<script src="js/jquery-ui.min.js"></script>
<script src="js/progressbar.js"></script>

Example

0% 100%

<!-- Default Progress Bar -->
<div id="progressBar1" class="progressbar">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="pbar"></div>
    <div class="elapsed"></div>
    <div class="remained"></div>
</div>

<!-- Progress Bar with download Bar -->
<div id="progressBar2" class="progressbar style2">
    <span class="mark-left">0%</span>
    <span class="mark-right">100%</span>
    <div class="percent"></div>
    <div class="pbar">
        <div id="downloadBar2" class="downloadbar">
            <div class="pbar"></div>
        </div>
    </div>
    <div class="elapsed"></div>
    <div class="remained"></div>
</div>

Enable Progress Bars via JS:

<script type="text/javascript">
    $(document).ready(function() {

        // Default Progress Bar
        $('#progressBar1').anim_progressbar({
            totaltime: 600
        });

        // Progress Bar with download Bar
        $('#progressBar2').anim_progressbar({
            totaltime: 800
        });
        $('#downloadBar2').anim_progressbar({
            totaltime: 500
        });

    });
</script>

Range Slider

Range Slider allow users to select a value from a numerical range by simply dragging a slider.

Element specific usage

Range Slider require next files to be included into <head> section of the page:

<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slider.bundle.js"></script>
<script src="js/jquery.slider.js"></script>
<link rel="stylesheet" href="css/jslider.css">

Example

<div class="range-slider">
    <input id="price_range" type="text" name="price_range" value="260;800">
</div>

Enable Price Range via JS:

<script type="text/javascript" >
    jQuery(document).ready(function($) {
        $("#price_range").rangeslider({
            from: 50,
            to: 1000,
            limits: false,
            scale: ['$50', '$1000'],
            heterogeneity: ['50/500'],
            step: 10,
            smooth: true,
            dimension: '$'
        });
    });
</script>

Knobs

Element specific usage

Knob elements require next file to be included into <head> section of the page:

<script type="text/javascript" src="js/knobRot-0.2.2.js"></script>

Volume Knob

Adjust volume with this element.

Example

<div class="widget-knob widget-volume">
    <input type="text" value="77"  autocomplete="off" id="volume" />
</div>

Enable Volume via JS:

<script type="text/javascript">
    $(document).ready(function() {
        $('#volume').knobRot({
            'classes': ['volume'],
            'dragVertical': false,
            'frameCount': 58,
            'frameWidth': 80,
            'frameHeight': 80,
            'detent': true,
            'detentThreshold': 5,
            'minimumValue': 0,
            'maximumValue': 100,
            'hideInput': true
        });
    });
</script>

Balance Knob

Adjust balance with this element.

Example

<div class="widget-knob widget-balance">
    <input type="text" value="0" autocomplete="off" id="balance" />
</div>

Enable Balance via JS:

<script type="text/javascript">
    $(document).ready(function() {
        $('#balance').knobRot({
            'classes': ['balance'],
            'dragVertical': false,
            'frameCount': 35,
            'frameWidth': 120,
            'frameHeight': 120,
            'detent': true,
            'detentThreshold': 2,
            'minimumValue': -50,
            'maximumValue': 50,
            'hideInput': true
        });
    });
</script>

Use it as a main menu for your site.

Example

<div class="dropdown-wrap">
    <i class="dropdown-icon dropdown-icon2"></i>
    <ul class="dropdown clearfix">
        <li><a href="#"><span>Home</span></a>
            <ul>
                <li><a href="#">Two Columns</a></li>
                <li><a href="#">Three Columns</a></li>
                <li><a href="#">Four Columns</a></li>
            </ul>
        </li>
        <li><a href="#"><span>About</span></a>
            <ul>
                <li><a href="#">About Page</a></li>
                <li><a href="#">Pricing Page</a></li>
                <li><a href="#">Home Pages</a>
                    <ul>
                        <li><a href="#">Gallery images</a></li>
                        <li><a href="#">OneByOne Slider</a></li>
                        <li><a href="#">Video in header</a></li>
                        <li><a href="#">Image & Video Slider</a></li>
                    </ul>
                </li>
                <li><a href="#">Services Page</a>
                    <ul>
                        <li><a href="#">Services Page (var1)</a></li>
                        <li><a href="#">Services Page (var2)</a></li>
                    </ul>
                </li>
                <li><a href="#">Sidebar Right</a></li>
                <li><a href="#">Sidebar Left</a></li>
                <li><a href="#">Shortcodes</a>
                    <ul>
                        <li><a href="#">Buttons & Lists</a>
                            <ul>
                                <li><a href="#">Services Page (var1)</a></li>
                                <li><a href="#">Services Page (var2)</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Text & Images</a></li>
                        <li><a href="#">Charts</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#"><span>Contacts</span></a></li>
        <li><a href="#"><span>Services</span></a></li>
        <li><a href="#"><span>Portfolio</span></a></li>
        <li><a href="#"><span>Team</span></a></li>
        <li><a href="#"><span>Blog</span></a></li>
        <li><a href="#"><span>Shop</span></a></li>
    </ul>
</div>

Use it as a single item menu.

Example

<div class="dropdown-wrap styled">
    <ul class="dropdown clearfix">
        <li><a href="#"><span>Settings</span></a>
            <ul>
                <li><a href="#">About Page</a></li>
                <li><a href="#">Pricing Page</a></li>
                <li><a href="#">Home Pages</a>
                    <ul>
                        <li><a href="#">Gallery images</a></li>
                        <li><a href="#">OneByOne Slider</a></li>
                        <li><a href="#">Video in header</a></li>
                        <li><a href="#">Image & Video</a></li>
                    </ul>
                </li>
                <li><a href="#">Services Page</a></li>
                <li><a href="#">Sidebar Right</a></li>
                <li><a href="#">Sidebar Left</a></li>
                <li><a href="#">Shortcodes</a></li>
            </ul>
        </li>
    </ul>
</div>

Tabs

Add quick, dynamic tab functionality to transition through panes of local content. Two different Tab styles available.

Young gypsy voice

Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.

Toy Story 3

A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.

Young gypsy voice

A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.

Events
⁵Reminders
Starred
Archive
Tab5