Style Guide

Welcome to the NC.gov style guide, the best resource for folks interested in writing code for NC.gov. We have a living style guide that documents both markup and appearance. This guide serves as a resource to bring together all our brands and to help define their visual and stylistic elements.

Table of Contents

Branding

Features and characteristics that identifies distinct appearances of the organization(s). Branding includes logo, color, typography, iconography, and more.

Layouts

Structural compositions that the system can use to build out web pages. These compositions will be explained further as they relate to various devices and resolutions.

Elements

Core, common elements that are the building blocks for components. Elements are typically self-contained and cannot be broken down further.

Components

Modular, complex building blocks that incorporates multiple elements. Components may also contain additional logic and/or interactions.

For Developers

The style guide is built using Knyle Style Sheets. KSS focuses on how people work with CSS — it does not define code structures, naming conventions, or methods for abstraction. It is important to understand that the styleguide format and documentation format are intrinsically tied to one another.

Because we use CSS preprocessors, the following format is used as a guideline when creating or modifying KSS documentation:

// A button suitable for giving stars to someone.
                //
                // :hover             - Subtle hover highlight.
                // .stars-given       - A highlight indicating you've already given a star.
                // .stars-given:hover - Subtle hover highlight on top of stars-given styling.
                // .disabled          - Dims the button to indicate it cannot be used.
                //
                // Styleguide 2.1.3.
                a.button.star{
                  ...
                  &.star-given{
                    ...
                  }
                  &.disabled{
                    ...
                  }
              }

All documentation comments can be found throughout the various SCSS partials for the project.

It is strongly recommended to constantly document any development that involves UI elements of any sort.