Brave UI

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.

Browser Issues

All UI Components works great on all latest browsers. As for old IE browser, there is no support for IE 6, IE 7, IE 8. As for IE 9 most of the designs works fine, except few designs namely - 80,89,244,266. There may be some more designs which won't be working perfectly on IE 9. And IE 9 don't support latest CSS3 properties namely animation, transition, box shaodow, etc., So if any designs uses any CSS3 properties then it won't be working on IE9. Other than these, there will be some issues in layout, forms, etc., in IE9.

File Structure

Theme consists of 3 main folders namely css, img & js.
Inside css folder you will find styles used in this theme. style-X.css (X denotes number) is the main stylesheet.
Inside img folder you will find all images used in the theme.
Inside js folder you will find all Javascript files. There are somemore folders, which includes files for some plugins.

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-X.css (X denotes number).

If you want to add any extra CSS files, copy the file to css folder and link it before style-X.css (X denotes number).

<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>. 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.

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, Grey, 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');

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 Text colors Use class white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown.
2 Background colors Use the class bg-xxx (xxx denotes white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown).
3 Border colors Use the class br-xxx (xxx denotes white, grey, black, red, green, lblue, blue, orange, yellow, purple, rose, brown).
4 Button colors Use the class btn btn-xxx. Use the above mentioned color names for xxx.
5 Label Same as button for colors (label-xxx). You can also use label-xs, label-sm, label-lg for sizes.
6 Badge Like button you can also use colors for badges using the class badge-xxx (xxx denotes colors).

How to use?

Using my UI components are very easy. Here are simple steps you need to follow.

  • First open the HTML file ui-x.html (x denotes number).
  • Go to css folder and open the style-x.css (x denotes same number as above).
  • Copy the HTML code inside body tag to your project.
  • Copy the style-x.css file to your project.
  • In HTML see if there is any new plugins included. You can do that by checking head section and bottom of the body section. The default css files are bootstrap.min.css, font-awesome.min.css, style-x.css and default js files are jquery.js, bootstrap.min.js, placeholder.js, respond.min.js, html5shiv.js. If there is anyother files other than above said CSS and JS files, then it means some extra plugins are needed for the UI. You need to copy correct CSS or JS files from CSS and JS folder to your project.
  • If plugins are being used in UI Design, then go to the bottom of the page and check if there is any JS code. Most of the plugins need some JS code to make it work. You also need to copy that to your project.
  • While you are including, you may face some problems in layout. You can easily fix them by going through HTML and CSS.

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