Add KSS style guide for design components used in Seven theme

Created on 7 March 2015, over 10 years ago
Updated 20 August 2025, about 2 months ago

Problem/Motivation

This is a sibling issue to 🌱 [Meta] Create a visual style guide for the Seven theme Active . If we complete that task, we would need some drupal.org infrastructure to host the new files.

If Drupal core has KSS comments that document how each CSS component is to be used and how it looks, module developers and themers would need a simple way to view the style guide that can be generated from the KSS comments.

Having those people generate the style guide using free tools (a KSS parser and generator) is easy for technically proficient users, but burden-some for others.

Proposed resolution

We should have drupal.org parse the KSS comments inside Drupal core's CSS, generate a static HTML style guide from them, and host the style guide somewhere on api.drupal.org.

Remaining tasks

  1. Agree KSS comments should go into Drupal 8 core CSS files. See 🌱 [Meta] Create a visual style guide for the Seven theme Active
  2. Install Node.js on the build server.
  3. Create a package.json file for the Seven theme's style guide.
    {
      "name": "seven-style-guide",
      "version": "8.0.0",
      "description": "The style guide for the Seven theme.",
      "devDependencies": {
        "kss": "^2.0"
      }
    }
    
  4. Install kss-node into the local directory of the build server using the command npm install
  5. Lock down the specific version of kss-node used on the build server by running npm shrink-wrap --dev and adding the "npm-shrinkwrap.json" to version control.
  6. Generate the style guide with ./node_modules/.bin/kss-node --config style-guide-seven.json (where that json file includes the proper command line options.)
  7. Decide on a URL to access the style guide.

User interface changes

Will add a set of static HTML pages to api.drupal.org that shows off the seven style guide.

Feature request
Status

Closed: outdated

Version

1.0

Component

Code

Created by

🇹🇼Taiwan johnalbin Taipei, Taiwan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇹Italy apaderno Brescia, 🇮🇹

    The Seven theme has been removed from Drupal core; it is now a contributed theme. As such, the task described here is no longer necessary.

Production build 0.71.5 2024