Start a project

This walkthrough guides you through the process to create a basic application with SKY UX. We’ll start with a blank HTML page and proceed to a fully functioning SKY UX application.

Prerequisite: Keep in mind that the heart of SKY UX is AngularJS and Bootstrap, so you need to be familiar with these technologies to build with SKY UX.

Create a page

Let's start with a basic HTML page that includes SKY UX.

First, create a folder and then add an HTML file called index.html. To ensure that the page renders properly in all modern browsers, start with the following boilerplate HTML:

<!DOCTYPE html>
<html charset="utf-8">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My First SKY UX App</title>
  </head>
  <body>

  </body>
</html>

Next, to add SKY UX to the page, point to SKY UX via the Blackbaud SKY CDN.

If you wish to host SKY UX yourself, you may install it via Bower or NPM instead of pointing to the CDN. See the SKY UX GitHub page for instructions on installing via Bower.
<!DOCTYPE html>
<html charset="utf-8">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My First SKY UX App</title>
    <link rel="stylesheet" href="https://sky.blackbaudcdn.net/skyux/1.19.0/css/sky-bundle.css" integrity="sha384-rCHAZzIqFLwC6z0rrDMyjB4UNDV5LX7dkYYVMNba0hMetsGOLkd0WXF7DZYjzWkh" crossorigin="anonymous">
  </head>
  <body>
    <script src="https://sky.blackbaudcdn.net/skyux/1.19.0/js/sky-bundle.min.js" integrity="sha384-eqO+Uq2QBUbCSpLgwucD66px3QjXEKjBdCQo9lQLt1dTxlBCOhcZrjXuqSH+A9ru" crossorigin="anonymous"></script>
  </body>
</html>

You should now be able to spin up a web server in your project's directory (the NPM package http-server is very handy for this) and browse to it in a web browser.

Add content to the page

Simple HTML elements

Let's brighten things up a bit by adding a button to the page. SKY UX is based on Bootstrap, so we can use all standard Bootstrap CSS classes.

Add a div tag within your page's <body> element and use the class attribute to wrap the button in the Bootstrap CSS class .container-fluid and the SKY UX CSS class .bb-page-content. These classes separate the content from the navbar and the edges of the browser window.

For brevity, the remaining code samples omit the boilerplate HTML and just show the code to add to your page's <body> element.
<div class="container-fluid bb-page-content">
  <button type="button" class="btn btn-primary">Hello World</button>
</div>

This renders a button that looks like this:

While the button respects the Bootstrap btn-primary class, it looks a little different than the default Bootstrap button. SKY UX overrides Bootstrap styles with its own styles to create a unique user interface that still takes advantage of the responsive nature of its Bootstrap core.

AngularJS directives

Of course, SKY UX is more than just CSS. It also features an extensive library of AngularJS components. To use these, your page must define an Angular application.

In the page's html element, add an ng-app attribute, but don't refresh your browser just yet.

<html charset="utf-8" ng-app="skytutorial">

To define skytutorial as an Angular module in JavaScript so that Angular knows what to wire up to your HTML page, create an index.js file next to index.html at the root of your project. Add a reference to your index.js to the bottom of the <body> element.

<script src="https://sky.blackbaudcdn.net/skyux/1.19.0/js/sky-bundle.min.js" integrity="sha384-eqO+Uq2QBUbCSpLgwucD66px3QjXEKjBdCQo9lQLt1dTxlBCOhcZrjXuqSH+A9ru" crossorigin="anonymous"></script>
<script src="index.js"></script>

In the index.js file, add the sky module as a dependency on your skytutorial module by putting it in brackets as the second argument to angular.module(). This ensures that all SKY UX functionality is available to your Angular application.

(function () {
  'use strict';

  angular.module('skytutorial', ['sky']);
}());

Now that our page is a proper Angular application, we can add Angular components. Let's start with the navbar. Don't worry too much about what all this HTML does for now. I just copied it from the navbar documentation and pasted it here as-is. Copy the following HTML and paste it immediately after your opening <body> tag.

<bb-navbar>
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-left">
      <li class="bb-navbar-active"><a href="">Selected Item</a></li>
      <li class="dropdown">
        <a href="" class="dropdown-toggle" role="button">Child Items <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li>
            <a href="">Child Item 1</a>
          </li>
          <li>
            <a href="">Child Item 2</a>
          </li>
          <li>
            <a href="">Child Item 3</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="">Right Item</a></li>
    </ul>
  </div>
</bb-navbar>

At this point, your HTML file should look like this:

<!DOCTYPE html>
<html charset="utf-8" ng-app="skytutorial">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My First SKY UX App</title>
  <link rel="stylesheet" href="https://sky.blackbaudcdn.net/skyux/1.19.0/css/sky-bundle.css" integrity="sha384-rCHAZzIqFLwC6z0rrDMyjB4UNDV5LX7dkYYVMNba0hMetsGOLkd0WXF7DZYjzWkh" crossorigin="anonymous">
</head>
<body>
  <bb-navbar>
    <div class="container-fluid">
      <ul class="nav navbar-nav navbar-left">
        <li class="bb-navbar-active"><a href="">Selected Item</a></li>
        <li class="dropdown">
          <a href="" class="dropdown-toggle" role="button">Child Items <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li>
              <a href="">Child Item 1</a>
            </li>
            <li>
              <a href="">Child Item 2</a>
            </li>
            <li>
              <a href="">Child Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Right Item</a></li>
      </ul>
    </div>
  </bb-navbar>
  <div class="container-fluid bb-page-content">
    <button type="button" class="btn btn-primary">Hello World</button>
  </div>
  <script src="https://sky.blackbaudcdn.net/skyux/1.19.0/js/sky-bundle.min.js" integrity="sha384-eqO+Uq2QBUbCSpLgwucD66px3QjXEKjBdCQo9lQLt1dTxlBCOhcZrjXuqSH+A9ru" crossorigin="anonymous"></script>
  <script src="index.js"></script>
</body>

</html>

And when you view it in a browser, it should look like this:


And there you have it! A page that uses both the CSS and Angular components of SKY UX.


Next step: Create a record page »