Quick start
To start using this dashboard you will need to import some files in your current project or start from scratch using our template (scroll down in this page to view it).
Local Development
If you do not want to use our template as base for your project, and want to integrate our template into your own project, please skip this part and the Live production one, and go straight to Packages. You might also find useful this link here.
- Install NodeJS LTS version from NodeJS Official Page
- Go to creative tim website and login into your account
- Go to downloads section on creative tim website (be sure to be logged into your account)
- Press the download button near Argon Dashboard Material-UI or Argon Dashboard PRO Material-UI product (this will download onto your computer a zip file)
- If Argon Dashboard Material-UI product does not appear in your downloads section, proceed to download it from here (but please note that you need to be logged into your account)
- If Argon Dashboard PRO Material-UI product does not appear in your downloads section, you need to first purchase it from here (and after you recieve the confirmation email, you can download the product)
- Unzip the downloaded file to a folder in your computer
- Open Terminal
- Go to your file project (where you’ve unzipped the product)
-
Run in terminal
npm install
-
Then run
npm start
-
Or you can simply run
npm run install:clean
(if you use a linux based terminal) which will installnode_modules
and will also start your project. -
If you have an error something containing
Module not found you need to add our
jsconfig.json
file to your project - Navigate to https://localhost:3000
- More information → React
- More information → Material-UI
- More information → create-react-app
Live Production
These are some free open source tutorial on how to deploy a create-react-app app on some servers. Please note that your project might need some additional configs to deploy it on these servers:
- tutorial for deploying on heroku
- tutorial for deploying on github pages and surge
- tutorial for deploying on S3 and CloudFront
Packages
If you want to add our template over your own project, please add
all contents of the
package.json
file to your own
package.json
file.
You will also need our base
public/index.html
and
src/index.js
(if you want to keep our routing system).
And the most important, our
jsconfig.js
file - in this file, we make it possible for usage of absolute
imports, so instead of having to write
import X from "../../../..../path/to/X.js"
you can write
import X from "path/to/X.js"
which has a more elegant touch, and it is shorter.
CSS
This product makes usage of JSS and SCSS, as our friends from Material-UI.
-
We’ve used the
ThemeProvider
insidesrc/index.js
: https://material-ui.com/styles/api/?ref=creativetim#themeprovider -
We’ve used the
CssBaseline
insidesrc/index.js
: https://material-ui.com/api/css-baseline/?ref=creativetim#cssbaseline-api -
We’ve used the
makeStyles
insidesrc/layouts/*
,src/views/*
,src/components/*
files: https://material-ui.com/styles/api/?ref=creativetim#makestyles-styles-options-hook -
We’ve used the
useTheme
inside some of thesrc/layouts/*
,src/views/*
,src/components/*
files (this was used mostly for getting the theme colors): https://material-ui.com/styles/api/?ref=creativetim#usetheme-theme
If you are planning on adding our template into your own project, you will need to add our whole assets folder to your own project.
FREE
You will need to add to your mounting JS file (in our case it is
src/index.js
) the following imports:
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "assets/theme/theme.js";
import "assets/plugins/nucleo/css/nucleo.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-dashboard-react.scss";
And after that, you will also need to initialize the app with our theme:
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
// ... your code goes here
</ThemeProvider>
PRO
You will need to add to your mounting JS file (in our case it is
src/index.js
) the following imports:
import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import theme from "assets/theme/theme.js";
// plugins styles from node_modules
import "react-perfect-scrollbar/dist/css/styles.css";
import "@fullcalendar/common/main.min.css";
import "@fullcalendar/daygrid/main.min.css";
import "quill/dist/quill.core.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
// plugins styles downloaded
import "assets/plugins/nucleo/css/nucleo.css";
// core styles
import "assets/scss/argon-dashboard-pro-material-ui.scss?v1.0.0";
And after that, you will also need to initialize the app with our theme:
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
// ... your code goes here
</ThemeProvider>
For the PRO version, we’ve also added RTL support, which comes with its own theme. To get started with the RTL, you can change:
import theme from "assets/theme/theme.js";
With
import theme from "assets/theme/theme-rtl.js";
And follow the instructions from the official Material-UI docs: https://material-ui.com/guides/right-to-left/
If you wish to have both RTL and LTR, then you will need to
implement a mechanism that switches from one theme to another. For
this, you can check our approach inside
src/layouts/RTL.js
.
Fonts and Icons
If you’ve started a new project and are copying our product there,
be sure to add the following lines of code inside your
public/index.html
file:
Important Globals
Argon Dashboard Material-UI employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
Responsive meta tag
Material Design is developed mobile first, a strategy in
which we optimize code for mobile devices first and then scale up
components as necessary using CSS media queries. To ensure proper
rendering and touch zooming for all devices,
add the responsive viewport meta tag to your
<head>
inside the
public/index.html
file.
Material-UI components
Material-UI comes with 12 required dependencies, however, once you
install
@material-ui/core
, all its dependencies are installed together with it, so you do
not have to worry about this.