Quick start

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).

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.

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 npm install
  • Then run npm start
  • Or you can simply run npm run install:clean (if you use a linux based terminal) which will install node_modules and also will start your project.
  • If you have an error something containing Module not found you need to add our jsconfig.json file 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 your-app-name
    • Run in terminal npm start
    • 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

Live Production

NOTE! When deploying our project you might need to either delete the homepage prop from inside the package.json file, or to configure it to your own domain!

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:

Packages

If you want to add our template over your own project, please add all contents of the packaje.json file to your own package.json file.

CSS

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: 

<!-- Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
  rel="stylesheet"
/>

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 js/react file, in our case, we’ve imported them inside src/index.js like so: 

import "assets/css/nucleo-svg.css";
import "assets/css/nucleo-icons.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import "assets/scss/argon-design-system.scss?v1.0.0";

Important globals

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.

HTML5 doctype

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. 

<!doctype html>
<html lang="en">
  ...
</html>

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 <head>. 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Reactstrap components

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.

Bootstrap components

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.

Bootstrap tutorial

Please check our official Youtube channel for more tutorials.