Global Styles is a centralized framework and guide that defines the common styles and conventions shared across NuSkin's web products. This page provides a brief overview of what is available, but you should review the actual stylesheets to see everything.
Here is some code you can copy to start a new page/app:
In order for Global Styles to function correctly on a page, you must ensure that the ns-atomic class appears as an ancestor to your elements. Usually setting ns-atomic on the body is the best solution.
Injects an invisible placeholder so you can position an element relative to its container without losing the sapce the element should be taking up.
Example
Normally, this text would be at risk of being overlapped by the absolutely positioned button, but because of the placeholder, it all lays out correctly
<div>
<p>Normally, this text would be at risk of being overlapped by the absolutely positioned button, but because of the placeholder, it all lays out correctly</p>
<button class='btn btn-secondary absolute-placeholder'>Absolutely Positioned</button>
<button class='btn btn-secondary anchor-to-bottom-right'>Absolutely Positioned</button>
</div>
Usage
Generally speaking, you'll essentially want two copies of the element you are creating a placeholder for, then apply the placeholder class to the copy only. Make sure you remove any classes or rules that would potentially affect the copy's ability to affect layout (e.g. position: absolute). The copy will end up being unseen, but will reserve the space the element would take up to help correct potential overlap issues. While the absolute placeholder is a not the most elegant solution for the problem absolute positioning presents, it does resolve these issues without having to put much thought into specifics.
There are other solutions to resolving layout issues with absolutely positioned elements as well; such as providing sufficient margins or padding to ensure content won't be at risk of overlap. As you encounter these issues, pick whichever solution is best for that situation.
Class Name
Target
Details
.absolute-placeholder
*
Required. Apply to a clone or identical element to reserve space in the document flow for an absolutely positioned element
Applies a few basic rules that make an item appear "actionable". In particular, on hover. This is a quick and easy solution for communicating to your users that an item can be interacted with.
Example
Normal Paragraph
Actionable Paragraph
<i class='ns-icon-star action'></i>
Usage
Usage is pretty straightforward, and fairly broadly utilized. Just add the class to virtually any element that doesn't have a default actionable-type state (e.g. buttons are already "actionable").
Class Name
Target
Details
.action
div
Required. Makes the element appear actionable/interactive
A set of shortcut classes for quickly applying standarized borders to elements without having to worry about thickness, color, etc.
Example
Complete borders
Partial Borders
Border rounding
Partial rounding
<div class='border-default'>border-default</div>
Usage
As with many other Global CSS atoms, this class can be applied to virtually any other element or class. So if you need a simple standardized border, this is definitely the way to go. This is a weak selector though, so it may not be able to override other classes.
Keep in mind that these classes are meant only for simple sorts of situations where you want to have a uniform look. If you are trying to create a unique border, it would be better to use styles specified to that case instead of trying to bend these borders significantly to fit the needs of a scenario.
Class Name
Target
Details
.border-default
*
Applies the default border to the entire element
.border-heavy
*
Applies the heavy border to the entire element
.border-secondary
*
Applies the secondary border to the entire element
.border-dashed
*
Applies the dashed border to the entire element
.border-dotted
*
Applies the dotted border to the entire element
.border-radius-default
*
Applies the default border radius to the entire element
.border-radius-button
*
Applies the button border radius to the entire element
.border-radius-circle
*
Applies the circle border radius to the entire element
.border-radius-rounded
*
Applies the rounded border radius to the entire element
-left, -right, -top, -bottom
*
Add these to the end of any border style class to apply it only to that side
Quick access to branding assets and styling options without having to know paths or filenames. This also enables customized branding for sub-projects without much or any rewrite.
Example
<i class='brand-icon'></i>
Usage
Apply the brand-icon class to any element, ideally an 'i' tag, and it will show the NuSkin Logo.
Because of the build process and customizability of Global Styles, you could choose a different logo for your specific project, but be able to re-use code from other projects which references, "brand-icon", and not have to change much or any other code.
Class Name
Target
Details
.brand-icon
i
Required. Shows an SVG of the NuSkin or site logo
.color-brand
.brand-icon
Makes the logo the brand color (this is the default behavior, if unspecified)
Buttons can take on many forms and styles, and the styling for a button can be applied to several element types. Many of the button conventions such as btn-primary can also be applied to inputs.
These icons have been adopted into the the offical set and are unlikely to be removed. While the style of the icon may potentially change, the name should be reliable.
You may also notice that there are aliases for some icons. It is recommended that you use whichever name most closely matches what you are using the icon for. For instance, if it is a close button, use ns-icon-close, instead of ns-icon-x.
General Icons
While we will try to make sure that all icons can be reliably used, just be aware that at some point changes are more possible for the general ones. Whenever the same icon exists in both the official and extended, the ns- prefixed icon is always preferrable.
<i class='ns-icon-check'></i>
Usage
Class Name
Target
Details
.ns-checkbox
input[type='checkbox']
Required. Makes the checkbox acquire custom checkbox styling.
.btn-primary
.ns-checkbox
Used to indicate a primary action. Generally should only be one primary button active at once. Applies the primary color and filled button style.
ns-input can be applied to any element, though it is optimized for input elements. Some input elements currently automatically acquire styling if their type is text, tel, date, search, number, password, or email.
Class Name
Target
Details
.ns-input
*
Required. Makes an element behave like an ns-input
A best practice for modals would be to use an aside and a scrim as shown here. However, the modal class will work on many tags, and a scrim is not required. The modal spec also defines default behavior for standard elements that might appear inside of it.
Class Name
Target
Details
.scrim
*
Creates a transparent fixed full-viewport overlay
.modal
aside
Required. Makes up the actual modal view, with a z-index establishing it above everything else on the page.