Skip to content
This repository has been archived by the owner on Sep 11, 2021. It is now read-only.

Latest commit

 

History

History
63 lines (44 loc) · 2.6 KB

tutorial-001.md

File metadata and controls

63 lines (44 loc) · 2.6 KB
Raw

Setup Framework

Hi! Welcome to NeXt tutorial #1. We are here to let you understand NeXt UI and help you start writing your code as soon as possible. We keep the tutorial short and simple to let you marsh step by step and monitor your progress after each step.

Okay, why don't we start right away?

Setup

There are two ways of installation NeXt: semi-automatic set-up with Bower, or manual installation. We would recommend installation with Bower.

Setup with Bower

Bower is a "package manager for the web". In other words, this tool allows you to download JavaScript products for your web applications (or web-sites), manage dependencies and automatically update third-party code.

Once you have Bower installed, you can proceed to downloading NeXt framework. Go to your project's folder with cd and run the following command, which will download NeXt for you:

Bower:

bower install NeXt

Bower creates a folder named /bower_components/ under the working folder, which is a container for all the apps, or libraries, that you download with Bower. Navigate under /next-bower/ and you'll see "css" and "js" folders that contain a bunch of necessary files. You'll need to link only minified versions of them: /css/next.min.css and /js/next.min.js.

In container of your HTML page, link the files this way:

<head>
    ...
    <link rel="stylesheet" href="bower_components/next-bower/css/next.min.css">
    <script type="text/javascript" src="bower_components/next-bower/js/next.min.js"></script>
    ...
</head>

Setup with NPM

If you desire to install NeXt with NPM, you should be aware that it uses the same distribution package that Bower does.

To install NeXt via NPM, type the command and run it:

npm install next-ui

Manual Setup

First of all, download latest NeXt UI release from Cisco DevNet web-site. Extract the files from archive and move them to a place, which is convenient to you.

Create an HTML page. Link CSS and JS files to your project like this

<head>
    ...
    <link rel="stylesheet" href="next/css/next.css">
    <script type="text/javascript" src="next/js/next.js"></script>
    ...
</head>

Here "next" is a path to folder, where NeXt UI files lie.

Example: see /demos/tutorial-001/

What's next?

Your next step is to understand Common Topology Model. This model is pretty simple, and will take 5-10 minutes to familiarize yourself with it.

Read NEXT