Weights & Styles
NetApp's LUCI uses many weights and styles of the Gotham typeface. In addition to the base library CSS you'll need to reference cloud.typography.com to add the fonts themselves to your page:
Weights and Styles
|Gotham Extra Light||
|Gotham Extra Light Italic||
|Gotham Light Italic||
|Gotham Bold Italic||
|Gotham Narrow Book||
|Gotham Narrow Book Italic||
Please use the following guidelines for responsive sizing of different font stacks in LUCI.
|LUCI||< 420||421 TO 768||769 +||FONT NAME/WEIGHT|
|38px||42px||48px||Gotham Extra Light/200|
|32px/38px||36px/42px||40px/48px||Gotham Extra Light/200|
Utility icons such as search, arrows, social sharing, etc. use the Font Awesome library, located here: http://www.font-awesome.io/icons.
To reference any of the icons use the following code snippet (replace "arrow-down" with the name of the icon you need to use):
The JS library, svg4everybody, is used to enable external SVG references in IE 9-11.
Layout & Spacing
LUCI embeds spacing systematically into header and footer, block components, and long-form text and form displays so you can assemble pages beautifully spaced by default. Vertical spacing is sparingly applied otherwise, left to designers and developers to fine-tune layouts themselves if needed.
LUCI declares a single-direction margin system using the bottom-margin to vertically space most components. The /netapp-library/src/scss/utils/_variables.scss derives the primary $spacing unit for the margin from default line-height.
Header & Footer Spacing
The Header and Footer each incorporate no vertical spacing to separate them from page content. Instead, page content should be contained in a div.n-page-content page shell to include all remaining grids and layouts with content components.
Page Hero Components
A component like the Hero component is an exception, being included between the header and the page shell elements, and should also exclude spacing to separate it from page content.
Spacing Across Components
All block-level components embed $spacing-component-bottom bottom margin by default, including page title area, content metadata, messaging, pagination, and sort.
Spacing Within Components
Components that include a list of objects (such as breadcrumbs, content actions, feedback, and icon legend) may wrap to a new line depending on content. In such cases, apply $spacing-sm bottom margin to each list item paired with $spacing-component-bottom - $spacing-sm bottom margin to the overall component to space both items wrapping within the component as well as across to the subsequent component below.
Long-Form Text & Forms
When including long-form text (such as an article with images, support document, or product description), add the .n-text-longform class to the containing element to properly space base elements like H1, H2, H3, P, UL, OL, and DL.
Similarly, add .n-form to a form’s container to properly space form labels and controls.
Grids & Breakpoints
The NetApp LUCI grid extends the Susy framework to provide a row-based, 12-column layout system at each of four major breakpoints:
These major breakpoints are encoded in /netapp-library/src/scss/utils/variables.scss:
|420px||$screen-sm||(420px / $font-size-default) * 1em;|
|768px||$screen-mg||(420px / $font-size-default) * 1em;|
|1024px||$screen-lg||(1024px / $font-size-default) * 1em;|
|1394px||$screen-xl||(1394px / $font-size-default) * 1em;|
Container, Row & Column Elements
The system lays out each column, in order, per each row enclosed in a container element.
In the following example, the first column is stacked on top of the second breakpoint for viewport widths up to 767px, after which the first column is 75% wide and positioned to the left of the second column of 25% width.
Multiple Breakpoints Per Element
Classes can be applied to control column widths for multiple breakpoints, such as the -md and -lg employed in this example.
Using Breakpoints in (S)CSS
When extending the library to suit your product's needs, you can add custom breakpoints to your design.
This first example from the Footer component illustrates using a major breakpoint's variable to define custom, proportional element widths:
In this section example, a non-major breakpoint width is used to build a custom rule.