File Structure #
Discover what’s included in FLuxo, including our precompiled and source code flavors. Remember, Fluxo and Bootstrap’s JavaScript plugins require jQuery.
Precompiled Package #
Download package contains two main folders: html/ and documentation/.
Once downloaded, unzip the compressed folder and you'll see something like this:
Fluxo/
├── Documentation/
│ ├── index.html
│ ├── css/
│ │ ├── *.css
│ │ ├── vendor/
│ │ ├── ...
│ ├── images/
│ │ ├── *.png
│ │ ├── ...
│ ├── js/
│ │ ├── *.js
│ │ ├── init/
│ │ ├── min/
│ │ ├── vendor/
│ └── sass/
│ │ ├── *.scss
│ │ ├── custom/
│ │ ├── modules/
│ │ ├── partial/
│ │ ├── vendor/
├── HTML/
│ ├── index.html
│ ├── about.html
│ ├── blog-full-width.html
│ ├── blog-left-sidebar.html
│ ├── blog-right-sidebar.html
│ ├── blog-single-post.html
│ ├── careers.html
│ ├── career-single.html
│ ├── contact.html
│ ├── fluxo-starter.html
│ ├── login.html
│ ├── pricing.html
│ ├── signup.html
│ ├── css/
│ │ ├── main.css
│ │ ├── main.css.map
│ │ ├── min/
│ │ ├── vendor/
│ │ | ├── webfonts/
│ │ ├── ...
│ ├── images/
│ │ ├── *.png
│ │ ├── clients/
│ │ ├── faviconn/
│ │ ├── square_icons/
│ │ ├── stocks/
│ ├── js/
│ │ ├── main.js
│ │ ├── init/
│ │ ├── min/
│ │ ├── vendor/
│ └── sass/
│ │ ├── main.scss
│ │ ├── modules/
│ │ ├── partial/
└── └── └── vendor/This is the most basic form of Fluxo: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (main.*, wb.*-init.js),
as well as compiled and minified CSS and JS (min/main-min.*, min/wb.*-init-min.js).
CSS Files #
Fluxo comes with both minified and expanded versions of CSS. It also already includes the latest minified version of Bootstrap v4.3.1.
JS Files#
The foundation of the JavaScript structure in Fluxo is based on one main object which does not change the root when the new functionalities are added, but instead, it only expands without affecting the behavior of the core object. The name of the object is Main JS and the content of this object looks like this:
/**
* Main JS - GLobat init for template
*
* @author We Both
* @version 1.0
*/
$(function () {
'use strict';
/* 1. Mobile Nav Offcanvas Toggle: */
$('[data-toggle="offcanvas"]').on('click', function () {
$('.offcanvas-collapse').toggleClass('open');
});
/* 2. Dropdown Menu */
// Variable
var $dropdown = $('.nav--has-sub-menu [data-toggle="dropdown"]');
// Methods
function initSubmenu($this) {
if (!$this.next().hasClass('show')) {
$this.parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $submenu = $this.next(".dropdown-menu");
$submenu.toggleClass('show');
$submenu.parent().toggleClass('show');
}
// Events
$dropdown.on('click', function() {
initSubmenu($(this));
return false;
});
/* 3. Smooth Scroll Anchor */
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
}
});
}
}
});
/* 4. Search Bar Toggle */
var $searchBtn = $('.btn-search-toggle');
var $searchBar = $('.search-bar');
$searchBtn.click(function(){
$searchBar.animate({
width: "toggle"
});
});
});Fluxo also comes with separate JavaScript files for plugins initializations which located inside js/init/ folder. The file could be called only if needed on a page (i.e. You are using certain jQuery plugins on a page).
This way will prevent any conflict between the Fluxo code and third party plugins.
These are the current init javascript files, preficed with wb.:
HTML/
├── js/
│ ├── init/ # js files for initializing plugins
│ │ ├── min/
│ │ ├── wb.ajaxchimp-init.js
│ │ ├── wb.magnificpopup-init.js
│ │ ├── wb.multiselect-init.js
│ │ ├── wb.swiper-init.js
│ │ ├── wb.validate-init.js
│ ├── min/ # minified version of main.js file
│ ├── vendor/ # jQuery plugin files
└── └── main.js # primary js fileAssets #
Beside the html, css, and js files Fluxo also has another assets on its main folder, they are the images/ and sass/ which can be understood by their names.
Image Files #
Inside the images/ folder are images used for the demo purpose. Some images might be not useful for your website/project but some like icons might be useful for you.
Sass Files #
Fluxo is developed with the power of Sass. Inside sass/ folder are the main and partials scss files. Below are the structure of this folder:
HTML/
├── sass/
│ ├── custom/ # Custom files for overriding
│ ├── ├── _custom-variables.scss
│ ├── ├── _custom-styles.scss
│ ├── modules/ # Common modules
│ ├── ├── _all.scss # Include to get all modules
│ ├── ├── _*.scss
│ ├── partials/ # Partials
│ ├── ├── _base.scss # imports for all mixins + global project variables
│ ├── ├── _*.scss
│ ├── vendor/ # CSS or Sass from other projects
├── └── main.scss # primary Sass fileHere is the explanation of 3 subfolders inside sass/ folder:
modules/: reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.partials/: this is where the meat of Fluxo CSS is constructed.vendor/: directory for third-party CSS.