Quick start

Installation

  1. You need Node.js installed on your machine, if you don't have it, you should install it
  2. Clone project from github or download an archive
  3. cd to your downloaded Argon app
  4. Install necessary dependencies:
Via node npm package manager
  1. Run npm install on the project root
By using yarn package manager
  1. Run yarn install on the project root

Configuration for Posgresql database and Redis data structure store

Via Docker
  1. Install docker on your machine
  2. Run docker-compose up -d in a terminal on the project root
Via another choosen solution.
  1. Install your Posgresql database
  2. Install your Redis server
  3. Change connection configuration, from your root cd to env-files folder and change the following configurations with your own:
  • For Posgresql connection:
DATABASE_URL=http://127.0.0.1:5432
            DATABASE_NAME=creativeTim
            DATABASE_USER=creativeTim
            DATABASE_PASSWORD=creativeTim
  • For Redis connection:
REDIS_HOST=localhost
            REDIS_PORT=6379

Migrations and seeds

  1. For database tables structure, in project root run: npm knex migrate:latest or yarn knex migrate:latest if you are using yarn as the default package manager
  2. To create a default user run: npm knex seed:run or yarn knex seed:run if you are using yarn as the default package manager

Usage

Register a user or login using [email protected] and secret and start testing the preset (make sure to run the migrations and seeders for these credentials to be available).

Besides the dashboard and the auth pages this preset also has an edit profile page. Keep in mind that all the features can be viewed once you login using the credentials provided above or by registering your own user.

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

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<!-- Favicon -->
          <link href="/assets/img/brand/favicon.png" rel="icon" type="image/png">

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

          <!-- Icons -->
          <link href="/assets/vendor/nucleo/css/nucleo.min.css" rel="stylesheet">
          <link href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

          <!-- Argon CSS -->
          <link type="text/css" href="/assets/css/argon.min.css" rel="stylesheet">

JS

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script>s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

We use jQuery’s slim build, but the full version is also supported.

<!-- Core -->
          <script src="/assets/vendor/jquery/dist/jquery.min.js"></script>
          <script src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

          <!-- Argon JS -->
          <script src="/assets/js/argon.min.js"></script>

Need to use a certain plugin in your page? You can find out how to integrate them and make them work in the Plugins dedicated page. In this way you will be sure that your website is optimized and uses only the needed resources.

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!DOCTYPE html>
          <html>

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

          <title>Argon Dashboard</title>

          <!-- Favicon -->
          <link href="/assets/img/brand/favicon.png" rel="icon" type="image/png">

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

          <!-- Icons -->
          <link href="/assets/vendor/nucleo/css/nucleo.min.css" rel="stylesheet">
          <link href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

          <!-- Argon CSS -->
          <link type="text/css" href="/assets/css/argon.min.css" rel="stylesheet">
          </head>

          <body>
          <h1>Hello, world!</h1>

          <!-- Core -->
          <script src="/assets/vendor/jquery/dist/jquery.min.js"></script>
          <script src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

          <!-- Argon JS -->
          <script src="/assets/js/argon.min.js"></script>
          </body>

          </html>

Important globals

Argon 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">

You can see an example of this in action in the starter template.