Acquia Design System

A toolbox for designers and developers to build high-quality, harmonious interfaces across our suite of products

A centralized library of base components is an important step in the goal to unify the look and feel of our products across the company. Each component provided by this library has been vetted by the UX and Engineering teams and serves as a common place where those components are documented. This project aims to be easy to use and contribute to, and changes can be reflected across the products using this library.

If you have questions, please ask them in #dxp-web.

Download the repository to contribute to the project:


                git clone git@github.com:acquia/dxp-web-ds.git

Install the dependencies:


                npm install

Start the development server:


                npm start

Compile the assets:


                npm run build

Copy the following assets to your project and include in your html:


                ./dist/assets/fonts/ads-icons/fonts/*

                ./dist/assets/fonts/ads-icons/ads-icons.css

                ./dist/assets/css/theme.min.css?v11.2.0

                ./dist/assets/css/theme-dark.min.css

Optionally copy the following javascript assets to your project and include in your html:


                ./node_modules/jquery/dist/jquery.min.js

                ./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js

To use Acquia Design System in your node project:


                npm install github:acquia/dxp-web-ds

Include the design system in your project using sass:


                @import "~dxp-web-ds/src/scss/theme.scss";

Add interactive functionality using existing bootstrap libraries:


                // React

                npm install react-bootstrap bootstrap


                // Angular

                npm install @ng-bootstrap/ng-bootstrap bootstrap


                // Vue

                npm install vue bootstrap-vue bootstrap

Note You must have access to the Acquia Github organization for this to work.

Acquia's style sheet uses Proxima Nova as its primary font family. You will need to manually include Proxima Nova using Typekit by adding one of the following embed code snippets near the top of the <head> element of your site. It is recommended that you use the advanced embed code, since it is non-blocking and will load the font asynchronously using JavaScript. See Typekit's documention on embed codes for more information.


                  <link rel="stylesheet" href="https://use.typekit.net/pey8xam.css">


                  <style>

                    @import url("https://use.typekit.net/pey8xam.css");

                  </style>


                  <script>
          (function (d) {
            var config = {
              kitId: 'pey8xam',
              scriptTimeout: 3000,
              async: true
            },
              h = d.documentElement, t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive"; }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0], a; h.className += " wf-loading"; tk.src = 'https://use.typekit.net/' + config.kitId + '.js'; tk.async = true; tk.onload = tk.onreadystatechange = function () { a = this.readyState; if (f || a && a != "complete" && a != "loaded") return; f = true; clearTimeout(t); try { Typekit.load(config) } catch (e) { } }; s.parentNode.insertBefore(tk, s)
          })(document);
        </script>

Note Acquia's Typekit Kit ID pey8xam can only be used with Acquia sites and products on registered domains such as *.acquia.com.

Gulp is used to manage DXP Design System development. Open your command line to the root directory of the theme to use the following commands:

gulp: Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file.
gulp build: Generates a /dist directory with all the production files.

The gulp-file-include package is used to make partials easier to use for initial development. For DXP Design System, we only use it for a handful of components that are found on most pages. The following partials are available:

head.html
- @@title (string) - Parameter for the page title
sidebar.html
- @@category (string) - Parameter for which category of the sidebar should be open.
- @@subcategory (string) - Parameter for which subcategory of the sidebar should be open.
- @@page (string) - Parameter for which page of the sidebar should be given an active state.
- @@user (boolean) - Parameter to determine if the footer containing search, the user, and notifications should be rendered.
sidebar-sm.html
- @@category (string) - Parameter for which category of the sidebar should be given an active state.
- @@subcategory (string) - Parameter for which subcategory of the sidebar should be given an active state.
- @@page (string) - Parameter for which page of the sidebar should be given an active state.
topnav.html
- @@category (string) - Parameter for which category of the topnav should be given an active state.
- @@subcategory (string) - Parameter for which subcategory of the topnav should be given an active state.
- @@page (string) - Parameter for which page of the topnav should be given an active state.
topbar.html
script.html

Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword.

Please read the official package documentation for more info.

You can easily customize the layout and color scheme of your theme by modifying the content of the config.js file located in the root folder. The config is only used by Gulp to decide what to include during compilation. The config object properties accept the following values:

Title	Type	Options	Description
`demoMode`	Boolean	true \| false	Whether you want to enable users toggle layout options. This will also enable the config modal and its toggler button.
`colorScheme`	String	"light" \| "dark"	The default color scheme. Works with `demoMode` set to `false`.
`navPosition`	String	"sidenav" \| "topnav" \| "combo"	The default navigation positioning. Works with `demoMode` set to `false`.
`navColor`	String	"default" \| "vibrant"	The default navigation styling. Works with `demoMode` set to `false`.
`sidebarSize`	String	"base" \| "small"	The default sidebar size. Works with `demoMode` set to `false`.

Heads up! Modifying config.js requires you to restart any of the currently active Gulp tasks.

Acquia Design System

Documentation

Introduction

Installation

Usage

Usage (Node & SCSS)

Typography

Compiling

Gulp File Includes

Configuration