Skip to content

Latest commit

 

History

History
110 lines (76 loc) · 3.2 KB

css.md

File metadata and controls

110 lines (76 loc) · 3.2 KB
Raw

GitLab UI CSS

GitLab UI provides component styles, a utility-class library and SCSS utilities.

Quick Start

To include GitLab UI base styles in your project, simple import the @gitlab/ui main css file:

@import '@gitlab/ui/dist/index.css';

This provides component styles and utility classes.

Usage with a SCSS preprocessor

If you use a SCSS preprocessor, you may include the base SCSS file instead of index.css:

@import '@gitlab/ui/src/scss/gitlab_ui';

In addition to component styling and utility classes, this provides various functions, variables and mixins.

Overriding variables

Variables are imported as part of the base SCSS file.

To use a variable without including GitLab UI components’ styles, import the variable file and its functions directly:

@import '@gitlab/ui/src/scss/functions';
@import '@gitlab/ui/src/scss/variables';

.my-class {
  color: $theme-indigo-200;
}

To view a complete list of variables, see variables.scss.

Utilities

GitLab utility classes and mixins are based on GitLab's design system guidelines.

Utility class specifity

GitLab UI utility classes are not marked as !important by default. If you have to use a utility class to overwrite CSS with high specificity, we provide !important versions of every utility class. Those alternatives are suffixed with !, for example: gl-display-flex vs gl-display-flex!.

Utility classes CSS bundle

To include all utility classes without including GitLab UI components’ styles, import the base utilities.scss file and its dependencies:

@import '@gitlab/ui/src/scss/functions';
@import '@gitlab/ui/src/scss/variables';
@import '@gitlab/ui/src/scss/utility-mixins/index';
@import '@gitlab/ui/src/scss/utilities';

Note: This is a generated file that includes all utility mixins as classes. To see this file in a local copy of GitLab UI, first generate it with the yarn generate-utilities script.

Utility mixins

Utility mixins are included as part of the base SCSS file.

To use a utility mixin without including GitLab UI components’ styles, import the mixin file and its dependencies directly:

@import '@gitlab/ui/src/scss/functions';
@import '@gitlab/ui/src/scss/variables';
@import '@gitlab/ui/src/scss/utility-mixins/border'

.border {
  @include gl-border-solid;
  @include gl-border-gray-200;
  @include gl-border-1;
  @include gl-border-rounded-base;
}

See utility-mixins/index.scss for a complete list of utility mixins available.

You may include all mixins by using the following imports:

@import '@gitlab/ui/src/scss/functions';
@import '@gitlab/ui/src/scss/variables';
@import '@gitlab/ui/src/scss/utility-mixins/index'

Theming

Some components' styles can be adjusted to match the current theme. This is best done using CSS custom properties. Creating an explicit theme prop is deprecated.

For now, --gl-theme-accent is the only theme-related CSS custom property in use (see GlTabs). See this epic for more details.