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).
Steps to install
-
Make sure you have Node.js installed.
-
Navigate to the main directory (from terminal) where
package.json
is located. -
Run
npm install
oryarn install
. -
Run
npm run serve
oryarn serve
to start the local development server and start prototyping.
Argon Design System
Argon Design System is built as Vue plugin so you can simply import it and use it.
Global Components
Argon Design System comes with an extensive set of custom Vue components. Some of them are globally instantiated so it’s easier to use them across the app without importing them each time.
Here’s the list of global components:
- Badge
- BaseAlert
- BaseButton
- BaseCheckbox
- BaseInput
- BasePagination
- BaseProgress
- BaseRadio
- BaseSlider
- BaseSwitch
- Card
- Icon
Local Components
Besides the components mentioned above, we have some extra components/plugins that are usually less used and bigger. In order to not affect the overall bundle size of the Argon Dashboard, they should be imported locally.
You can find the components inside src/components/.
Starter Template
To get started faster, we provide a starter template inside the
project. It’s a bare bones layout with nav, footer and a hello
world. To enable it go to
main.js
and change line 3
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:
After that, you will need to import our styles into your own
mounting
js
file,
in our case, we’ve imported them inside
src/plugins/argon-kit.js
like so:
Important globals
Argon Design System PRO 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.
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>
.
You can see an example of this in action in the starter template.
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.