Brave

Documentation Overview

To edit this theme, basic knowledge about HTML, CSS, JS & Bootstrap is required. You can learn HTML, CSS and JS from W3Schools. You can learn Bootstrap by visiting official site.

All components used in the theme are well commented. If you like to use any component then open the HTML file and refer the code.

Note: Before you make any changes, take a backup of all files and folders.

File Structure

Theme consists of 3 main folders namely css, img & js.
Inside css folder you will find styles used in this theme. There is one more folder called styles which has custom styles and skins. style.css is main stylesheet.
Inside img folder you will find all images used in the theme.
Inside js folder you will find all Javascript files. main.js is the main js file. To add your own code you need to use custom.js file.

Editing

To edit files you need any code editor. I recommend using Notepad++.

Add Custom Styles

To add custom styles, create new style sheet in css folder. Include the style file before the closing tag of <head>. Make sure that you are including this new file after style.css

If you want to add any extra CSS files, copy the file to css folder and link it before style.css.

<link href="css/FILE-NAME.css" rel="stylesheet">
Add Custom JavaScript

To add JS, just create a new java script file in js folder. Include the newly created js file before the closing tag of <body>. Make sure that you are including this new file after custom.js. Alternatively you can also include Javascript code directly to the html file by enclosing the code in <script> ...your code... </script> and adding this above the closing tag of <body>

If you want to add any extra JS files, copy the file to js folder and link it before custom.js.

<script src="js/FILE-NAME.js"></script>
Editing HTML

Almost all html codes in this theme are neatly commented. All you need to do is to read the comment and modify the content based on your need.

LESS

This theme supports LESS. To edit LESS, go to less folder, open skin-less.less in your code editor. Make changes. Once done compile the file. You can use WinLess application (for Windows) to comple less files. skin-less.css file will be generated as a result of compilation. You just need to copy this file to css/styles folder replacing old file.

Remove Style Switcher

Style switcher is just for demo purpose only. If you don't want remove the style switcher js file from all html files. In case if you like to keep style switcher, note that some of the features of style switcher won't work on offline. THey only work when you upload it to server. Below is the style switcher linking code which you will find in all html files.

<script src="style-switcher/style-switcher.js"></script>

Add Colors

This theme supports some multiple colors which you can add to texts and backgrounds. Here are the list of colors which this theme supports.

White, Black, Red, Light Blue (lblue), Blue, Green, Orange, Purple, Yellow, Rose, Brown.

Add color to the text, specify color name to the class - <span class="lblue"> ...Some Text... </span>

Add color to the background, specify color name along with the prefix bg- to the class - <span class="bg-lblue"> ...Some Text... </span>

Fonts

This theme uses Font Awesome Icons for Icons and Google Web Fonts for Fonts.

Icon Font

Refer Font Awesome Icons for list of fonts. To use any fonts in the theme, you need to use the following code.

/* Latest version */
<i class="fa fa-XXXX"></i>
Web Font

This theme uses Open Sans. To add or change font visit Google Web Fonts, Choose the font, Copy the @import code. Paste it in top of your stylesheet.

@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600');

Add New Page

This theme comes with 0-base-1.html or 0-base-2.html file. This is the base file using which you can create you own page. Create a copy of the page, rename it and open in Text editor. Edit the title in <title> section. Change heading and add your content. Done.

This theme has very simple navigation menu. You just need to add unordered list with navigation links for navigation menu. Noting complex. For sub menu, just add another unordered list inside <li> tag.

Elements

This theme supports multiple colors namely white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown. You can use the above colors in buttons, highlights, badges, text colors, background colors, labels, progress bar, panels, border, etc., If you like to use the default theme color, then you need to use the word color.

# Component Code
1 Dropcap Use class dropcap-x (x = 1,2,3).
2 List Use class list-x (x = 1 to 9) on UL tag.
3 Square Use class square-x (x = 1 to 5).
4 Circle Use class circle-x (x = 1 to 5).
5 Rounded corners Use class rounded-x (x = 1 to 5).
6 Divider Use class divider-x (x = 1 to 10).
7 Text colors Use class white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown.
8 Background colors Use the class bg-xxx (xxx denotes white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown).
9 Border colors Use the class br-xxx (xxx denotes white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown).
10 Border sizes Use the class br-size-x (xxx 1 to 5).
11 Border style Use the class br-style-x (xxx 1,2,3).
12 No Border Use the class br-no-left, br-no-right, br-no-top, br-no-bottom.
13 Button colors Use the class btn btn-xxx. Use the above mentioned color names for xxx.
14 Other button classes Along with the btn class, use classes btn-no-border to remove border, btn-round for round button, btn-transparent for transparent button.
15 Label Same as button for colors (label-xxx). You can also use label-xs, label-sm, label-lg for sizes.
16 Badge Like button you can also use colors for badges using the class badge-xxx (xxx denotes colors).
17 Highlight Use the class highlight-XXX (xxx for color) hightlighting text.
18 Box Shadow First create a block with the class box-shadow-outer. Inside create one more block with the class box-shadow-x (x - 1 to 6).
19 Progress bar size Use the class pb-xs, pb-sm, pb-md, pb-lg along with the class progress for progress bar sizes
20 Progress bar colors Use the class progress-bar-xxx (xxx for color) along with the class progress-bar for colors.
21 Panel colors Use the class panale-xxx (xxx for color) along with the class panel for panel colors.
22 Brand with Background Enclose the social media link block with the class brand-bg to add background to icons.
23 Brand without Background Enclose the social media link block with the class brand to add text color to icons.
24 Boxed Layout Use the class boxed along with the body tag for boxed layout. In boxed layout you can also add patterns and images as body background. For pattern add extra class pattern-x (x = 1 to 5) and for image use class img-x (x = 1 to 5).
Owl Carousel

Owl carousel uses following data attributes to make your life easier. data-items="4" data-auto-play="true" data-pagination="true" data-single-item="false". These data attributes are self explanatory. Change the values and you are good to go. Refer the owl-carousel.html file for markup.

Bootstrap Carousel

Bootstrap carousel should have id. I am using bs-carousel-X. Where "X" denotes number". If a page has more than 1 carousel, then add the new carousel with the id bs-carousel-1, bs-carousel-2. You also need to update the id in, "carousel indicators" section and "carousel control" section.
Carousel comes with 3 main data attributes which you can customize. They are...
data-interval - Time delay between item cycle. Default value "5000".
data-pause - Pause on hover. Default value "pause".
data-wrap - Continues cycle or stop at the end. Default value "true".

Social media

This theme supports lot of social media icons. Refer brave-components.html file for more details. Below code shows the basic markup for social media icons.

No Background Color
<div class="brand">
	<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
	<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
	<a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
	<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>

With Background Color
<div class="brand-bg">
	<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
	<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
	<a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>
	<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
</div>
Panel

Brave supports different colors for Bootstrap panels. Here is the markup of panels.

<div class="panel panel-blue">
	<!-- Panel heading -->
	<div class="panel-heading">Panel Heading</div>
	<!-- Panel body -->
	<div class="panel-body">
		Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic. Anim pariatur cliche reprehenderit, enim eiusmod high life  terry richardson ad squid. 
	</div>
	<!-- Panel footer -->
	<div class="panel-footer">Panel Footer</div>
</div>
How to use UI Designs?

This theme comes with tons of UI Designs. You can find the ui designs in ui-designs folder. All designs are numbered as ui-x.html (x = index). Just open the file and copy the HTML part which starts from <div class="ui-x"> (x = index) and paste the code in your project. You also need to copy CSS file from css folder. In case if the UI design uses Javascript you also need to copy the Javascript code which can be found at the bottom of the html file. Some UI designs uses external plugins, in that case you also need to include the plugin files.

Revolution Slider

This theme comes with Revolution slider, a premium slider plugin. Documentation for the plugin is attached, please check it out to customize.

How to use Smart form

This theme uses Smart Form, a premium form plugin. This form supports extra form fields, date picker, time picker, month picker, color picker, UI slider, stepper, validation, etc., Documentation for the smart form is attached with this project. Refer the documentation to customize the form.

Plugins

This theme uses following plugins. To customize the plugins, you need to refer the official Plugin documentation found in below links.


Copyright 2013 - Responsive Web Inc