CSS

Basic Design Principle, CSS and HTML elements guide for NetDimensions User Interface.

Overview

The target of practicing all the method below is to create more user-friendly NetDimension products.

To make the system more easy to use and keep users happy, we keep improving the design on user interface from interaction to visual, from backend to frontend. We keep following usability principles in mind to build the products. Please take care of them together with us.

  • Consistent UI standards and behaviour - labels, forms, navigations, links, layouts, flows controls.
  • User must always know where they are.
  • Maintaining visual hierarchy - important objects should be more prominent, group related controls and objects by placing them together.
  • Make the next step obvious - clear focus on what the user can do on the screen
  • Self-exlanatory lingua, less text
  • Minimize the number of clicks
  • Accessible - section 508

Please refer more CSS Techniques Principles to CSS Techniques for WCAG 2.0

CSS & SASS

File Structure

In August 2014, Talent Suite started using SASS language to deal with the stylesheet. In this way, talent suite can reduce the uses of css @import to load multiple css files. It will help improve the loading performance and make it easier to organize the stylesheets by nested structure.

All core CSS files misc CSS can be found in the style files path .\ekp\nd\fresco\styles_core\ .

All skin folder can be found in .\ekp\nd\fresco\styles\, since V11.2 2015, the styles folder has been set as external folder. That is when the default skin updated, it need you manually copy and paste the folder in the .\ekp\nd\fresco\styles\ and paste to your local external folder to get update.

All core SCSS files can be found in path .\ekp\nd\fresco\styles_core\scss\ .

Main core CSS files instruction:

  • base.css

    It contains all the main basic style for NTS. It was generated by SASS with the source file \scss\base.scss All the previous base.css files now renamed and convertd in _core.css snippet and paste it to main.css to overwrite it.

  • base-plugin-custom.css

    It is used for overwriting initial css attributes in javascript plugin library. The source scsss file is in the path \scss\base-bplugin-custom.css

  • All the old standard.css, fontawesome.css file has been converted to scss format and imported in base.scss file.

How to deal with Sass and Compass

The detailed instruction of how to implement Sass and Compass in Talent Suite has been updated on internal wiki, please visit Wiki and Getting started with Sass and Compass .

Core CSS files will be overwritten when Talent Suite upgrades to new version. Be cautious to change it for customization use.

@import files

As there are too many css files that NTS is now using @import rule to import main core files in base css. Imported styles will be applied before base.css. They might be overwritten by attributes in base.css.

For those .css files in skin folder, they also use @import rule to do multi-file import.

Loading

  1. CSS files are loading in order. The later one can override the attributes that exist in preloaded CSS files.
  2. Prior to the loading order, the style attributes in a more specific element selector can override the general one.
  3. !important tag is not recommended to use. Because it can overwrite the style for the element globally. Prior to both the loading order and element selector. So please use !important in cautious.

Declaration Order

The property declarations should be grouped together following the order:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

Reference

For further CSS coding and format standard, Suggest to follow the CodeGuide by @mdo

.declaration-order {
      /* Positioning */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;

      /* Box-model */
      display: block;
      float: right;
      width: 100px;
      height: 100px;

      /* Typography */
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      color: #333;
      text-align: center;

      /* Visual */
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;

      /* Misc */
      opacity: 1;
}

Typography

Basic typography ideas in Talent Suite.

Font Size

  • The basic font-size in NetDimensions is 13px.
  • In order to make the size fit better to different screen resolutions, we use unit em to define all font-size. The basic font-size is 0.813em as 0.813em = 13px.
  • You can change font-size by define it in the skin main.css file.

Headings

  • All pages should use heading elements.
  • Brand heading should use h1
  • General Page Heading is using h2
  • All sub-title on that page should follow the heading naming order to use depend on the context. For example, when a page only have h2 as the page heading, you have to use h3 for the section title.
  • The headings on "Knowledge Center" is an example.

H1 Brand Heading

H2 Page Heading

H3 Page Sub-heading that follows H2

H4 Page Sub-heading that follows H3

H5 Page Sub-heading that follows H4
H6 Page Sub-heading that follows H5

Description

On some pages, there is a sentence to describe the page feature. For the sentence, should use < p class="description" > to wrap it. The style looks like the Example below:

This is sentence for description. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

<p class="description">
    This is sentence for description. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
</p>
                    

Table

General Table

In order to separate from the old table which used to build up the page layout. Since NTS version 8.3, class="netd-table" is introduced to add to real tables for data presentation.

  • Only use <table> for data list display. Should NOT use <table> as the HTML structure for layout intention.
  • A standard .netd-table html structure should look like the example below:
    General Data Table
    Column 1 Title Column 2 Title
    Column 1 Content Row1 Column 2 Content Row1
    Column 1 Content Row2 Column 2 Content Row2
    Column 1 Content Row3 Column 2 Content Row3
    Column 1 Content Row4 Column 2 Content Row4
    <table class="netd-table">
        <thead>
            <tr>
                <th class="viewHeader">Column 1 Title</th>
                <th class="viewHeader">Column 2 Title</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1">
                <td>Column 1 Content Row1</td>
                <td>Column 2 Content Row1</td>
            </tr>
            <tr class="row2">
                <td>Column 1 Content Row2</td>
                <td>Column 2 Content Row2</td>
            </tr>
            <tr class="row1">
                <td>Column 1 Content Row3</td>
                <td>Column 2 Content Row3</td>
            </tr>
            <tr class="row2">
                <td>Column 1 Content Row4</td>
                <td>Column 2 Content Row4</td>
            </tr>
        </tbody>
    </table>
                                
  • If it is a table that with action or bulk action, please add .action-nav bar on top of the table. Should put all the "Create" action button to top-right of the table.
    General Data Table with Actions
    Title Description
    Title with main action link Column 2 Content Row1
    Title with main action link Column 2 Content Row2
    <table class="netd-table">
        <thead>
            <tr>
                <th class="viewHeader select_column"><input type="checkbox" /></th>
                <th class="viewHeader action_column"></th>
                <th class="viewHeader">Title</th>
                <th class="viewHeader">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1">
                <td class="select_column"><input type="checkbox" /></td>
                <td class="action_column">
                    <div class="netd-drop-down-btn-container relative-position no-padding no-margin ">
                        <button class="netd-button button-no-bg netd-button-icon-only ui-button ui-widget ui-state-default ui-corner-all button-ui-inited ui-button-text-only" type="button" >
                            <span class="ui-button-text"><span class="netd-icon icon-cog "></span></span>
                        </button>
                        <ul class="netd-drop-down-btn-list display-none no-margin no-padding">
                            <li class="netd-drop-down-btn-item ">Edit</li>
                            <li class="netd-drop-down-btn-item ">Delete</li>
                        </ul>
                    </div>
                </td>
                <td><a href="#">Title with main actiion alink</a></td>
                <td>Column 2 Content Row1</td>
            </tr>
        </tbody>
    </table>
                                

Sortable Table

The image below shows the standard table structure. If there is a sortable column, just add the class="sorting" to add the "sort arrow".

Standard Table Structure PDF

View in PDF

Form

Standard Form Idea

  • Using label elements to associate text labels with form controls.
  • Using the title attribute to identify form controls when the label element cannot be used .
  • Should not use <table> to wrap and align form element. Use table element for page layout is against standards that NetDimensions follows.
  • For those old form that still using <table> as structure. We will refactor the structure gradually.
  • Recommend using "Left-Aligned Labels Above Fields" layout for the form. It is more easier for user to follow up all the form items.
  • For form on pop-up framed pages, as windows size is limit to a size, it keep the "left-aligned labels to the left of fields" layout for a while.
  • Grouping form controls with fieldset and legend.
  • Grouping field input and label with class="netd-form-group"

Form Field Size

  1. In order to make all the form fields width under control and make the . Following classes should be added to those general form fields(exclude netd-filter-form).
  2. .x-small For extra small fields use, for example numeric input or select with less then 8 digits.
  3. .small
  4. .medium For general use
  5. .large
  6. .x-large For full-width form use, while a select or a text

Developer Tips

  • For form on general pages, should add class="netd-form to <form> to get the standard form style. It will get the "Left-Aligned Labels Above Fields" layout.
  • For <form class="netd-form"> in <body class="mainframe">, it will get the "left-aligned labels to the left of fields" layout.
  • Use LabelInput.getFullLabel() which returns an element that adheres to the above.
  • Should avoid using <table>to generate the form structure.
  • Should not use <br> tag to generate spacing.
  • Should not add colon : to the end of label text
  • For inline text fields, add class="inline-input" to ensure appropriate styling.
  • Should use <div class="netd-form-group"> to wrap a set that include a label and a field. This class will give some spacing in between different form part.
  • If a form contains amount of setting items that can be divided to several part. Should use <fieldset> <legend> to separate the form into different sections. Please refer to "Competency Manager > Competency Editor" as example

Form Validation

  • If a field is required,
    1. An asterisk * should be added to the right side of the <Label> Text.
    2. For text fields, the attribute placeholder="required" should be added to the <input>.
  • If here are any invalid value
    1. Should show a general Error Message on top of the page in MessageBar Method.
    2. Should show inline Validation Error Message below the <input>
    3. Please refer to "Manage Center > Users > User Attribute Extension"

Standard .netd-form style

Inline error message goes here.

<form class="netd-form">
    <div class="netd-form-group">
        <label for="text-input">Label for Text Input <span class="required-indicator">*</span></label>
        <input id="text-input" class="medium" type="text" placeholder="Text input"/>
        <p class="error">Inline error message goes here.</p>
    </div>
    <!--Radio Input Set-->
    <div class="netd-form-group">
        <label for="radio-input-set">Label for Radio Input Set</label>
        <div id="radio-input-set">
            <label for="radio-input-1">
                <input type="radio" id="radio-input-1" />
                Radio Item 1
            </label>
            <label for="radio-input-2">
                <input type="radio" id="radio-input-2" />
                Radio Item 2
            </label>
        </div>
    </div>
    <!--Checkbox Input Set-->
    <div class="netd-form-group">
        <label for="checkbox-input-set">Label for Radio Input Set</label>
        <div id="checkbox-input-set">
            <label for="checkbox-input-1">
                <input type="checkbox" id="checkbox-input-1" />
                Radio Item 1
            </label>
            <label for="checkbox-input-2">
                <input type="checkbox" id="checkbox-input-2" />
                Radio Item 2
            </label>
        </div>
    </div>
    <!--Select-->
    <div class="netd-form-group">
        <label for="select-set">Label for Select</label>
        <select name="select" id="select-set">
            <option value="0">Select a item</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
</form>
                    

Filter Form

NetD Filter Form is used for pages contains filters. For example the review list page on workspace.

  • Should add class=netd-filter-form as well as class="netd-form to get the standard filter form style.
  • Should group each set of field input and its label with <div class="netd-filter-group">.
  • If the page contains a lot of filter items, consider adding <a id="searchform-toggle"> You can find the example on "workspace > review" or "Manage Center > Learning Module List".

Button

  • Button is always do an action. In Talent Suite, all the basic functional buttons display the way of "icon+text". Currently, we use the jqueryUI Framework Icons.
  • Recommend using <button> element instead of <input> to generate a button.
  • If there is a page with a list and each list item include same actions, or a form that its child element include an action. Should use <a> link instead of button to these cases exclude the permission button.
<button title="Create Learning Module" icon="ui-icon-plus" class="netd-button button netd-button-icon-text ui-button ui-widget ui-state-default ui-corner-all button-ui-inited ui-button-text-icon-primary" id="createButton" name="createButton"  type="button" role="button" >
    <span class="ui-button-icon-primary ui-icon ui-icon-plus"></span>
    <span class="ui-button-text">Create Learning Module</span>
</button>
                    

Button Set

  • When there is more than one button on a row, should use <div class="button-set"> to contain the two buttons
  • For long form list that display more than the height of the window, Talent suite now automatically adds the class="fixed-to-bottom" to the <div class="button-set"> and make it read <div class="button-set fixed-to-bottom">. It will keep the action buttons keep fixing on the bottom of the screen, so that people can save their changes on the view without a long scrolling to the bottom of the page. You can see this effects on page such as User Group Editing view on Manage Center. As of the screenshot below:

    fixed-to-bottom example screenshot

<div class="button-set">
    <input value="Filter" style="display:inline-block" class="button" name="apply-filters" type="SUBMIT">
    <input value="Reset" style="display:inline-block" class="button" name="reset-filters" type="RESET">
</div>
                    

Pagination

  • Pagination is consisted of showing number information and pages buttons.
Showing: 1 - 10 of 11
<div class="clear-both padding-bottom-30 padding-top-10 pagination-container">Showing: 1 - 10 of 11
        <div class="float-right">
        <button title="First" disabled="" class="netd-button button ui-button-disabled ui-state-disabled netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="button-first" name="button-first" showtext="true" type="button" role="button" aria-disabled="true"><span class="ui-button-text">«</span></button>
        <button title="Previous" disabled="" class="netd-button button ui-button-disabled ui-state-disabled netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="button-previous" name="button-previous" showtext="true" type="button" role="button" aria-disabled="true"><span class="ui-button-text">‹</span></button>
        <button title="Page 1" disabled="" class="netd-button button current-page ui-button-disabled ui-state-disabled netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="page-1" name="page-1" showtext="true" type="button" role="button" aria-disabled="true"><span class="ui-button-text">1</span></button>
        <button title="Page 2" class="netd-button button netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="page-2" name="page-2" showtext="true" eventhandlers="[{
"event": "click",
"method": "catalog.editor.goPage"
}]" data-fetch-page-no="2" type="button" role="button" aria-disabled="false"><span class="ui-button-text">2</span></button>
        <button title="Next" class="netd-button button netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="button-next" name="button-next" showtext="true" eventhandlers="[{
"event": "click",
"method": "catalog.editor.goPage"
}]" data-fetch-page-no="2" type="button" role="button" aria-disabled="false"><span class="ui-button-text">›</span></button>
        <button title="Last" class="netd-button button netd-button-text-only ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only button-ui-inited" id="button-last" name="button-last" showtext="true" eventhandlers="[{
"event": "click",
"method": "catalog.editor.goPage"
}]" data-fetch-page-no="2" type="button" role="button" aria-disabled="false"><span class="ui-button-text">»</span></button></div>
</div>
                    

Icon

  • For action indicator on buttons, NTS is using the icon set in jQueryUI.
  • As more and more devices with high solution or retina display. NTS is now migrating to @font-icon so that even on retina screen, font-icon will not blur. The Font Awesome 3.2.1 font-icon set has been included in the system, you can add one by simply adding a <span class="icon-*"></span>.
  • When append fontAwesome icon in front of some text or after text. Should add class padding-left-5 or padding-right-5 to the class="icon-*" to give enough spacing in between them.

Configuration

Question

Information

<p><span class="icon-cog padding-right-5"></span>Gear icon that used to show on table list to show all actions that user can do to the table item.</p>
<p>Question sign<span class="icon-question-sign padding-left-5" title="Add some tooltip here"></span></p>
<p>Information <span class="icon-info-sign padding-left-5"></span></p>
                    

Module Type Icons

  • For module type icons, better to use HTML Span structure with specific class definition in CSS to generate. For example <span class="netd-icon icon-mt-online"></span>, an online type's icon has been defined in CSS as a background image for icon-mt-online.
  • The class name icon-mt-* is used for background image definition in CSS for different module types.
  • The class name final String className is used for customization design. Just assign className the customized class name defined in skin main.css. For example <span class="netd-icon customized-classname icon-mt-online"></span>
CSS Class
  • icon-mt-curriculum
  • icon-mt-external
  • icon-mt-certification
  • icon-mt-justintime
  • icon-mt-online
  • icon-mt-exam
  • icon-mt-book
  • icon-mt-classroom
  • icon-mt-cd
  • icon-mt-virtual
  • icon-mt-video
  • icon-mt-virtual_a
  • icon-mt-cassette
  • icon-mt-workshop
  • icon-mt-task
  • icon-mt-paper

Unicode

Use on the desktop, install netdicon.ttf and copy and paste the icons (not the unicode) directly into your designs.

  • icon-mt-curriculum (&#xf115;)
  • icon-mt-external (&#xf106;)
  • icon-mt-certification (&#xf103;)
  • icon-mt-justintime (&#xf108;)
  • icon-mt-online (&#xf109;)
  • icon-mt-exam (&#xf107;)
  • icon-mt-book (&#xf100;)
  • icon-mt-classroom (&#xf104;)
  • icon-mt-cd (&#xf102;)
  • icon-mt-virtual (&#xf111;)
  • icon-mt-video (&#xf110;)
  • icon-mt-virtual_a (&#xf112;)
  • icon-mt-cassette (&#xf101;)
  • icon-mt-workshop (&#xf113;)
  • icon-mt-task (&#xf10f;)
  • icon-mt-paper (&#xf10c;)
<p><span title="Online" class="netd-icon icon-mt-online"></span></p>
<p><span class="module-type"><span title="Online" class="netd-icon icon-mt-online"></span>Online</span></p>
                    

Netdicon Icon-font 1.0.1

  • For all the module type icons, Talent suite started using icon-font "netdicon" since version 11.0.
  • The font-family is "netdicon".
  • It allows to style the icons as text font by changing its attributes like color, font-size or font-weight.
  • With the support for IE7.
  • Please go to the Cheatsheet for all the existing netdicon style preview.

Images

  • Should use alt attributes on img elements.

Default Images

Users are allowed to customize images. To do this, please upload in System Configuration, and the recommended size is 180px * 180px (squared)

Default Catalog Image Default Catalog Image

Default Module Image Default Module Image

Avatar

After user upload their user avatar. System will generate two size for avatar images.

  1. Small size: 48px * 48px. Used for user list, review CDC and 9-box report tooltip display.
  2. Large size: 150px * 150px. Used for My Profile.

Default User Avatar 48px*48px

Default User Avatar 150px*150px

Feedback Message

Status

  • For different statuses feedback message, should apply different html class to the element to conduct the color.
  • Use <ul class="messagebar"> to get the basic style for message bar.
  • If there are more than one issue, can add different problem feedback in <li>.
  • If it need to show some note or notification, should use class="notice-wrapper" for block paragraph to display, such as the attempt notification on knowledge center. For inline message, please add class="problem" as the grace period on competency review list use.

Feedback Message

Format 1: Message Bar

Message Bar shows a global feedback message after you do any action that changing the data. It is a full width bar that on the top of the page. If mouse is out of the message bar area, it will disappears after 7s. It will keep display there when mouse over.

You can find the view on "Manage Center > Talent > Appraisal Template".

For success feedback, use class="success"

  • Your changes have been saved.
  • close

For failed, incomplete, warning or error feedback, use class="warning"

  • Your changes contain invalid data and have not been saved.
  • close
<!--Success Message Bar-->
<ul class="success messagebar">
    <li>Your changes contain invalid data and have not been saved.</li>
    <a><span class="ui-icon ui-icon-closethick">close</span></a>
</ul>

<!--Failed Message Bar-->
<ul class="warning messagebar">
    <li>Your changes have been saved.</li>
    <a><span class="ui-icon ui-icon-closethick">close</span></a>
</ul>
                    

Format 2: Inline Validation Message

When submit a form, recommend to do form validation and display error message next to the field which cause the problem.

You can find the view on "Manage Center > Talent > Appraisal Template".

Inline error message goes here, below the input.

<div class="netd-form-group">
    <label for="text-input-2">Label for Text Input <span class="required-indicator">*</span></label>
    <input id="text-input-2" class="medium" type="text" placeholder="Text input"/>
    <p class="error">Inline error message goes here, below the input.</p>
</div>
                    

Format 3: In-page Message Bar

On pop-up window framed page or on pages that contains warning message when page loading, please try to show the warning message below the page heading.

You can find the view on "Career Center > Goals(Locked)"

  • Editing of goals has been locked as an appraisal with goals is in progress...
<ul class="warning">
    <li>Editing of goals has been locked as an appraisal with goals is in progress...</li>
</ul>
                    

Format 4: Message Box

Use message box in pop-up window or overlay to contain a piece of or a list of feedback after a certain execution or group execution.

You can find the view of a piece of feedback on Enrolling a learning module.

You can find the view of a list of feedback on "Catalog Editor > Group Enroll".

Enrollment Confirmation

For Module Title

Oct 16, 2014 9:00 AM CST - Oct 16, 2015 10:00 AM CST

Enrollment Successful

For Module Title

Check your email inbox for any pre-class instructions

Enrollment Failed

For Module Title

Reason:
Your training record is missing required prerequisite module(s).
Prerequisite Modules:

Please contact the staff if you wish to follow up on this request.

                    <div class="message-box confirmation">
                        <h2>Enrollment Confirmation</h2>
                        <h3>For Module Title</h3>
                        <p class="description">Oct 16, 2014 9:00 AM CST - Oct 16, 2015 10:00 AM CST</p>
                        <form class="netd-form">
                            <div class="button-set">
                                <input value="Confirm Enrollment" class="netd-button button" type="button">
                                <input value="Cancel" class="button" name="buttonInput" type="button">
                            </div>
                        </form>
                    </div>
                    <div class="message-box success">
                        <h2>Enrollment Successful</h2>
                        <h3>For Module Title</h3>
                        <p class="description">Check your email inbox for any pre-class instructions</p>
                        <form class="netd-form">
                            <div class="button-set">
                                <button>Go to Knowledge Center</button>
                            </div>
                        </form>
                    </div>
                    <div class="message-box failed">
                        <h2>Enrollment Failed</h2>
                        <h3>For Module Title</h3>
                        <dl>
                            <dt>Reason:</dt>
                            <dd>Your training record is missing required prerequisite module(s).</dd>
                            <dt>Prerequisite Modules:</dt>
                            <dd>
                                <ul class="show-list-indicator">
                                    <li><a href="#"><span class="icon-program netd-icon margin-right-5"></span>P1</a></li>
                                    <li><a href="#"><span class="icon-program netd-icon margin-right-5"></span>O1</a></li>
                                </ul>
                            </dd>
                        </dl>
                        <p class="description">
                            Please contact the staff if you wish to follow up on this request.
                        </p>
                        <form class="netd-form">
                            <div class="button-set">
                                <button>Contact Support</button>
                                <button>Back</button>
                            </div>
                        </form>
                    </div>
                

Group Enrollment

For First online course

To minimize the overall performance impact on other online users, the processing rate is intentionally slowed to one per second.

Participant Name (ID) Enrollment Processing Status
ADMINISTRATOR System (NDADMIN) You are already enrolled in this module or program.
ADMINISTRATOR System (NDADMIN) Enrolled
                    <div class="message-box confirmation">
                        <h2>Group Enrollment</h2>
                        <table class="netd-table full-width">
                            <thead>
                            <tr>
                                <th class=" width-40">Participant Name (ID)</th>
                                <th class=" ">Enrollment Processing Status</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>ADMINISTRATOR System (NDADMIN)</td>
                                <td><span class="netd-icon icon-remove warning margin-right-5"></span>
                                    You are already enrolled in this module or program.
                                </td>
                            </tr>
                            <tr>
                                <td>ADMINISTRATOR System (NDADMIN)</td>
                                <td><span class="netd-icon icon-ok completed margin-right-5"></span>
                                    Enrolled
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <form class="netd-form" >
                            <div class="button-set">
                                <input value="Close Window" class="button" name="buttonInput" type="SUBMIT">
                            </div>
                        </form>
                    </div>
                

Helper Classes

  • You can find the "Helper classes" in standard.css.
  • Each of the helper classes can be added to html to help adjust style. You can change margin, padding, floating, width percentage, text alignment, form fields size etc.
  • Helper Classes can be used for those html elements that need minor styling changes. If an element need specific styling that more than those help classes can do. Please give up using help classes. Should define the style in base.css or skin files.
  • In RTL skin, it already includes a standard-rtl.css which already convert left-right alignment for Right-to-left skin. So no need to change any of the help classes when you implement the RTL skin.

Grid System

The system is included the "960 Grid System". In NTS, 960 grid system should apply to pages with sidebar ONLY. No need to use 960 grid system to one column full width page.

You can find the page structure example on "Manage Center > Competency Manager".

<!-- 960 Grid implement guide, use "Competency Manager" as page structure -->
<div class="top_container container_16">
    <div class="grid_5">
        <!-- Left area, such as the dynatree Selector -->
    </div>
    <div class="grid_11">
        <!-- Right area -->
    </div>
</div>
                    

Right-To-Left Skin

For people who uses language in Right-To-Left format, such as Arabic. An Right-To-Left(RTL) Skin has been provided for RTL reader.

Some baisc CSS and plugin CSS have been customized for RTL skin. You can find the source files in "NTS-83-RTL" skin folder with postfix "-rtl" on the file name. They will overwrite those style attributes in basic css files in root of styles folder.

  • 960-rtl.css
  • base-rtl.css
  • standard-rtl.css
  • base-custom-plugin-rtl.css
  • ui.dynatree_rtl.css

Old Browsers Support

NTS supports old browsers back to IE7. However, the browser IE7 and IE8 could not get some style right that some of the style properties need to be specifically redefined for them. There are two ways that Talent Suite used to fix the display for old browsers.

  1. Use specific sign to target IE7, IE8 or IE9 in CSS. This is the initial way talent suite use to fix the old browsers display. For the implement details, please refer to the Quick Tip .
  2. Redefine the CSS attributes in Conditionizr based files. Conditionizr is a javascript library that can auto detect the browser type and auto apply browser named .css file or js .file.