StorNext Connect style guide

The StorNext Connect style guide is a living style guide to promote visual consistency across the interface. The style guide is not a replacement for usabilility or workflow within the StorNext Connect interface; it is to keep common UI elements consistent and branded.

Color palette

StorNext Connect blue

#0095d7

Light blue

#4fc6ea

Seafoam green

#81caad

Light chartreuse

#cbd900

Secondary blue

#0071a3

Medium blue

#42a6c4

Dark seafoam green

#6ba891

Dark chartreuse

#a7b400

Lightest grey

#dddddd

Light grey

#d1d3d4

Dark grey

#939598

Medium grey

#697374

Font Stacks

Primary font:: 'open_sanslight', Arial, sans-serif
Secondary font:: "HelveticaNeue", Helvetica, Arial, sans-serif;

Writing

User interface text should be clear, concise, and accurate. The tone should be casual and respectful.

Capitalization & Punctuation

Use sentence style caps for titles, headings, labels, buttons, table headings and list items.

Examples:

Connect system ID
Renew or update license

Avoid closing punctuation when possible. However, use a period and change fragments into sentences when you need more than one sentence. Also, make sure punctuation is parallel (e.g., if one list item has multiple sentences, all items must be written as sentences with punctuation).

Hyphens

Use a hyphen (-) to join compound words, connect values in a range, and separate phrases.

Examples:

Copyright 2013 - 2016
87-89 degrees
Step 1 - host information

Use the serial comma.

Example:

View, add, and modify users

Language

Write text that is brief but clear. Use short sentences and phrases as much as possible. Favor shorter words and omit unnecessary words or phrases. But don't sacrifice clarity for brevity.

Text should be used to provide information that is not obvious from the graphical elements alone.

Use the active voice. An exception is when there is no clear subject.

Active: The administrator edits the file
Passive: The file is edited by the administrator

Use simple verb tenses (simple present is preferred).

Simple Present: This ensures that StorNext Connect recognizes your clients
Simple Past: Message sent
Present Perfect (Don't): Message has been sent

Use commands (imperative mood) for instructions. In general, omit "please" from commands. An exception is when requesting the user take an action as a result of an error.

Example:

To update your license, go to StorNextConnect.quantum.com

Favor positive words and phrases to provide constructive information. An exception is if framing the information in a positive light is ambiguous.

Positive: Use 16 characters or fewer
Negative: You can't use more than 16 characters
Positive But Not Clear: XYZ is supported
Alternative: ABC is not supported

Put the most important information first. If the text instructs the user to take an action, start with what the end result will be, followed by the instruction.

Example:

You can change your settings at any time by going to the Admin page

Write in second-person narrative (speak to the user as "you").

Example:

Rediscover your components

Avoid referring to "we." If possible, rewrite text to focus on the user and what they can or should do.

Do: You should commit the change when it will have minimal disruption to users
Don't: We recommend that you commit changes when it will have minimal disruption to users

Use articles such as "a/an" and "the" wherever possible for clarity.

Do: Monitor the health of your storage
Don't: Monitor health of storage

Avoid using present participles or gerunds (verb base + -ing). An exception is if the word is part of a technical name.

Do: Manage NAS
Don't: Managing NAS

Use keywords and language that users are familiar with. Pick the simplest word. Avoid jargon.

Examples:

Turn on instead of enable
Query instead of ping
Use instead of utilize

angularjs

alert box

Content related to explaining the alert boxes and their usages should go here: doc/angularjs/alert-box.md

Example

This is a basic warning box with a close button

This is a basic success box without a close button

This is a basic error box with a close button and a custom close function

This is a basic info box with no close button

<div ng-controller="alertController">
    <div class="row">
        <div class="large-11 medium-10 large-centered medium-centered columns">
            <connect-alert-box type="warning" show-close-button="true">
                This is a basic warning box with a close button
            </connect-alert-box>
        </div>
    </div>
    <div class="row">
        <div class="large-11 medium-10 large-centered medium-centered columns">
            <connect-alert-box type="success">
                This is a basic success box without a close button
            </connect-alert-box>
        </div>
    </div>
    <div class="row">
        <div class="large-11 medium-10 large-centered medium-centered columns">
            <connect-alert-box type="error" show-close-button="true" close-fxn="closeMe()">
                This is a basic error box with a close button and a custom close function
            </connect-alert-box>
        </div>
    </div>
    <div class="row">
        <div class="large-11 medium-10 large-centered medium-centered columns">
            <connect-alert-box type="info">
                This is a basic info box with no close button
            </connect-alert-box>
        </div>
    </div>
</div>
<script>
    angular.module('styleguideApp').controller('alertController', ['$scope', '$interval',
        function($scope) {
            $scope.closeMe = function() {
                alert("Hi, you clicked close!");
            }
        }
    ]);
</script>

big circle

Content related to explaining the big circle graph and its usages should go here: doc/angularjs/big-circle.md

Example

<div class="row">
  <div class="large-11 medium-10 large-centered medium-centered columns" ng-controller="bigCircleController">
    <connect-big-circle data="capacityPieData" label-title="capacityPieData.title" units="B" head-title="Total capacity">
  </div>
</div>
<script>
  angular.module('styleguideApp').controller('bigCircleController', ['$scope', '$interval',
    function($scope, $interval){
      $scope.capacityPieData = {
        seriesData: [],
        title: 'total'
      };

      $scope.capacityPieData.seriesData.push({id: 'online', name: 'Online', y: 70000000000, sliced: true});
      $scope.capacityPieData.seriesData.push({id: 'archived', name: 'Archived', y: 10000000000, sliced: true});

      $interval(function(){
        $scope.capacityPieData.seriesData[0].y = Math.random() * (100000000*10000);
        $scope.capacityPieData.seriesData[1].y = Math.random() * (100000000*10000);
      }, 2000 + Math.random() * 2000);
  }]);
</script>

capacity bar

Content related to explaining the capacity bar chart and its usages should go here: doc/angularjs/capacity-bar.md

Example

With percentage

Without percentage

0% with limit

0% with large limit

<div class="row" ng-controller="capacityBarChartController">
  <div class="large-6 medium-6 small-12 columns end fs-usage-bar">
    <h2 class="subheader">With percentage</h2>
    <connect-capacity-bar-chart value="data1" units="B" limit="100" title-text="% full here" title-x="0" title-y="175"></connect-capacity-bar-chart>
  </div>
  <div class="large-6 medium-6 small-12 columns end fs-usage-bar">
    <h2 class="subheader">Without percentage</h2>
    <connect-capacity-bar-chart value="data2" units="B" title-x="0" title-text="% full here" title-y="175"></connect-capacity-bar-chart>
  </div>
  <div class="large-6 medium-6 small-12 columns end fs-usage-bar">
    <h2 class="subheader">0% with limit</h2>
    <connect-capacity-bar-chart value="data3" units="B" limit="100" title-x="0" title-text="% full here" title-y="175"></connect-capacity-bar-chart>
  </div>
  <div class="large-6 medium-6 small-12 columns end fs-usage-bar">
    <h2 class="subheader">0% with large limit</h2>
    <connect-capacity-bar-chart value="data4" units="B" limit="574278352896" title-x="0" title-text="% full here" title-y="175"></connect-capacity-bar-chart>
  </div>
</div>
<script>
  angular.module('styleguideApp').controller('capacityBarChartController', ['$scope', '$interval',
    function($scope, $interval){

      $scope.data1 = 45;
      $scope.data2 = 25135671225;
      $scope.data3 = 0.0001;
      $scope.data4 = 479203328;

      $interval(function(){
        $scope.data1 = (Math.random() * 100);
      }, 2000 + Math.random() * 2000);
  }]);
</script>

<style>
  .fs-usage-bar > div {
    height: 90px;
    min-height: 70px;
  }
</style>

data count

Content related to explaining the data count graph and its usages should go here: doc/angularjs/data-count.md

Example

<div class="row" ng-controller="dataCountController">
  <div class="large-4 medium-4 small-12 columns end">
        <connect-square-data-count data="cluster.obj.count" units="Objects/Files" class="animation-fadeIn"></connect-square-data-count>
  </div>
</div>

<script>
  angular.module('styleguideApp').controller('dataCountController', ['$scope', '$interval',
    function($scope, $interval){
      $scope.cluster = {
        obj: {
          count: 10000000000
        }
      };

      $interval(function(){
        $scope.cluster.obj.count = Math.random() * (100000000*10000);
      }, 2000 + Math.random() * 2000);
    }]);
</script>

data rate

Content related to explaining the data rate graph and its usages should go here: doc/angularjs/data-rate.md

Example

<div class="row" div ng-controller="dataRateController">
  <div class="large-4 medium-4 small-12 columns end">
        <connect-square-data-rate data="cluster.obj.rate" special-item="Objects moved" small-copy="per second" class="animation-fadeIn">
        </connect-square-data-rate>
  </div>
</div>
<script>
  angular.module('styleguideApp').controller('dataRateController', ['$scope', '$interval',
    function($scope, $interval){
      $scope.cluster = {
        obj: {
          rate: 10000000000
        }
      };

      $interval(function(){
        $scope.cluster.obj.rate = Math.random() * (100000000*10000);
      }, 2000 + Math.random() * 2000);
    }]);
</script>

line chart

Content related to explaining the line chart graph and its usages should go here: doc/angularjs/line-chart.md

Example

<div class="row" ng-controller="lineChartController">
  <connect-line-chart class="spacer" data="cluster.history" forecast-data="cluster.forecast" title="Historical" units="B">
</div>

<script>
  angular.module('styleguideApp').controller('lineChartController', ['$scope', '$interval',
    function($scope, $interval){
      $scope.cluster = {
        history: {
          totalused: {
            name: 'Total',
            values: [
              [Date.now() - 32000, 150],
              [Date.now() - 24000, 400],
              [Date.now() - 16000, 240],
              [Date.now() - 8000, 375]
            ]
          },
          metadata: {
            name: 'Metadata',
            values: [
              [Date.now() - 32000, 433],
              [Date.now() - 24000, 234],
              [Date.now() - 16000, 654],
              [Date.now() - 8000, 555]
            ]
          },
          online: {
            name: 'Online',
            values: [
              [Date.now() - 32000, 654],
              [Date.now() - 24000, 754],
              [Date.now() - 16000, 444],
              [Date.now() - 8000, 678]
            ]
          },
          cloud: {
            name: 'Cloud',
            values: [
              [Date.now() - 32000, 755],
              [Date.now() - 24000, 234],
              [Date.now() - 16000, 775],
              [Date.now() - 8000, 676]
            ]
          },
          object: {
            name: 'Object',
            values: [
              [Date.now() - 32000, 886],
              [Date.now() - 24000, 643],
              [Date.now() - 16000, 788],
              [Date.now() - 8000, 543]
            ]
          },
          sdisk: {
            name: 'SDisk',
            values: [
              [Date.now() - 32000, 865],
              [Date.now() - 24000, 899],
              [Date.now() - 16000, 986],
              [Date.now() - 8000, 555]
            ]
          },
          tape: {
            name: 'Tape',
            values: [
              [Date.now() - 32000, 756],
              [Date.now() - 24000, 443],
              [Date.now() - 16000, 333],
              [Date.now() - 8000, 867]
            ]
          }
        }
      };

      $scope.getRandomInt = function(min, max){
        return Math.floor(Math.random() * (max-min+1) + min);
      };

      $scope.intCount = 0;

      $scope.cluster.forecast = {
        start: Date.now(),
        end: Date.now() + 8000
      };

      $interval(function(){
        var objKeys = Object.keys($scope.cluster.history);
        //var index = $scope.getRandomInt(0, objKeys.length - 1);
        for (var index in objKeys) {
          var currentSeries = $scope.cluster.history[objKeys[index]];
          if ($scope.intCount > 60) {
            $scope.intCount = 0;
          }
          //currentSeries.values.shift();
          currentSeries.values.push([Date.now(), Math.random() * 1000]);
        }

        $scope.cluster.forecast = {
          forecast: {
            Total: [
              [Date.now() - 32000, 150],
              [Date.now() - 24000, 350],
              [Date.now() - 16000, 550],
              [Date.now() - 8000, 750]
            ],
            Metadata: [
              [Date.now() - 32000, 104],
              [Date.now() - 24000, 106],
              [Date.now() - 16000, 108],
              [Date.now() - 8000, 110]
            ],
            Online: [
              [Date.now() - 32000, 90],
              [Date.now() - 24000, 100],
              [Date.now() - 16000, 110],
              [Date.now() - 8000, 120]
            ],
            Cloud: [
              [Date.now() - 32000, 100],
              [Date.now() - 24000, 200],
              [Date.now() - 16000, 300],
              [Date.now() - 8000, 400]
            ],
            Object: [
              [Date.now() - 32000, 200],
              [Date.now() - 24000, 220],
              [Date.now() - 16000, 240],
              [Date.now() - 8000, 260]
            ],
            SDisk: [
              [Date.now() - 32000, 100],
              [Date.now() - 24000, 90],
              [Date.now() - 16000, 80],
              [Date.now() - 8000, 70]
            ],
            Tape: [
              [Date.now() - 32000, 120],
              [Date.now() - 24000, 160],
              [Date.now() - 16000, 200],
              [Date.now() - 8000, 240]
            ]
          }
        };

      }, 2000 + Math.random() * 8000);
  }]);
</script>

small circle

The small circle directive creates a pie chart that shows a resource's current value and used value. It shows a full circle for a resource without a fixed limit.

Example

<div class="row" ng-controller="smallCircleController">
    <ul class="small-block-grid-2 large-block-grid-3">
      <li ng-repeat="c in smallCircleData">
        <connect-small-circle title="{{ c.name }}" value="{{ c.value }}" limit="{{ c.limit }}" units="{{ c.units }}" quantity-unit="{{ c.quantityUnit }}">
        </connect-small-circle>
      </li>
    </ul>
</div>
<script>
  angular.module('styleguideApp').controller('smallCircleController', ['$scope', '$interval',
    function($scope, $interval) {
    $scope.smallCircleData = [
        {
            "name": "l6m1",
            "value": 40,
            "limit": 100,
            "units": "B"
        }
        ,{
            "name": "l6m2",
            "value": 60,
            "limit": 100,
            "units": "B"
        }
        ,{
            "name": "l6m3(no limit)",
            "value": 40651520324,
            "units": "B"
        }
        ,{
            "name": "l6m4(units)",
            "value": 60,
            "limit": 100,
            "units": "UNITS"
        }
        ,{
            "name": "l6m5(super-long-name for-this-one )",
            "value": 60,
            "limit": 100,
            "units": "dollars"
        }
        ,{
            "name": "l6m6(irrational)",
            "value": 60,
            "limit": 90,
            "units": "bitcoin"
        }
        ,{
            "name": "l6m7(Count w/ Objects)",
            "value": 6000000000,
            "units": "",
            "quantityUnit": "Objects"
        }
    ];
    // update the data
    $scope.smallCircleData.forEach(function(val, i, data) {
      var limit = val.limit ? val.limit : 2 * val.value;
        $interval(function(){
          data[i].value = (Math.random() * limit).toFixed(2);
        }, 2000 + Math.random() * 2000);
    });
  }]);
</script>

sparkline chart

Content related to explaining the sparkline chart and its usages should go here: doc/angularjs/sparkline-chart.md

Example

<div class="row" ng-controller="sparklineChartController">
  <div class="large-12 columns">
    <connect-sparkline-chart read-data="cluster.seriesData.read"
                             write-data="cluster.seriesData.write"
                             units="B"></connect-sparkline-chart>
  </div>
</div>
<script>
  angular.module('styleguideApp').controller('sparklineChartController', ['$scope', '$interval',
    function($scope, $interval){

      $scope.cluster = {
        seriesData: {
          write: {
            "1479079200": 400,
            "1479079260": 700,
            "1479079320": 200,
            "1479079380": 800
          },
          read: {
            "1479079200": 300,
            "1479079260": 500,
            "1479079320": 400,
            "1479079380": 700
          }
        }
      };
      var nextTime = 1479079380;
      $interval(function(){
        nextTime += 60;
        $scope.cluster.seriesData.write[nextTime.toString()] = (Math.random() * 500);
        $scope.cluster.seriesData.read[nextTime.toString()] = (Math.random() * 400);

      }, 2000 + Math.random() * 2000);
  }]);
</script>

speedometer

Content related to explaining the speedometer graph and its usages should go here: doc/angularjs/speedometer.md

Example

<div class="row" ng-controller="speedometerController">
<div class="large-6 medium-6 small-12 columns end">
  <connect-speedometer data="speedometerData" title="Speedometer" units="B">
</div>
</div>

<script>
  angular.module('styleguideApp').controller('speedometerController', ['$scope', '$interval',
    function($scope, $interval){
      $scope.speedometerData = {
        readData: [],
        writeData: []
      };
      var readSpeed = 85;
      var writeSpeed = 55;

      $scope.speedometerData.readData.push({name:'Read', y: readSpeed});
      $scope.speedometerData.readData.push({name:'', dataLabels:{enabled: false}, y: 100 - readSpeed, color:'rgba(201,201,201, 0.3)'});
      $scope.speedometerData.writeData.push({name:'Write', y: writeSpeed});
      $scope.speedometerData.writeData.push({name:'', dataLabels:{enabled: false}, y: 100 - writeSpeed, color:'rgba(201,201,201,0.3)'});

      $interval(function(){
        $scope.speedometerData.readData[0].y = Math.random() * 1000000;
        $scope.speedometerData.writeData[0].y = Math.random() * 100000;
      }, 2000 + Math.random() * 2000);
  }]);
</script>

base

badge

A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. It's useful for calling out a number of unread items. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are. I

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention. For example:

To alert the user of some type of notification such as an HA pair failing
To alert the user of a setting that is not expected and needs to be addressed

A badge may be positioned near a link so that the user has a convenient way to access the additional information indicated by the badge. However, depending on the intent, the badge itself may or may not be part of the link.

Structure

Create a span with a CSS class of .badge1
Add a data-badge="X" attribute in the span. The "X" is where the number gets called that the interface should display.

Example

Change count (last 24 hours)

Failed

<p><strong>Change count</strong> (last 24 hours)<span class="badge1" data-badge="5"></span></p>
<p>Failed<span class="badge1" data-badge="2"></span></p>

charts

Charts are used when data needs to be visualization in a pictorial or graphical format. It's important because of the way the human brain processes information, using charts or graphs to visualize large amounts of complex data is easier than poring over spreadsheets or reports. Data visualization is a quick, easy way to convey concepts in a universal manner. It can also help to identify areas that need attention or improvement.

General design guidelines for charts

Simplify less important information. Chart elements like gridlines, axis labels, colors, etc. can all be simplified to highlight what is most important/relevant/interesting.
- Label lines individually.
- Rotate bars if the category names are long.
- Put value labels on bars to preserve the clean lines of the bar lengths.
Don't use 3D or blow apart effects. Studies show that 3D effects reduce comprehension. Blow apart effects likewise make it hard to compare elements and judge areas.
Don't use more than six colors. Using color categories that are relatively universal makes it easier to see differences between colors. The more colors you need (that is, the more categories you try to visualize at once), the harder it is to do this.
Don't overload the chart. Adding too much information to a single chart eliminates the advantages of processing data visually; we have to read every element one by one.
Don't make users do "visual math." If the chart makes it hard to understand an important relationship between variables, do the extra calculation and visualize that as well. This includes using pie charts with wedges that are too similar to each other, or bubble charts with bubbles that are too similar to each other. Our visual processing system is not well suited to comparing these types of visual areas.

Structure of line charts

StorNext Connect uses highcharts to display interactive data. For the line chart used in the example below we are using the basic-line from the highstock section of highcharts.

Set up the chart section by creating a <div>:
- Use the grid system to size the chart. Don't go below a .6-large class at the desktop size or it will scrunch the chart information decreasing legibility.
- Add an id specific to the chart. This id will be used for reference in the API for configuration options.
- Example: <div id=“container” class=“6-large”></div>
In javascript, define a function called hideZoomBar with the code demonstrated below.
In jQuery, make a $(document).ready(function() {}) call.
In the document.ready call, set up a Highcharts theme. Use the exact code in the demonstration.
In the document.ready call, make a $.getJSON call using jQuery. The first argument will be the URL of the data (in JSON format). The second argument will be the function that runs after getting the data.
In the getJSON function, assign a variable to a new Highcharts.StockChart object, passing into it an object with the following attributes:
- chart: points to an HTML element by ID. This element will be the holder for the chart. Include this in the highcharts call: chart: { renderTo: ‘ID_OF_CONTAINER’ }
- title: explains the data of the chart being represented to the user. Include this in the highcharts call: title: { text: ‘TITLE’ }
- yAxis: gives relevant information to the user about the data on the Y-Axis. Include this in the highcharts call: yAxis: { title: { text: ‘TITLE’ } }
- series: tells highcharts what data to use in order to render a chart. Include this in the highcharts call: series: [{ data: DATA }]
In the getJSON function, call the hideZoomBar function, passing in the Stockchart object.
Include these files to your javascript:
- /vendor/highstock/js/highstock.js
- /vendor/highstock/js/modules/exporting.js
- /vendor/highstock/js/modules/export-csv.js
To further customize a chart, go to configuration options for more information on setting up the proper displays.

Chart data

Chart data should be in JSON format. It should be an array where each element is another array in the [DATA, SERIES] format. For example:

[
[1394640960000,11],
[1394641020000,12],
[1394641080000,13]
]

Example

<div class="row">
  <div class="large-6 medium-6 columns" id="container"></div>
  <div class="large-6 medium-6 columns" id="container2"></div>
</div>
<script type="text/javascript">
  function hideZoomBar(chart) {
    chart.rangeSelector.zoomText.hide();
    $.each(chart.rangeSelector.buttons, function () {
      this.hide();
    });
    $(chart.rangeSelector.divRelative).hide();
  }

  $(document).ready(function () {
    Highcharts.theme = {
      credits: false,
      chart: {
        backgroundColor: '#fafbfb'
      },
      title: {
        style: {
          fontSize: '0.875rem',
          color: '#555555',
          fontWeight: '600'
        }
      },
      tooltip: {
        backgroundColor: '#fcfcfc',
        borderWidth: 1,
        borderColor: '#3AAE81',
        style: {
          color: '#666666',
          fontWeight: 'bold'
        }
      },
      plotOptions: {
        series: {
          //lineColor: '#3AAE81',
          lineWidth: 2
        },
        line: {
          marker: {
            fillColor: '#FFFFFF',
            lineWidth: 2,
            lineColor: '#3AAE81'
          }
        },
        candlestick: {
          lineColor: 'red'
        }
      },
      toolbar: {
        itemStyle: {
          color: '#CCC'
        }
      },
      navigator: {
        handles: {
          backgroundColor: '#dddddd',
          borderColor: '#666666'
        },
        outlineColor: '#CCC',
        maskFill: 'rgba(56, 166, 124, 0.5)',
        series: {
          color: '#3AAE81',
          lineColor: '#666666'
        }
      },
      navigation: {
        menuItemStyle: {
          fontWeight: 'normal',
          font: '0.75rem Trebuchet MS, Verdana, sans-serif',
          color: '#666666',
          lineHeight: '1rem',
          background: 'none'
        },
        menuItemHoverStyle: {
          fontWeight: 'normal',
          font: '0.75rem Trebuchet MS, Verdana, sans-serif',
          color: '#ffffff',
          lineHeight: '1rem',
          background: '#4fc6ea'
        }
      },
      yAxis: {
        title: {
          //text: 'GB/Second',
          style: {
            fontSize: '0.8125rem',
            color: '#666666'
          }
        }
      },
      xAxis: {},
      rangeSelector: {
        selected: 1
      }
    };

    Highcharts.setOptions(Highcharts.theme);

    $.getJSON('json/chart1.json', function (data) {
      var chart = new Highcharts.StockChart({
        chart: {
          renderTo: 'container'
        },
        title: {
          text: 'Data I/O Throughput'
        },
        yAxis: {
          title: {
            text: 'GB/Second'
          }
        },
        series: [{
          data: data
        }]
      });
      hideZoomBar(chart);
    });

    $.getJSON('json/chart2.json', function (data) {
      var chart2 = new Highcharts.StockChart({
        chart: {
          renderTo: 'container2'
        },
        title: {
          text: 'Data I/O Throughput'
        },
        yAxis: {
          title: {
            text: 'GB/Second'
          }
        },
        series: [{
          data: data
        }]
      });
      hideZoomBar(chart2);
    });
  });
</script>
<script type="text/javascript" src="vendor/highstock/js/highstock.js"></script>
<script type="text/javascript" src="vendor/highstock/js/modules/exporting.js"></script>
<!--<script src="../../js/modules/export-csv.js"></script>-->

details

Example

More info

Additional information

Point 1
Point 2

More info

Additional information

Point 1
Point 2

More info

Additional information

Point 1
Point 2

<details open>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>
<details>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>
<details>
  <summary>More info</summary>
  <div>
    <p>Additional information</p>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>

file upload

The file upload element is for uploading necessary files for StorNext Connect to run and should be the only time this element is used. For example when uploading a license. There are three main components that should be implemented when using the file upload element in the UI.

The user should see the file upload with a button that says 'Choose file'
Once the user chooses a file for upload a progress bar should display underneath the file upload element. This gives the user a visual cue of the status of the file being uploaded.
A status should be indicated to the user if the file upload was successful or if an error occured and the user should try again. In the case of success the progress bar would dissaper and the success message would display under the file upload element.

Example

Choose file

No file selected


<div class="row">
  <section class="large-8 medium-9 small-12 columns">
    <div class="file-upload-container">
      <div class="file-upload-override-button button blue radius tiny left"> Choose file
        <input type="file" class="file-upload-button"/>
      </div>
      <div class="file-upload-filename left small" id="file-upload-filename">No file selected</div>
      <div class="clearfix"></div>
    </div>
  
  </section>
</div>
<div class="row spacer-two">
<section class="large-8 medium-9 small-12 columns">
  <input type="button" class="button blue small radius" value="Upload">
  </section>
</div>

grid

StorNext Connect uses Foundation by Zurb as the responisve, front-end framework upon which to build the interface. You can create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid.

Structure

Always start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns.
Add elements with a .column class after that row. You can use .column or .columns—the only difference is grammar.
Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system

full3

full6

full3

full2

full4

full8

full6

<h3>Foundation grid system</h3>
<div class="row display">
  <div class="small-2 large-4 columns"><span class="hide-for-large">2</span><span class="show-for-large">4</span></div>
  <div class="small-4 large-4 columns">4</div>
  <div class="small-6 large-4 columns"><span class="hide-for-large">6</span><span class="show-for-large">4</span></div>
</div>
<div class="row display">
  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
  <div class="large-3 columns"><span class="hide-for-large">full</span><span class="show-for-large">3</span></div>
</div>
<div class="row display">
  <div class="small-6 large-2 columns"><span class="hide-for-large">6</span><span class="show-for-large">2</span></div>
  <div class="small-6 large-8 columns"><span class="hide-for-large">6</span><span class="show-for-large">8</span></div>
  <div class="small-12 large-2 columns"><span class="hide-for-large">full</span><span class="show-for-large">2</span></div>
</div>
<div class="row display">
  <div class="small-3 columns">3</div>
  <div class="small-9 columns">9</div>
</div>
<div class="row display">
  <div class="large-4 columns"><span class="hide-for-large">full</span><span class="show-for-large">4</span></div>
  <div class="large-8 columns"><span class="hide-for-large">full</span><span class="show-for-large">8</span></div>
</div>
<div class="row display">
  <div class="small-6 large-5 columns"><span class="hide-for-large">6</span><span class="show-for-large">5</span></div>
  <div class="small-6 large-7 columns"><span class="hide-for-large">6</span><span class="show-for-large">7</span></div>
</div>
<div class="row display">
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
  <div class="large-6 columns"><span class="hide-for-large">full</span><span class="show-for-large">6</span></div>
</div>

grid size medium

Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - medium

2 columns

10 columns

3 columns

9 columns

<h3>Foundation grid system - medium</h3>

<div class="row display">
  <div class="medium-2 columns">2 columns</div>
  <div class="medium-10 columns">10 columns</div>
</div>

<div class="row display">
  <div class="medium-3 columns">3 columns</div>
  <div class="medium-9 columns">9 columns</div>
</div>

grid size small

Small grids expand to large screens easier than large grids cram into small screens. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - small

2 columns

10 columns

3 columns

9 columns

<h3>Foundation grid system - small</h3>

<div class="row display">
  <div class="small-2 columns">2 columns</div>
  <div class="small-10 columns">10 columns</div>
</div>

<div class="row display">
  <div class="small-3 columns">3 columns</div>
  <div class="small-9 columns">9 columns</div>
</div>

grid type centered

Center your columns by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens, use .large-uncentered. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - centered

3 centered

6 centered

9 centered

11 centered

<h3>Foundation grid system - centered</h3>

<div class="row display">
  <div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row display">
  <div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row display">
  <div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row display">
  <div class="small-11 small-centered columns">11 centered</div>
</div>

grid type incomplete rows

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of .end in order to override that behavior. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - source ordering

3 end

<h3>Foundation grid system - source ordering</h3>

<div class="row display">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
</div>
<div class="row display">
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns">3</div>
  <div class="medium-3 columns end">3 end</div>
</div>

grid type nesting

You can nest the grids indefinitely, though at a certain point it will get absurd. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - nesting

8 Nested

8 Nested Again

<h3>Foundation grid system - nesting</h3>

<div class="row display">
  <div class="small-12 columns">12
    <div class="row">
      <div class="small-12 columns">8 Nested
        <div class="row">
          <div class="small-8 columns">8 Nested Again</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
    </div>
  </div>
</div>

grid type offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - offsets

10, offset 1

9, offset 2

8, offset 3

<h3>Foundation grid system - offsets</h3>

<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>

<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>

<div class="row display">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

grid type source ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. .medium-push-#, .large-push-# is the syntax you'll use. Use the number 0 instead to reset a push/pull, such as .medium-push-0 or .large-pull-0. See structure below.

NOTE: .display class is only added for viewing purposes in style guide and not necessary for use in the interface.

Example

Foundation grid system - source ordering

2, last

3, last

4, last

5, last

6, last

<h3>Foundation grid system - source ordering</h3>

<div class="row display">
  <div class="small-10 small-push-2 columns">10</div>
  <div class="small-2 small-pull-10 columns">2, last</div>
</div>
<div class="row display">
  <div class="large-9 large-push-3 columns">9</div>
  <div class="large-3 large-pull-9 columns">3, last</div>
</div>
<div class="row display">
  <div class="large-8 large-push-4 columns">8</div>
  <div class="large-4 large-pull-8 columns">4, last</div>
</div>
<div class="row display">
  <div class="small-5 small-push-7 medium-7 medium-push-5 columns">7</div>
  <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns">5, last</div>
</div>
<div class="row display">
  <div class="medium-6 medium-push-6 columns">6</div>
  <div class="medium-6 medium-pull-6 columns">6, last</div>
</div>

headings 1

Add your personalized documentation here.

Example

Heading 1 with small text and a link

Heading 2 with small text and a link

Heading 3 with small text and a link

Heading 4 with small text and a link

Heading 5 with small text and a link

Heading 6 with small text and a link

<h1>Heading 1 with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 with <small>small text</small> and a <a href="#">link</a></h6>

headings 2

Add your personalized documentation here.

Example

Heading 1 (in article) with small text and a link

Heading 2 (in article) with small text and a link

Heading 3 (in article) with small text and a link

Heading 4 (in article) with small text and a link

Heading 5 (in article) with small text and a link

Heading 6 (in article) with small text and a link

<article>
  <h1>Heading 1 (in article) with <small>small text</small> and a <a href="#">link</a></h1>
  <h2>Heading 2 (in article) with <small>small text</small> and a <a href="#">link</a></h2>
  <h3>Heading 3 (in article) with <small>small text</small> and a <a href="#">link</a></h3>
  <h4>Heading 4 (in article) with <small>small text</small> and a <a href="#">link</a></h4>
  <h5>Heading 5 (in article) with <small>small text</small> and a <a href="#">link</a></h5>
  <h6>Heading 6 (in article) with <small>small text</small> and a <a href="#">link</a></h6>
</article>

headings 3

Add your personalized documentation here.

Example

Heading 1 (in section) with small text and a link

Heading 2 (in section) with small text and a link

Heading 3 (in section) with small text and a link

Heading 4 (in section) with small text and a link

Heading 5 (in section) with small text and a link

Heading 6 (in section) with small text and a link

<section>
  <h1>Heading 1 (in section) with <small>small text</small> and a <a href="#">link</a></h1>
  <h2>Heading 2 (in section) with <small>small text</small> and a <a href="#">link</a></h2>
  <h3>Heading 3 (in section) with <small>small text</small> and a <a href="#">link</a></h3>
  <h4>Heading 4 (in section) with <small>small text</small> and a <a href="#">link</a></h4>
  <h5>Heading 5 (in section) with <small>small text</small> and a <a href="#">link</a></h5>
  <h6>Heading 6 (in section) with <small>small text</small> and a <a href="#">link</a></h6>
</section>

hr

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is used to separate content (or define a change) in an HTML page.

Example


<hr>

labels

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. For example, you can attach a label that notes when something was updated.

Structure

Add the CSS class .label to an element to create a label. In the below example, we're using <span>, but any tag will work fine.
Add the CSS class .radius to an element to create a label with text. In the below example, we're using <span>, but any tag will work fine.
Add the CSS class .round to an element to create a label with a number. In the below example, we're using <span>, but any tag will work fine.

Example

Labels with text information

Is running Is not running

Labels with a number

0 4

Labels to signify system health - such as the dashboard

<h3>Labels with text information</h3>
<span class="label radius success">Is running</span> <span class="label radius blue-highlight">Is not running</span>
<h3>Labels with a number</h3>
<span class="label round">0</span> <span class="label round blue-label">4</span>
<h3>Labels to signify system health - such as the dashboard</h3>
<ul class="no-bullet">
  <li><span class="label round alert">3</span></li>
  <li><span class="label round standby-one">4</span></li>
  <li><span class="label round success">2</span></li>
</ul>

progress

A progress indicator is a visual indicator of background activity in a web page or application. A progress indicator consists of a horizontal bar containing some animation that conveys a sense of motion. The progress indicators is a determinate in nature meaning it indicates how long an operation will take.

Progress indicators are an established but non-standardized feature in user interfaces, and provide users with a visual clue to an application's status. Their design and use is therefore an important factor in the overall user experience.

A linear progress indicator should always fill from 0% to 100% and never decrease in value. In the StorNext Connect interface if the background activity is going to take longer than 10 seconds, we should also display the percentage either next to or underneath the progress bar.

NOTE: A single visual indicator should be used to represent a type of operation. For example, a progress bar should display for a task working in the background such as a file uploading and length of time, but don't add a spinner.

Structure

A progress bar has two elements: the container .progress, and and inside of that a span class .meter. The simplest way to change progress percent is to set the style="width:%" property on the .meter, itself. (see example code below for set up).
Add a width CSS property to the inner meter to fill the progress bar.
Add a .radius CSS property to the container div of .progress.
Add an .alert CSS property to the container div of .progress if the background activity has failed. An example of when to use this type of indicator would be a job summary status displaying a failure.
Use the grid system to set the width of the progress bar in the layout. For this example we use .small-10.

Example

Progress

A progress displaying 100%.

A progress displaying 85%.

A progress displaying 50%.

A progress displaying 0%.

Progress failed

Error occured at 70% complete.

Animation demo

When the width is set it will automatically animate the progress bar. This is a demonstration of what it will look like.

<h3>Progress</h3>
<div class="progress radius small-10"> <span class="meter" style="width: 100%"></span> </div>
<p> A progress displaying 100%.</p>
<div class="progress radius small-10"> <span class="meter" style="width: 85%"></span> </div>
<p> A progress displaying 85%.</p>
<div class="progress radius small-10"> <span class="meter" style="width: 50%"></span> </div>
<p> A progress displaying 50%.</p>
<div class="progress radius small-10"> <span class="meter" style="width: 0%"></span> </div>
<p>A progress displaying 0%.</p>
<h3 class="spacer-two">Progress failed</h3>
<div class="progress alert radius small-10"> <span class="meter" style="width: 70%"></span> </div>
<p>Error occured at 70% complete.</p>

<h3 class="spacer-two">Animation demo</em></h3>
<p>When the width is set it will automatically animate the progress bar. This is a demonstration of what it will look like.</p>
<div class="progress radius small-10"><span id="demo-meter" class="meter"></span></div>

<script>
/* This is for demo purposes only. */
(function($){
	$(document).ready(function() {
		window.setInterval(function(){
			$('#demo-meter').width('25%');
			window.setTimeout(function() {
				$('#demo-meter').width('75%');
			}, 1500);
		}, 3000);
	});
})(jQuery);
</script>

spinner

A spinner component is an enhanced replacement for the classic "wait cursor" (which varies significantly among hardware and software versions) and indicates that there is an ongoing process, the results of which are not yet available. A spinner consists of circle that animates in a clockwise direction, and clearly communicates that a process has been started but not completed.

A spinner performs no action itself, either by its display nor when the user clicks or touches it, and does not indicate a process's specific progress or degree of completion. Spinners are an indeterminate indicators used to visualize an unspecified wait time.

Spinners provide users with a consistent visual cue about ongoing activity, regardless of hardware device, operating system, or browser environment. Their design and use is an important factor in the overall user experience.

NOTE: A single visual indicator should be used to represent a type of operation. For example, a progress bar should display for a task working in the background such as a file uploading and length of time, but don't add a spinner with a progress bar.

Structure

A spinner can be called un using an image or placed in a button

To call in a spinner use the following directory img src="images/gif-load.gif. Add  after this to ensure padding by the copy that displays the action being taken.
To call a spinner in a button use CSS class .loading in the button class. Make sure to change the copy in the button to an action such as Updating while the spinner is called in. Once the activity is complete, remove the .loading class from the button and change the copy in the button to it's original verbiage.

Example

Spinner

Installing

Spinner in a button

<h3>Spinner</h3>
<p><img src="images/gif-load.gif">&nbsp;Installing</p>
<h3 class="spacer-two">Spinner in a button</h3>
<p>
  <button class="small button blue radius loading">Committing changes</button>
</p>

table

Use tables for tabular data not layout purposes. In the StorNext Connect UI there are certain classes and structure that should be followed in every table for consistency.

Structure and CSS that data tables should include

Apply the CSS class of .data-table to the table element
A data table contains a header row at the top that may list column names, or the name of the table, followed by rows for data in the tbody element.
Some data tables require a subheading, the CSS styles will automatically be applied by adding a second tr element in the thead element.
Zebra striping will automatically be applied by setting up a tbody element.

Example

Table with a subheader

Gateway shares
	Type	Mount point	Mount options
My share A (expected)	SMB	/stornext/snfs1/mysmb	public="no", writeable="yes", rw, sync
My share B (expected)	nfs	/stornext/snfs1/testit	public="no", writeable="yes"
My share C (expected)	SMB	/stornext/snfs1/testit2	public="yes", writeable="yes", rw

Table no subheader

NAS clusters	Master gateway	Gateways	Authentication	Shares	Status
mycluster1	None selected	6	LDAP Kerberos	3	Creating cluster
mycluster2	None selected	6	LDAP Kerberos	3	Creating cluster
mycluster3	None selected	6	LDAP Kerberos	3	Creating cluster
Apple one	None selected	6	LDAP Kerberos	3	Creating cluster

<h3>Table with a subheader</h3>
<table class="data-table">
  <thead>
    <tr>
      <th colspan="4">Gateway shares</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Type</td>
      <td>Mount point</td>
      <td>Mount options</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>My share A</strong> (expected) &nbsp;<i class="icon-arrow-right3 right"></i></td>
      <td>SMB</td>
      <td>/stornext/snfs1/mysmb</td>
      <td>public="no", writeable="yes", rw, sync</td>
    </tr>
    <tr>
      <td><strong>My share B</strong> (expected)&nbsp;<i class="icon-arrow-right3 right"></i></td>
      <td>nfs</td>
      <td>/stornext/snfs1/testit</td>
      <td>public="no", writeable="yes"</td>
    </tr>
    <tr>
      <td><strong>My share C</strong> (expected) &nbsp;<i class="icon-arrow-right3 right"></i></td>
      <td>SMB</td>
      <td>/stornext/snfs1/testit2</td>
      <td>public="yes", writeable="yes", rw</td>
    </tr>
  </tbody>
</table>
<h3>Table no subheader</h3>
<table class="data-table">
  <thead>
    <tr>
      <th>NAS clusters</th>
      <th>Master gateway</th>
      <th class="text-center"
                >Gateways</th>
      <th>Authentication</th>
      <th class="text-center">Shares</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mycluster1</td>
      <td>None selected</td>
      <td class="text-center">6</td>
      <td>LDAP Kerberos</td>
      <td class="text-center">3</td>
      <td>Creating cluster</td>
    </tr>
    <tr>
      <td>mycluster2</td>
      <td>None selected</td>
      <td class="text-center">6</td>
      <td>LDAP Kerberos</td>
      <td class="text-center">3</td>
      <td>Creating cluster</td>
    </tr>
    <tr>
      <td>mycluster3</td>
      <td>None selected</td>
      <td class="text-center">6</td>
      <td>LDAP Kerberos</td>
      <td class="text-center">3</td>
      <td>Creating cluster</td>
    </tr>
    <tr>
      <td>Apple one</td>
      <td>None selected</td>
      <td class="text-center">6</td>
      <td>LDAP Kerberos</td>
      <td class="text-center">3</td>
      <td>Creating cluster</td>
    </tr>
  </tbody>
</table>

tabs

Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app. Don’t use tabs for carousels or pagination of content. Those use cases involve viewing content, not navigating between groups of content.

Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Structure

There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab.

All elements of the tab should be wrapped in a container div. In the example below we use an ID of #container1.
Create the tabstrip by making an ul and add a CSS class of .nav, and a CSS class of col5 or whatever col count you need up to 8 columns. Make sure the col count is large enough so the copy in the tab does not wrap.
Create an li element for each tab and add a CSS class of .active to the first tab.
Each tab contains a link to the content for that tab. Add a data-tab="ID"atttibute to each li which should match the ID of the tab content.
All the of the tab content should be wrapped in an outer div with a CSS class of .content.
Create a div container for each tab content section and add the CSS class .tab_content, .spacer-two to the div. Add a unique ID to the tab content contaier, which is targeted by the data-tab in the tabstrip. Add your content using the grid system.
To access the styles for the tab include the slick-tabs.css in your stylesheets.
To initialize the tab, call in cleantabs.jquery.js in your JavaScript from the javascript file folder located in core.
Add the fucntion noted in the source below.

Example

First-tab

This is tab content for first tab.

Second tab

This is tab content for second tab.

Third tab

This is tab content for third tab.

<!-- All elements of tab get wrapped in #container1-->

<div ng-controller="TabCtrl" class="connectStaticTabs">
  <md-content class="md-padding">
    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="top">
      <md-tab id="tab1">
        <md-tab-label>First-tab</md-tab-label>
        <md-tab-body>
          This is tab content for first tab.
        </md-tab-body>
      </md-tab>
      <md-tab id="tab2">
        <md-tab-label>Second tab</md-tab-label>
        <md-tab-body>
          This is tab content for second tab.
        </md-tab-body>
      </md-tab>
      <md-tab id="tab3">
        <md-tab-label>Third tab</md-tab-label>
        <md-tab-body>
          This is tab content for third tab.
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

<script>
  angular
    .module('styleguideApp')
    .controller('TabCtrl', TabCtrl);

  function TabCtrl ( $scope ) {
    $scope.data = {
      selectedIndex: 0
    };
  }
</script>

A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. Their design and use is an important factor in the overall user experience. Not required for every element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.

The tooltips can be positioned on the .tip-bottom, which is the default position, .tip-top, .tip-left, or tip-right of the target element by adding the appropriate class to them. On a small device, the tooltips are full width and bottom aligned.

Note: If you don't want tooltips to interfere with a touch event, you can disable them for those devices. To do this, you'll just need to add a data-option to your tooltip, like so data-options="disable-for-touch:true.

Structure

Add a <span> element with a data attribute of data-tooltip.
Always add a CSS class of .has-tip and .radius the to <span> element.
Add the tooltip information in the title attribute. (See structure below).

Example

extended information

<span class="has-tip tip-top radius" data-tooltip title="hello you">extended information</span>

icons

In addition to conveying brand personality through color and style, icons must first and foremost communicate meaning in a graphical user interface. Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy—confusing, frustrating, eye candy—and to visual noise that hinders people from completing a task.

The benefits of icons in a graphical user interface (GUI) include:

They save space: icons can be compact enough to allow toolbars, palettes, and so on to display many icons in a relatively small space.
Icons are fast to recognize at a glance (if well designed) — particularly true for standard icons that people have seen and used before.
There is no need to translate icons for international users, provided that the icons are mindful of cultural differences (for example, mailboxes look very different in various countries whereas envelopes look the same, therefore an envelope is a more international icon for an email program than a mailbox).
Icons can be visually pleasing and enhance the aesthetic appeal of a design. They support the notion of a product family or suite when the same icons and style are used in several places.
Universally understood icons work well (ie. print, close, play/pause, reply, tweet, share on Facebook). If no universal/unambiguous icon can be identified, it is probably best to use a clear and concise text label for an element in place of an icon.

Icon usage for StorNext Connect

StorNext Connect uses a set of icons chosen from IcoMoon.

To implement an icon in the user interface, add a <i class="icon-name-goes-here"></i>.
Add   after the closing </i> tag if there is text following the icon to prevent copy jutting against the icon element.
Use the following icons universally throughout the StorNext Connect interface:
- The Edit icon should use the CSS class <i class="icon-pencil"></i>
- The warning icon should use these CSS classes <i class="icon-exclamation-triangle standby"></i>
- The delete icon should use the CSS class <i class="icon-times-circle"></i>
- The success icon should use these CSS classes <i class="icon-check green-done"></i>
- The refresh icon should use these CSS classes <i class="icon-refresh grey-spin"></i>
- The failure icon should use these CSS classes <i class="icon-close red-error"></i>
- The question icon should use these CSS classes <i class="icon-question-circle dark-blue"></i>
- The import icon should use this CSS classes <i class="icon-out""></i>

Example

Edit icon

Warning icon

Delete icon

Success icon

Refresh icon

Failure icon

Question icon

Import icon

<div class="row">
  <div class="large-3 columns">
    <p><i class="icon-pencil"></i>&nbsp;Edit icon</p>
    <p><i class="icon-exclamation-triangle standby"></i>&nbsp;Warning icon</p>
  </div>
  <div class="large-3 columns">
    <p><i class="icon-times-circle"></i>&nbsp;Delete icon</p>
    <p><i class="icon-check green-done"></i>&nbsp;Success icon</p>
  </div>
  <div class="large-3 columns">
    <p><i class="icon-refresh grey-spin"></i>&nbsp;Refresh icon</p>
    <p><i class="icon-close red-error"></i>&nbsp;Failure icon</p>
  </div>
  <div class="large-3 columns end">
    <p><i class="icon-help"></i>&nbsp;Question icon</p>
    <p><i class="icon-out"></i>&nbsp;Import icon</p>
  </div>
</div>

patterns

alerts

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They'll conform to 100% of the container width you put them in.

Never display more than one type of alert at a time in the StorNext Connect UI. For example, a user should never see an error message and a warning message. This creates confusion to the user. In this case the error alert would be chosen as it is disruptive in nature and requires the user to take immediate action. The warning content could be shown in a paragraph or the copy could be combined in the error alert, depending on the message.

The alert message should display as close in proximity to where the action occurred to give a visual cue as to what caused the issue. For example, if the user is filling out a form, and a warning displays based on a selection of a drop down element, the warning should not be at the top of the page but by the element where the choice occurred.

Every type of alert except the error alert should include an anchor with a CSS class of .close to create a close box. This gives the user control to close the alert if they choose.

Structure

Alerts for the StorNext Connect UI should always include the following:

Add the CSS class of .spacer-two to the <div> with the container class of .row.
Start the alert with a <div>tag with data-alert. On that block-block level element add the CSS classes of .alert-box, .radius, .clearfix, and the type of alert (.error, .info, .success, or warning).
Set two inner <div>tags inside the data-alert <div>.
On the first inner <div> tag, add the CSS class of .iconography and .left.
Set the icon based on alert type in the first inner <div>.
On the second inner <div> tag, add the CSS class of .left, and .copy. Put the warning message into this <div>.
Set an anchor tag with a CSS class of .close to create a close box after the two inner <div> tags.

Example

This is a success alert.

This is a warning alert.

This is an error alert.

This is an info alert.


<div class="row spacer-two">
  <div class="small-12 medium-6 large-6 columns">
    <div data-alert class="alert-box success radius clearfix">
      <div class="iconography left"><i class="icon-checkmark"></i></div>
      <div class="left copy">This is a success alert.</div>
      <a href="#" class="close">&times;</a> </div>
  </div>
</div>
<div class="row spacer-two">
  <div class="small-12 medium-6 large-6 columns">
    <div data-alert class="alert-box warning radius clearfix">
      <div class="iconography left"><i class="icon-warning2 left"></i></div>
      <div class="left copy">This is a warning alert.</div>
      <a href="#" class="close">&times;</a> </div>
  </div>
</div>
<div class="row spacer-two">
  <div class="small-12 medium-6 large-6 columns">
    <div data-alert class="alert-box error radius clearfix">
      <div class="iconography left"><i class="icon-exclamation-circle"></i></div>
      <div class="left copy">This is an error alert.</div>
       </div>
  </div>
</div>
<div class="row spacer-two">
  <div class="small-12 medium-6 large-6 columns">
    <div data-alert class="alert-box info radius clearfix">
      <div class="iconography left"> <i class="icon-info2"></i></div>
      <div class="left copy">This is an info alert.</div>
      <a href="#" class="close">&times;</a> </div>
  </div>
</div>

breadcrumbs

Breadcrumb links, or breadcrumb navigation, are a set of contextual links that function as a navigation aid.

Breadcrumb links provide an information scent, which consists of textual, and visual cues that:

Facilitate clear navigation (where can I go?)
Allow for quick orientation (where am I?)

Structure

Breadcrumbs for the StorNext Connect UI should always be set up in the following manner:

Breadcrumb links should be placed above the web page’s h1-formatted heading to encourage usage (for user mental models), and jut against the main navigation container.
Begin a location-based breadcrumb trail with a link to the home page of the app. End the breadcrumb trail with the current page. Add a CSS class of .current to the link on the current page of the app.
Ensure that the breadcrumb links follow the StorNext naming convention of upper case only on the first word of the breadcrumb unless it is a title.

Example

<div class="row">
  <ul class="secondary-nav gradient show-for-medium-up small-12 columns">
    <li><a href="#">Manage NAS</a></li>
    <li class="current"><a href="#">Create NAS cluster</a></li>
  </ul>
</div>