The FixedPlus UI Framework is a premium Web Application Admin Dashboard built on top of Reactjs. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.
We love when all updates are free. Once you’ve purchased FixedPlus, you’ll be able to download all future updates. If you love our theme don’t forget to rate us five starsGood rating provides more and better updates in future!
If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
List of folders in FixedPlus download
Source/ ├── public └── src ├── app │ ├── auth │ ├── components │ │ ├── breadcrumb │ │ ├── footer │ │ ├── main-sidebar │ │ │ └── nav │ │ ├── right-sidebar │ │ └── topbar │ ├── layouts │ │ ├── auth-layout │ │ └── backend-layout │ └── pages ├── assets │ ├── css │ ├── img │ └── scss
Head
import React from 'react'; import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'; import Layout from './layouts' import { ToastContainer } from 'react-toastify'; // auth import Login from './auth/login'; import Register from './auth/register'; import ResetPassword from './auth/reset-password'; import LockScreen from './auth/lockscreen'; // //pages import Dashboard from './pages/dashboard'; //Widgets import WidgetsApps from './pages/widgets-apps'; import WidgetsData from './pages/widgets-data'; // //apps import AppCalendar from './pages/app-calendar'; import AppChat from './pages/app-chat'; import AppTicket from './pages/app-ticket'; import AppContact from './pages/app-contact'; import AppContactDetail from './pages/app-contact-detail'; // //Charts import ChartC3 from './pages/chart-c3'; import ChartChartjs from './pages/chart-chartjs'; import ChartFlot from './pages/chart-flot'; import ChartMorris from './pages/chart-morris'; import ChartRadial from './pages/chart-radial'; import ChartRickshaw from './pages/chart-rickshaw'; import ChartSparkline from './pages/chart-sparkline'; // new chart // Charts import Apexcharts from "./pages/charts/ApexCharts/Apexcharts"; import GoogleCharts from "./pages/charts/GoogleCharts/GoogleCharts"; import KnobChart from "./pages/charts/KnobChart/KnobChart"; import Chartsjs from "./pages/charts/Chartsjs/Chartsjs"; import Chartist from "./pages/charts/ChartistCharts/Chartist"; // //EXAMPLES import CorporateAdd from './pages/corporate-add'; import CorporatePages from './pages/corporate-pages'; import EcommerceAdd from './pages/ecommerce-add'; import EcommerceOrders from './pages/ecommerce-orders'; import EcommerceProducts from './pages/ecommerce-products'; import ExamplesAddAndUpdate from './pages/examples-add-and-update'; import ExamplesDelete from './pages/examples-delete'; // //form import FormBasic from './pages/form-basic'; import FormEditor from './pages/form-editor'; import FormFileUpload from './pages/form-file-upload'; import FormMasks from './pages/form-masks'; import FormPicker from './pages/form-picker'; import FormValidations from './pages/form-validations'; import FormWizard from './pages/form-wizard'; import MailCompose from './pages/mail-compose'; import MailIndex from './pages/mail-index'; import MailView from './pages/mail-view'; import MapGoogle from './pages/map-google'; import MapVector from './pages/map-vector'; // //page import PageBlank from './pages/page-blank'; import PageFaqs from './pages/page-faqs'; import PageGallery from './pages/page-gallery'; import PageInvoice from './pages/page-invoice'; import PagePricing from './pages/page-pricing'; import PageProfile from './pages/page-profile'; import PageTimeline from './pages/page-timeline'; import TableBasic from './pages/table-basic'; import DataTables from './pages/table-data'; // ui element import UiBootstrapElements from './pages/ui-bootstrap-elements'; import UiAlertify from './pages/ui-alertify'; import UiButtons from './pages/ui-buttons'; import UiCardMaster from './pages/ui-card-master'; import UiCards from './pages/ui-cards'; import UiCarousel from './pages/ui-carousel'; import UiDraggableCards from './pages/ui-draggable-cards'; import UiGrid from './pages/ui-grid'; import UiIcons from './pages/ui-icons'; import UiJqueryElements from './pages/ui-jquery-elements'; import UiModals from './pages/ui-modals'; import UiNestable from './pages/ui-nestable'; import UiNotification from './pages/ui-notification'; import UiProgress from './pages/ui-progress'; import UiRangeSlider from './pages/ui-range-slider'; import UiSweetalerts from './pages/ui-sweetalerts'; import UiTabs from './pages/ui-tabs'; import UiTipPop from './pages/ui-tip-pop'; import UiTreeview from './pages/ui-treeview'; import UiTypography from './pages/ui-typography'; import Page404 from './pages/page-error/page-404'; function App() { return ( <React.Fragment> <BrowserRouter basename={'/'} > <Switch> <Route exact path="/auth" render={() => (<Redirect to="/auth/login" />)} /> <Route path={`/auth/login`} component={Login} /> <Route path={`/auth/register`} component={Register} /> <Route path={`/auth/forget-password`} component={ResetPassword} /> <Route path={`/auth/lock-screen`} component={LockScreen} /> <Layout name="backend"> <Route exact path="/" render={() => (<Redirect to="/dashboard" />)} /> <Route path={`/dashboard`} component={Dashboard} /> <Route path={`/app-calendar`} component={AppCalendar} /> <Route path={`/app-chat`} component={AppChat} /> <Route path={`/app-contact-detail`} component={AppContactDetail} /> <Route path={`/app-contact`} component={AppContact} /> <Route path={`/app-ticket`} component={AppTicket} /> <Route path={`/chart-c3`} component={ChartC3} /> <Route path={`/chart-chartjs`} component={ChartChartjs} /> <Route path={`/chart-flot`} component={ChartFlot} /> <Route path={`/chart-morris`} component={ChartMorris} /> <Route path={`/chart-radial`} component={ChartRadial} /> <Route path={`/chart-rickshaw`} component={ChartRickshaw} /> <Route path={`/chart-sparkline`} component={ChartSparkline} /> <Route path={`/chart-apex`} component={Apexcharts} /> <Route path={`/chart-Google`} component={GoogleCharts} /> <Route path={`/chart-Knob`} component={KnobChart} /> <Route path={`/chart-js`} component={Chartsjs} /> <Route path={`/chart-Chartist`} component={Chartist} /> <Route path={`/corporate-add`} component={CorporateAdd} /> <Route path={`/corporate-pages`} component={CorporatePages} /> <Route path={`/ecommerce-add`} component={EcommerceAdd} /> <Route path={`/ecommerce-orders`} component={EcommerceOrders} /> <Route path={`/ecommerce-products`} component={EcommerceProducts} /> <Route path={`/examples-add-and-update`} component={ExamplesAddAndUpdate} /> <Route path={`/examples-delete`} component={ExamplesDelete} /> <Route path={`/form-basic`} component={FormBasic} /> <Route path={`/form-editor`} component={FormEditor} /> <Route path={`/form-file-upload`} component={FormFileUpload} /> <Route path={`/form-masks`} component={FormMasks} /> <Route path={`/form-picker`} component={FormPicker} /> <Route path={`/form-validations`} component={FormValidations} /> <Route path={`/form-wizard`} component={FormWizard} /> <Route path={`/mail-compose`} component={MailCompose} /> <Route path={`/mail-index`} component={MailIndex} /> <Route path={`/mail-view`} component={MailView} /> <Route path={`/map-google`} component={MapGoogle} /> <Route path={`/map-vector`} component={MapVector} /> <Route path={`/page-blank`} component={PageBlank} /> <Route path={`/page-faqs`} component={PageFaqs} /> <Route path={`/page-gallery`} component={PageGallery} /> <Route path={`/page-invoice`} component={PageInvoice} /> <Route path={`/page-pricing`} component={PagePricing} /> <Route path={`/page-profile`} component={PageProfile} /> <Route path={`/page-timeline`} component={PageTimeline} /> <Route path={`/table-basic`} component={TableBasic} /> <Route path={`/table-data`} component={DataTables} /> {/* form and ui element */} <Route path={`/ui-bootstrap-elements`} component={UiBootstrapElements} /> <Route path={`/ui-alertify`} component={UiAlertify} /> <Route path={`/ui-buttons`} component={UiButtons} /> <Route path={`/ui-card-master`} component={UiCardMaster} /> <Route path={`/ui-cards`} component={UiCards} /> <Route path={`/ui-carousel`} component={UiCarousel} /> <Route path={`/ui-draggable-cards`} component={UiDraggableCards} /> <Route path={`/ui-grid`} component={UiGrid} /> <Route path={`/ui-icons`} component={UiIcons} /> <Route path={`/ui-jquery-elements`} component={UiJqueryElements} /> <Route path={`/ui-modals`} component={UiModals} /> <Route path={`/ui-nestable`} component={UiNestable} /> <Route path={`/ui-notification`} component={UiNotification} /> <Route path={`/ui-progress`} component={UiProgress} /> <Route path={`/ui-range-slider`} component={UiRangeSlider} /> <Route path={`/ui-sweetalerts`} component={UiSweetalerts} /> <Route path={`/ui-tabs`} component={UiTabs} /> <Route path={`/ui-tip-pop`} component={UiTipPop} /> <Route path={`/ui-treeview`} component={UiTreeview} /> <Route path={`/ui-typography`} component={UiTypography} /> <Route path={`/widgets-apps`} component={WidgetsApps} /> <Route path={`/widgets-data`} component={WidgetsData} /> </Layout> <Route path='*' component={ Page404 } /> </Switch> </BrowserRouter> <ToastContainer /> </React.Fragment> ); } export default App;
All theme CSS files are located in source/assets/css
folder. For your CSS customization you can use source/assets/css/style.css
. Keep your custom CSS separate it makes more easier when updating the theme in future.
Javascript files are located in source/assets/js/
folder, plugin files are located in source/assets/lib/
folder. For your Javascripts you can use Source/js/custom.js
. Keep your custom Javascript separate it makes more easier when updating the theme in future.
Select the "Recommended For Most Users" button and download the current version for your operating system.
After you download and install Node, start your terminal/command prompt and run node -v
and
npm -v
to see which versions you have.
Your version of NPM should be at least 5.2.0 or newer because create-react-app requires that we have NPX installed. If you have an older version of NPM, run this command to update it:
npm install -g npm
What is create-react-app?
Since it is complicated and takes a lot of time, we don't want to configure React manually. create-react-app is a much easier way which does all the configuration and necessary package installations for us automatically and starts a new React app locally, ready for development.
Another advantage of using create-react-app is that you don't have to deal with Babel or Webpack configurations. All of the necessary configurations will be made by create-react-app for you.
According to the React documentation, create-react-app is one of the officially supported ways to create single-page applications in React. You can find other ways here.
How to Install Create-React-App
In order to install your app, first go to your workspace (desktop or a folder) and run the following command:
npm i
The installation process may take a few minutes. After it is done, you should see a folder that appears in your workspace with the name you gave to your app.
and finally run npm start
to see your app live on localhost:
npm start
If you see something like this in your browser, you are ready to work with React. Congratulations! :)
Thank you for reading!
FixedPlus uses Montserrat, Ubuntu and Open Sans fonts. They must be loaded in HTML Head
before other CSS files.
Font code example:
<link href='https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900' rel='stylesheet' type='text/css'>
Fontawesome and Simple Line Font Icon packs. Font Icons must be loaded in HTML Head
before theme css files.
FixedPlus comes with 8 color palettes for creating colorful widgets and elements.
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-teal
.bg-indigo
.bg-default
All available Helper Classes in FixedPlus:
Prefix | Second Prefix (side) | third Prefix | Suffix (value) | |
---|---|---|---|---|
Margin | m | t,r,b,l | n (only for negative values) | xxs, xs, sm, md, lg, xxl |
Padding | p | v,h (top & bottom, left & right) | xxs, xs, sm, md, lg, xxl |
.no-s
Removes margins & paddings
.no-m
Removes margins
.no-p
Removes paddings
.no-p-h
Removes paddings from left & right
.no-p-v
Removes Paddings from top & bottom
.no-b
Removes borders
.b
Adds border from all sides
.b-t
, .b-r
, .b-b
, .b-l
Adds border from top, right, bottom, left
.b-default
, .b-primary
, .b-success
, .b-info
, .b-warning
, .b-danger
Adds border by contextual colors, see colors doc.
.b-2
, .b-3
, .b-4
Border size
.b-n-t
, .b-n-r
, .b-n-b
, .b-n-l
Removes border from top, right, bottom, left
.no-r
Removes border radius
.r
Adds border radius
.r-t-l
, .r-t-r
, .r-b-l
, .r-b-r
Adds border radius From top-left, top-right, bottom-left, bottom-right sides.
.no-r-t-l
, .no-r-t-r
, .no-r-b-l
, .no-r-b-r
Removes border radius From top-left, top-right, bottom-left, bottom-right sides.
We've used following sources & credits
Plugin | Official Website |
---|---|
Bootstrap | http://www.getbootstrap.com |
Flot charts | http://www.flotcharts.org/ |
ChartJs | http://www.chartjs.org/ |
FullCalendar | https://www.fullcalendar.io/ |
Data Tables | https://www.datatables.net/ |
Sweet Alerts2 | https://limonte.github.io/sweetalert2/ |
Vector Map | https://github.com/bjornd/jvectormap |
Font-awesome | http://fontawesome.io/ |
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section