In downloaded package you'll find "HTML" folder, which contains main theme files: HTML files, Jquery plugins and libraries, images, CSS files:
boo/
├── _bootstrap/
└── assets/
│ ├── css/
│ │ ├── lib/
│ │ │ ├── bootstrap.css
│ │ │ └── bootstrap-responsive.css
│ │ ├── boo.css
│ │ ├── boo-coloring.css
│ │ ├── boo-ension.css (change name)
│ │ ├── boo-utility.css.css
│ │ ├── icon-fugue.css
│ │ ├── icon-fugue.min.css
│ │ └── style.css
│ ├── data/
│ │ └── source for data
│ ├── fonts/
│ │ ├── awesome/
│ │ │ └── font icon
│ │ └── fontello/
│ │ │ └── font icon
│ ├── ico/
│ │ └── icon for device
│ ├── img/
│ │ ├── background/
│ │ │ └── background .img
│ │ ├── demo/
│ │ │ └── demo .img
│ │ ├── icon/
│ │ │ ├── arrows/
│ │ │ │ └── arrows .img
│ │ │ └── fugue-icon/
│ │ │ └── icons
│ │ ├── loader/
│ │ │ └── loaders image
│ │ ├── table/
│ │ │ └── image for datatable
│ ├── js/
│ │ ├── demo/
│ │ │ ├── demo-bootstrap-progressbar.js
│ │ │ ├── demo-dashboard1.js
│ │ │ ├── demo-dashboard2.js
│ │ │ ├── demo-form.js
│ │ │ ├── demo-fullcalendar.js
│ │ │ ├── demo-jquery.dataTables.js
│ │ │ ├── demo-list.js
│ │ │ ├── demo-modal.js
│ │ │ ├── demo-statistic-flot.js
│ │ │ ├── demo-statistic-sparkline.js
│ │ │ └── demo-wisyhtml5.js
│ │ ├── lib/
│ │ │ ├── bootstrap/ (new folder)
│ │ │ │ └── bootstrap framework js
│ │ │ ├── jquery.cookie.js
│ │ │ ├── jquery.js
│ │ │ ├── jquery.date.min.js
│ │ │ ├── jquery.load-image.min.js
│ │ │ ├── jquery.mousewheel.js
│ │ │ └── jquery-ui.js
│ │ └── application.js (free)
│ │ └── core.js (separate app)
│ ├── plugins/
│ │ ├── bootstrap-bootbox/
│ │ ├── bootstrap-colorpicker/
│ │ ├── bootstrap-datepicker/
│ │ ├── bootstrap-daterangepicker/
│ │ ├── bootstrap-datetimepicker/
│ │ ├── bootstrap-fileupload/
│ │ ├── bootstrap-fuelux/
│ │ ├── bootstrap-image-gallery/
│ │ ├── bootstrap-modal/
│ │ ├── bootstrap-multiselect/
│ │ ├── bootstrap-progressbar/
│ │ ├── bootstrap-rowlink/
│ │ ├── bootstrap-select/
│ │ ├── bootstrap-timepicker/
│ │ ├── bootstrap-tiggle-button/
│ │ ├── bootstrap-wizard/
│ │ ├── bootstrap-wizard-2/
│ │ ├── bootstrap-wysihtml5/
│ │ ├── pl-component/
│ │ │ ├── fullcalendar/
│ │ │ └── rangeslider/
│ │ ├── pl-content/
│ │ │ ├── jpages/
│ │ │ └── list/
│ │ ├── pl-editors/
│ │ ├── pl-extension/
│ │ │ └── google-code-prettify/
│ │ ├── pl-file/
│ │ │ └── file-upload.js
│ │ ├── pl-form/
│ │ │ ├── counter/
│ │ │ ├── duallistbox/
│ │ │ ├── elastic/
│ │ │ ├── inputmask/
│ │ │ ├── select2/
│ │ │ ├── uniform/
│ │ │ └── validate/
│ │ ├── pl-gallery/
│ │ │ ├── load-image/
│ │ │ ├── nailthumb/
│ │ │ └── wookmark/
│ │ ├── pl-system/
│ │ │ ├── cookie/
│ │ │ ├── datejs/
│ │ │ ├── mousewheel/
│ │ │ ├── nicescroll/
│ │ │ ├── selectivizr/
│ │ │ └── xbreadcrumbs/
│ │ ├── pl-system-info/
│ │ │ ├── gritter/
│ │ │ ├── notyfy/
│ │ │ └── qtip2/
│ │ ├── pl-table/
│ │ │ └── datatable/
│ │ ├── pl-visualization/
│ │ │ ├── easy-pie-chart/
│ │ │ ├── flot/
│ │ │ ├── knob/
│ │ │ ├── nicescroll/
│ │ │ ├── percentageloader/
│ │ │ └── sparkline/
└── docs/
└── upload/
In total there are 27 main theme .html files:
Boo comes equipped with HTML, CSS, and JS for all sorts of things. It uses the great bootstrap as a base. Refer to the Bootstrap documentation.
You can use all the components that Bootstrap offers this and other bonuses added to Boo. Please note that this is a starter version. We will try to locate the maximum Boo.
Together, the Components and JavaScript plugins sections provide the following interface elements:
With a brief intro into the contents out of the way, we can focus on putting Boo to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the File structure.
All these html files have certain html blocks in their source code. All the html blocks are clearly commented out and should be easy to spot. Each HTML file contains navigation sidebar. The main structure of a typical page would be:
<div class="page-container">
<div id="header-container">
<div id="header">
<div class="navbar navbar-inverse navbar-fixed-top"> ... </div>
<div class="header-drawer"> ... </div>
</div>
</div>
<!-- // header-container -->
<div id="main-container">
<div id="main-sidebar" class="sidebar sidebar-inverse"> ... </div>
<!-- // sidebar -->
<div id="main-content" class="main-content container-fluid"> ... </div>
<!-- // main-content -->
</div>
<!-- // main-container -->
<footer id="footer-fix"> ... </footer>
</div>
<!-- // page-container -->
Use blank templates for your code placed in your folder template
templates/tmp-layout.htmlWith those two files added, you can begin to develop site or application with Boo.
I included .psd files in to directories source/PSD:
update to 1.3.0 will include more psd