Welcome to Bodeo! This theme and site template was created with simplicity, integration and customization in mind. To integrate Bodeo with your project, you'll need:
The default "theme" file is `/css/bootstrap-custom.css`.
| /app | AngularJS starter app with simple routing, views and mock data services. |
| /assets | Images, videos and media files. |
| /blank | Minimal site with homepage and empty "blank" page template. |
| /css | CSS files for this theme, Bootstrap and font icons. |
| /fonts | Files (.ttf, .woff, .svg, etc...) for any fonts referenced from the CSS files. |
| /gulp | Gulp script to rebuild / recompile using NPM and Gulp. |
| /js | Javascript files for jQuery app, _inc loader.js for includes and Bootstrap. |
| /partials | Include files loaded by `loader.js`. |
| /sass | The SASS source files that are used to generate the theme's CSS files. |
| /static | Full static html version without dynamic includes, templating or data. |
| demos.html | Demos page with various entry points. |
| docs.html | This file (you are here!). |
| index.html | The home page (templated with _inc loader). |
| *.html | All html template pages containing partial `loader.js` includes. |
| /about.html | About page to describe a site or company |
| /blank.html | A blank page ready for content |
| /blog-detail.1.html | Alternate single Blog post layout with comments and related posts below |
| /blog-detail.html | Single Blog post page with comments and related posts below |
| /blog.html | Blog page with carousel slider, highlighted posts and sidebar |
| /cards.html | Page with various examples of cards and card layouts |
| /cart.html | A shopping cart page with list of products and link to checkout |
| /clients.html | Client or testimonials page with profiles and quotes |
| /contact.html | Contact information page and contact form |
| /dashboard.html | Admin dashboard style page various cards, tabs and sidebar menu |
| /demos.html | Demos page with various examples |
| /docs.html | Documentation (you are here) |
| /elements.html | Reusable widgets and elements than demonstrate various UI components |
| /error-404.html | 404 not found error page |
| /faq.html | Frequently Asked Questions page using an accordion-style collapsing sections |
| /features.html | Features grid with icons and headings, and an alternating "featurettes" list |
| /index.html | Hello home page! A long scrolling slider with various sections |
| /invoice.html | An example billing invoice page with tables |
| /layout-2-col.html | A 2-column example layout page with sidebar and main content area |
| /layout-3-col.html | A 3-column example layout page with sidebar, ads and main content area |
| /layout-full.html | A full-screen width example layout page with sidebar and main content area |
| /layout-grid.html | A grid layout page with images that can be used for blocks of content |
| /layout-image.html | Full-screen photo image background layout with centered overlay CTA |
| /layout-masonry.html | A multi-column layout for multiple cards or content blocks in masonry pattern |
| /layout-offcanvas.html | A layout with off-canvas overlay multi-level sidebar menu on the left |
| /layout-sidebar.html | A layout with responsive multi-level sidebar menu on the left |
| /layout-slider.html | layout with full-screen carousel images and overlay caption on each slide |
| /layout-video.html | Full-screen video background layout with centered overlay CTA |
| /legal.html | Legal jargon page for terms, privacy notice, etc.. |
| /login.html | User Login and Registration (Sign-up) forms example page |
| /pg-medical.html | Medical or dental home page example |
| /pg-restaurant.html | Restaurant dining menu example |
| /portfolio.html | A portfolio layout with carousel and image grid |
| /pricing.html | Pricing or options tables page example |
| /product-detail.html | Single product details page with Add to Cart button |
| /products.html | Products list page for e-commerce |
| /results.html | Search results page with form |
| /user-profile.html | Tabbed user profile page with image and form |
The `/partial` folder contains over 40 smaller, reuseable
code snippets that demonstrate various elements and content layouts such as navbars, forms, content sections, cards, lists, option tables and more. You can see
that the partials are "included" in the *.html templates using a class="_inc" and data-template="..." reference in the HTML.
The `/js/loader.js` file is a generic jQuery based "include" mechanism to enable partial files.
To include a partial file, use the following syntax in HTML:
<div class="inc_" data-template="./partials/myinclude.html"></div><div class="inc_" data-template=... include reference.
The theme files are modular so that you quickly implement it for your project by including needed resources. Depending on if your site implementation is static or dynamic, there are several approaches to "building" a site utilizing the theme and template pages. Most likely building your site will be an iterative process that utilizes one or more of the following options:
To start with a minimal number of pages, try the files in the `blank` folder which contains a site with only `index.html` and "blank.html". You can modify these pages, and copy additional pages as needed from the `/static` folder which contains the full site.
If you'd like to start closer to the demo site, you can copy and modify the files in the `/static` folder which is a full working copy of the site.
Most implementations are not completely static sites, and normally templating is used to include repeating portions of each page such as the overall site container (wrapper), navbar and footer. In this case, you may find the `/partials` files useful to build a site that utilizes "views" or a template inclusion mechanism such as Angular, Mustache, EJS, Razor, Jade, Vue, Handlebars, etc... The partial files are designed to be singular in purpose, reuseable, and easy to modify. The partial files are named according to the their purpose or content.
The `js\script.js` file is a minimal jQuery script. This script contains logic for some of the components such as modals, popovers, navbar affix, smooth scrolling, and WOW.js animations. For more information see the comments in the script.js file.
The `/app` folder contains a AngularJS (1.x) starter app. The app includes "mock" JSON data services that can be replaced with real data services if you intend to integrate AngularJS with your app. You'll also find examples of using the data in repeating paged lists, and detail views that demonstrate various content layouts. The AngularJS app (services and controllers) is in `/app/app.js`. The main app template is `/app/index.html`, and the example views are contained in the `/app/views` folder. If you have a basic understanding of AngularJS this app will help you get started.
Alternate color themes (eg: `theme-dark.css`) can be found in the the `\css` folder. You can use these alternate themes by renaming any of the alternate themes to `bootstrap-custom.css`, or by changing all the references in the HTML head link that references href="css/bootstrap-custom.css" (eg: change the link href="css/bootstrap-custom-dark.css"). Make sure you make a copy of the original `bootstrap-custom.css` before renaming or overwriting it.
If you're familiar with using SASS, theme color changes can be made by modifying the `colors.scss` SASS file, and then recompiling the SASS to CSS.
All of the SASS variable names used in `colors.scss` are self-explanatory and come from Bootstrap's variable names. The only additional
variables for this theme are:
$brand-accent - used for the main highlight or bold accent color
$brand-alt - used for an alternate background color
To create a new color scheme, copy one of the existing color subfolders in `sass\custom\` and rename the new folder accordingly. Any changes you make to the `colors.scss` file
in the new color subfolder will allow the new color theme to generated when the SASS is recompiled.
If you want to make style changes beyond the colors, the `sass\custom` folder contains the `_variable.scss` source file that is used
to create the theme and override the default Bootstrap variables (`sass\bootstrap\_variables.scss`). You can make the desired changes to the `sass\custom\_variable.scss`
file, and then recompile the theme using SASS. Remember to backup or copy the original files before making any changes.
The css/*.css files can be recompiled from the SASS (.scss) source files using NPM and Gulp (see the gulpfile in the `/gulp` directory).
Another way to change the theme style is to use an additional CSS "override" file. The CSS override `styles.css` must be referenced after the theme
CSS file (bootsrap-custom.css) in the HTML <head> section of the Web pages. For exmaple:
<link rel="stylesheet" href="./css/bootstrap-custom.css">
<link rel="stylesheet" href="./css/styles.css">
A simple CSS pre-loading effect can by used by placing the class `preload` in the BODY or HTML tag of any page. To disable the preloader, simply remove the `preload` class from the BODY tag. An alternate preloader image can be used by changing the CSS `background-image` property of the `.preload::after` class in the CSS file.
The `layout-photo.html` utilizes the jQuery `toggleAffix()` function which will "affix" the #topNav (Navbar) once it's position reaches the top of the viewport.
The position of
the Navbar is controlled by the `.wrapper-affix #topNav` and `.wrapper-affix #topNav.affix` CSS definitions in the theme CSS. Initially, the `.wrapper-affix #topNav` is
`position: static`. When the viewport window is scrolled the `toggleAffix()` function "watches" the current scroll position. When the scroll position reaches then bottom of
the element(s) preceding the #topNav, the `.affix` class is added to #topNav which applies any CSS definitions for `.wrapper-affix #topNav.affix`.
To use this on other
page(s), add `class="wrapper-affix"` to the element that contains the element to be affixed (data-toggle="affix").
Dan Eden's [animate.css](https://github.com/daneden/animate.css) is included for CSS animations. Any of the many animation effect CSS classes can simply be added to the
element you wish to animate:
<div class="fadeIn">This will fade in</div>Here are the open source projects that made this all possible. Please help us by supporting these project and providing the appropriate credit.
The website pages/app don't work when opened in a web browser.
The page must be installed/deployed on a Web server and served over http://. Opened the files directly in the Web browser (file:\\) will not work.
Some font files won't load or return 404 errors.
Make sure the Web server supports the `.woff` and `.woff2` Mime types. These can be added by adding the appropriate extension and Mime type on the Web server:
Extension: .woff
MIME type: application/woff
The AngularJS app doesn't load any data.
Make sure the Web server supports the `.json` Mime types. This can be added by adding the .json extension and Mime type on the Web server:
Extension: .json
MIME type: application/json
For questions and help please contact us via the "Contact" section at: http://themes.guide