title: Component Library collection:

• index
• home permalink: false

NAME

The NAME UI Component Library provides plug-and-play design and code to help you set a new bar for simplicity and consistency across your sites.

The Library consists of semantic and accessible markup for a variety of components that can be paired with a theme to quickly give components a consistent look.

Getting Started

For Developers

For Designers

The Components

The Themes

For Developers

NAME components are built on a semantic and accessible markup foundation, to work with all modern browsers (IE 10, Chrome, Firefox, Safari).

Installation

Here are a few ways to use the NAME in your projects.

Download

...

Install with NPM

If you have node installed on your machine, you can use npm to install NAME.

...

Need Installation Help

Do you have questions or need help with setup? Did you run into any weird errors while following these instructions? Feel free to open an issue here:

https://github.com/unumux/components/issues

CSS Architecture

So you need to make a new component

Customization/Themeing

Recommended Project CSS/SCSS Directory Structure

We recommend that for your project component styling, you use a directory pattern similiar to that of the NAME Library. With a couple of changes to house code that overrides theme and/or component styling

.
├── /styles
├──── /components
├──────── _index.scss (Imports _index.scss from each component folder))
├──────── /my-new-component
|           _index.scss (Imports my-new-component partials)
|           _my-new-component.scss (Base styles for new component block)
|           _sub-element-1.scss (Styles for a specific sub-element of the new component block)
|           _sub-element-2.scss (Styles for a specific sub-element of the new component block)
├──────── /primary-nav
|           _index.scss (Imports primary-nav partials)
|           _list.scss (Styles for the list sub-element of the primary nav block)
|           _primary-nav.scss (Base styles for primary nav block)
├──── /theme-overrides
|       _color-variables.scss (Used to override color variables from Theme)
|       _font-variables.scss (Used to override font variable from Theme)
|       _index.scss (Imports theme-override partials)
|       _sizing-variables.scss (Used to override padding, margin, border, etc. variables from Theme)
├── _site.scss (Imports _index.scss files from components and theme-overrides folders (plus any additional folders you have))

Main Variables That Can Be Overridden

Where Things Live

• HTML
• SCSS / Compiled CSS
• Fonts
• Images

Including in a Project

If you downloaded the source code you can include the CSS file in your project and reference it in your index.html file.

If you installed via NPM and are using SCSS you can include NAME and a theme in your project's primary SCSS file like so:

// Standard way to include a theme and *NAME* in a project
// _site.scss or _index.scss
@import "theme-themeName"
@import "*NAME* Component Library"

// Include a theme, *Name*, and override files in a project
// _site.scss or _index.scss
@import "theme-themeName"
@import Theme Variable Override Files
@import "*NAME* Component Library"
@import Component Override Files

FAQs

• I need a component that is not in the library
• I installed the library and added a component to my HTML but it doesn't look right
• How do I change some of the default styles of a component

For Designers

Components

• Navigation

  • Primary Navigation
  • Secondary Navigation
  • Footer Navigation
  • Breadcrumbs
  • Skip Link

• Inputs / Controls

  • Button
  • Button with Icon

• Special Messaging

  • Dialog
  • Modal
  • Global Alerts
  • Inline Alerts

• Containers

  • Page Header
  • Page Content
  • Page Footer
  • Banner
  • Summary
  • Grid Block
  • Table
  • Logo Link

Available Themes

• High Contrast
  • Open Sans Fonts (enterprise)

Contributing

Found an issue of have an idea for enhancement? Open an issue.

Want to add code? Contribute