Forque is a Bootstrap Admin Theme, Template and UI Kit with full jQuery, React and Vue 2 versions included. This template has multiple theme options and dashboard layouts. Forque is integrated with Chart.js, DataTables.net, and includes working "Inbox", "Task", and "Search" apps that utilize mock data.
Forque makes extensive use of Bootstrap. This is not only for responsive design and consistency, but also to reduce duplication (keep it D.R.Y) and CSS bloat. Minimal custom CSS classes are added to create custom components (such as the sidebar), and helper utility classes. Before working with this template, you should be familiar with the HTML5, CSS3 and the Bootstrap framework.
This theme and site template was created with simplicity, integration and customization in mind. Forque should be run from a Web server(http://), and not directly from the file system (file://). To install and set-up you'll need:
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.
Copy and modify the files in the `/static` folder which is a full HTML copy of the site.
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 static site can be re-built using Gulp (https://gulpjs.com/). You should be familiar with Gulp before attempting to rebuild the /static site. The gulpfile.js script is located in the `/build` subfolder. This Gulp scripts performs several tasks:
/build
--/node_modules (installed by running NPM install)
--/src
----/sass
------app.scss (custom theme)
------/custom (custom theme colors/styles)
----/templates
------/pages
------- (*.html static source files)
------- (p_*.html static partial files for compile-time templating)
The source code for the React version is inside the /react_app folder. The contains all of the /src files required to build the React app. A pre-built instance of the React App is in the /react folder. By default, this app is set to build to the /react subfolder which is controlled by the scripts.build variable in package.json. Use NPM to rebuild the React app.
/react_app
--/node_modules (installed by running NPM install)
--/public
----index.html (HTML React app container)
----/assets
----/css
--/src
----/components (React JSX component source files)
----/css (Referenced by React components via index.js)
----/layouts (Layout components)
----/views (Page views)
----App.js (Main React app component)
----index.js (React app entry point)
----routes.js (Routing definitions)
-package.json (NPM config for React app)
-README.md
Refer to the README.md file in the /react_app folder for more details on compiling and configuring the React app.
The source code for the Vue version is inside the /vue_app folder. The contains all of the /src files required to build the Vue app. A pre-built instance of the Vue App is in the /vue folder. By default, this app is set to build to the /vue subfolder which is controlled by the scripts.build variable in package.json. Use Vue CLI 3 to rebuild the Vue app.
/vue_app
--/node_modules (installed by running NPM install)
--/public
----index.html (HTML Vue app container)
----/assets
----/css
--/src
----/components (Vue JSX component source files)
----/css (Referenced by Vue components via main.js)
----/layouts (Layout components)
----/views (Page views)
----App.vue (Main Vue app component)
----main.js (Vue app entry point)
----routes.js (Routing definitions)
----store.js (Mock data store)
-package.json (NPM config for Vue dependencies)
-vue.config.json (Vue 3 CLI configure)
-README.md
Refer to the README.md file in the /vue_app folder for more details on compiling and configuring the Vue app.
Both the React and Vue apps may require rewrites on the Web server depending on the folder chosen for deployment.
Responsive dashboard examples are included that demonstrate various content and layouts including charts, tables, lists, cards, nav menus and tabs.
The JavaScript apps (React, Vue) include alternate layout options that switch the navigation (Sidebar, Navbar) location. You can learn more about configuring layouts in the README file for each app.
The "Inbox" is a working app that has the following features:
The "Search" is a working app that has the following features:
Chart.js examples are included for bar, line and donut/pie charts.
A vertical layout with a centerline (y-axis) that delineates items on a timeline. Each timeline item contains a Card that can be aligned to the left or right of the centerline. This allows timeline items to alternate from side-to-side in a regular or random patterns.
A page layout with small rows of image thumbnails that are grouped vertically down the page. There is a vertical timeline/axis down the left side that aligns with each thumbnail group. Clicking on a thumbnail opens a Modal that contains a larger version of the image.
A page with tables to list different options for pricing, product tiers or features. There is a group of 3 Cards, and a tabular list option on this page.
A page with an expanding Accordion layout for Frequently Asked Questions (Q & A). Each Accordion section has a clickable heading/title for the "Question", which expands to reveal the "Answer" inside the Accordion item.
Example 404 Not Found and 500 Server Error pages are included with centered content inside a full height layout.
If you're familiar with using SASS, theme color changes can be made by modifying the `theme.scss` SASS file, and then recompiling the SASS to CSS. All of the SASS variable names used in `theme.scss` are self-explanatory and come from Bootstrap's variable names.
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 `theme.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.js in the `/build` directory).
Alternate color themes (eg: `theme-blue.css`) can be found in the the `\css` folder. You can use these alternate themes by renaming any of the alternate themes to `theme.css`, or by changing all the references in the HTML head link that references href="css/theme.css" (eg: change the link href="css/theme-blue.css"). Make sure you make a copy of the original `theme.css` before renaming or overwriting it.
Forque was built with these open-source frameworks, tools and projects.