To start using this design system 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).
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.
Follow the next steps to start using our product:
- 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 Design System PRO React product (this will download onto your computer a zip file)
- 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
- Then run
- Or you can simply run
npm run install:clean(if you use a linux based terminal) which will install
node_modulesand also will start your project.
- If you have an error something containing Module not found you need to add our
jsconfig.jsonfile to your project
- If you have an error containing props.history of undefined (this can happen when you integrate our project with another one) then you need to make the changes found here
- (Optional) You can create a new react application like this
- Go to the folder where you want to create your app
- Run in terminal
npx create-react-app your-app-name
- Navigate to
- Run in terminal
- Copy what you need from Argon Design System PRO React to your own project
- More information → create-react-app
- Navigate to https://localhost:3000
- More information → react
These are some free open source tutorial on how to deploy a React 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
If you want to add our template over your own project, please add all contents of the
packaje.json file to your own
First of all, you will need to add to your own
public/index.html file (you mounting
.html file, in our case it is
public/index.html) the following:
Or, you can copy our whole
public/index.html file on top of your own one.
After that, you will need to import our styles into your own mounting
react file, in our case, we’ve imported them inside
src/index.js like so:
Argon Design System PRO React 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.
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Responsive meta tag
Bootstrap 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
Reactstrap comes with 5 required dependencies, however, once you install reactstrap, all its dependencies are installed together with it, so you do not have to worry about this.
Many of Bootstrap’s components and utilities are built with
@each loops that iterate over a Sass map. This is especially helpful for generating variants of a component by our
$theme-colors and creating responsive variants for each breakpoint. As you customize these Sass maps and recompile, you’ll automatically see your changes reflected in these loops.
Please check our official Youtube channel for more tutorials.