feature(navUI): add README.html page with styles and assets #550

IgniteUI · Jul 30, 2018 · b39dd2e · b39dd2e
1 parent d30c29d
commit b39dd2e
Show file tree

Hide file tree

Showing 15 changed files with 524 additions and 0 deletions.
diff --git a/README.html b/README.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Ignite UI for Angular Starting Page</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="readmeStyle.css">
+</head>
+
+<body>
+  <section class="head">
+    <article>
+      <h1>Thank you for downloading
+        <br>Ignite UI for Angular</h1>
+      <p>In the package you just downloaded, you get a complete set of samples, including source code for each of them. You’ll
+        see the full array of capabilities in Ignite UI for Angular, all the different features for the controls, how they
+        are implemented.
+      </p>
+    </article>
+  </section>
+  <section>
+    <article>
+      <div class="callouts">
+        <div class="callout">
+          <div class="illustration one"></div>
+          <p>A complete list of the Angular Components</p>
+          <a class="button" href="https://www.infragistics.com/products/ignite-ui-angular#components" target="_blank">Browse Components</a>
+        </div>
+        <div class="callout">
+          <div class="illustration two"></div>
+          <p>This download does not include the complete set of documentation and step-by-step guides with API documentation.</p>
+          <a class="button" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grids_and_lists.html"
+            target="_blank">See Documentation</a>
+        </div>
+      </div>
+    </article>
+  </section>
+  <section class="prerequisites">
+    <article>
+      <h2>Prerequisites to using Ignite UI for Angular</h2>
+      <p>Before you can run Ignite UI for Angular, there are 2 steps to get everything on your machine set up to run any Angular
+        app, including Ignite UI for Angular, and to build Ignite UI for Angular apps.
+        <br>
+        <br>To get started, you must install both NodeJS and Visual Studio Code on your machine. Modern web development with
+        Angular requires NodeJS, it’s sort of like an ASP.NET app running in the browser requires ASP.NET runtime deployed
+        on the server. For development, there is nothing better than Visual Studio Code to build Angular apps. Getting started
+        is easy, just download and install both Node.js and Visual Studio Code.</p>
+      <div class="callouts">
+        <div class="callout">
+          <div class="prereq node"></div>
+          <a class="button" href="https://nodejs.org/en/download/" target="_blank">Download Node</a>
+        </div>
+        <div class="callout">
+          <div class="prereq vscode"></div>
+          <a class="button" href="https://code.visualstudio.com/download" target="_blank">Download VS Code</a>
+        </div>
+      </div>
+    </article>
+  </section>
+  <section class="instructions">
+    <article>
+      <h2>Running the Ignite UI for Angular Samples</h2>
+      <p>Once the prerequisites are installed, you can get the Ignite UI for Angular samples running with the step-by-step below
+        or you can watch this quick video.</p>
+      <a href="https://youtu.be/QiAHkU-ijnU" target="_blank" class="video lg">
+        <img src="assets/Play.svg" alt="Play Icon">
+      </a>
+      <h3>Step-by-Step</h3>
+      <ol>
+        <li>Unzip the package to your hard drive. </li>
+        <li>Open the project by right-clicking anywhere in the folder that you’ve just unzipped and selecting “Open with Code”
+          from the context menu. If you do not have a right-click option to Open in Code, or you are running a Mac, simply
+          open Visual Studio Code and from the File menu select Open Folder and select the folder you just unzipped. </li>
+        <li>Once Visual Studio Code is open, you should see the samples folders in the Explorer pane. </li>
+        <li>In Visual Studio Code, from the “View” menu, select “Integrated Terminal”. </li>
+        <li>Type
+          <span class="code-snippet">npm install</span> at the command line in the integrated terminal. </li>
+        <li>Once the
+          <span class="code-snippet">npm install</span> completes, type npm start at the command line in the integrated terminal.</li>
+        <li>Your browser should open to http://localhost:4200 with the Ignite UI for Angular samples running.</li>
+      </ol>
+    </article>
+  </section>
+  <section class="cli">
+    <article>
+      <h2>Building your first Ignite UI for Angular app</h2>
+      <p>After you’ve looked at the Ignite UI for Angular samples and explored the online docs, it’s time to get started building
+        your first Ignite UI for Angular app. Using the Ignite UI for Angular CLI (Command Line Interface), it’s super-easy
+        to get started building full-featured Angular apps. Our CLI gives you the ability to initialize, develop, scaffold,
+        and maintain applications in Angular with Ignite UI, all with pre-set navigation, templates for each control and
+        full screen views that can help you kick off any type of Angular app development.
+        <br>
+        <br>We’ve included 2 videos that will help you install the pre-requisites and walk you through using the Ignite UI for
+        Angular CLI to build your first Ignite UI for Angular app.</p>
+      <div class="callouts">
+        <div class="callout">
+          <div class="video-header"></div>
+          <a href="https://youtu.be/lsEY90yYQIs" target="_blank" class="video sm v1">
+            <img src="assets/Play.svg" alt="Play Icon">
+          </a>
+          <p>Installing the Ignite UI for Angular CLI</p>
+
+        </div>
+        <div class="callout">
+          <div class="video-header"></div>
+          <a href="https://youtu.be/QK_NsdtdA70" target="_blank" class="video sm v2">
+            <img src="assets/Play.svg" alt="Play Icon">
+          </a>
+          <p>Building Your First Ignite UI CLI App</p>
+
+        </div>
+      </div>
+      <p>If you are already familiar with node.js and using a CLI, you can skip the videos and type:</p>
+      <p class="code-snippet">npm install igniteui-cli –g</p>
+      <p>in Terminal, PowerShell or Bash to install our CLI. We include an alias, so just type:</p>
+      <p class="code-snippet">ig</p>
+      <p>to get started with the wizard, or type:</p>
+      <p class="code-snippet">ig -v</p>
+      <p>to check the version or to get a list of commands, type:</p>
+      <p class="code-snippet">ig -h</p>
+    </article>
+  </section>
+  <section class="banner">
+    <article>
+      <div class="angular-image"></div>
+      <div class="banner-content">
+        <img src="assets/angular-logo.png" alt="">
+        <p>To get further help if you need it, or if you run into any issues, go to the forums.</p>
+        <a class="button" href="https://www.infragistics.com/community/forums/f/ignite-ui-for-angular" target="_blank">Ignite UI for Angular Forums</a>
+      </div>
+    </article>
+  </section>
+
+  <footer>
+    <img href="https://www.infragistics.com/" target="_blank" src="assets/ig-logo.svg" alt="Infragistics Logo">
+  </footer>
+</body>
+
+</html>
diff --git a/assets/IgniteASCII.png b/assets/IgniteASCII.png
diff --git a/assets/Play.svg b/assets/Play.svg
diff --git a/assets/angular-image.png b/assets/angular-image.png
diff --git a/assets/angular-logo.png b/assets/angular-logo.png
diff --git a/assets/background.png b/assets/background.png
diff --git a/assets/components-icon.svg b/assets/components-icon.svg