ciscodevnet / ciscouikit

The Cisco Brand-approved user interface kit. A modern, lightweight, responsive and programmable presentation layer that can be used to style HTML primitive elements and UI-framework independent.

Cisco UI kit

The Cisco UI kit and pattern library is a style guide governing HTML markup at the presentation layer. It contains no javascript components. Instead, it focuses on HTML and CSS and leaves the choice of javascript toolkit up to the individual development teams.

This library is a collaboration between Cisco Brand and Cisco Engineering

Copyright and License

Code and documentation copyright 2019 Cisco Systems.

---

Building the UI Kit

Before you can build the UI Kit you will need to install a few tools.

1. Node - Download the latest (at least 5.11) version for your platform here

2. Git - Download the latest (at least 2.5.x) client here

3. Next install gulp via the node package manager (npm). You may need root access on your box to run this command.

$ npm install --global gulp-cli

NOTE: If you are using Windows 10 make sure to grab gitbash here

4.1 There are several ways to get the source. Create a folder and clone the UI Kit source from Github like this:

$ mkdir cui
$ cd cui
$ git clone https://github.com/CiscoDevNet/CiscoUIKit.git .

NOTE: You will want to work on a feature branch (not master!). To create a feature branch called foo run this:

$ git checkout -b foo origin/master

4.2 Or you can fetch the UI Kit source from Git via NPM like this:

in your package.json file add this line to the dependencies section:

"cisco-ui": "git+https://github.com/CiscoDevNet/CiscoUIKit.git"

or from your command-line run:

npm install git+https://github.com/CiscoDevNet/CiscoUIKit.git --save

4.3 Or you can fetch the UI Kit source from Git via Bower like this:

in your bower.json file add this line to the dependencies section:

"cisco-ui": "https://github.com/CiscoDevNet/CiscoUIKit.git"

4.4 Or you can fetch the UI Kit source from Git via Yarn like this:

From the command-line run:

yarn add git+https://github.com/CiscoDevNet/CiscoUIKit.git

NOTE: We use a common naming syntax like this v.{version}-official

5. Install the node modules

$ npm install

6. Build the UI Kit

$ npm run build

7. Open the UI Kit in your browser. In your browser of choice select File -> Open and choose build/docs/index.html

ciscouikit's Issues

Latest UI kit link not working

Hi,

Below link is not working on readme file. Please provide actual link.
Links
Latest UI kit

Thanks,
Yatin

npm run build, the last step is not working, please see error below

I have installed everything correctly but the last step npm run build doest work, tried with both "su npm run build" and also logged in as root and tried "npm run build". Error is below:

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the sass and node-sass packages are permitted.
For example, in your gulpfile:

var sass = require('gulp-sass')(require('sass'));

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-prep: gulp pre
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build-prep script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-10-21T14_26_43_808Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npm run build-prep && npm run build-docs && npm run build-post
npm ERR! Exit status 1

Missing CiscoSansTT Medium

Missing CiscoSansTT Medium from font list. Can you please update? Thanks

Readme instructions failed

I am unable to have a positive outcome when following the instructions left on the readme.

Fonts are not centered vertically on Linux distributions

The issue both occurs on Firefox/Chrome.

Seems like this fonts are ok: https://gitlab-sjc.cisco.com/cisco-ui/pattern-library/

Distribution CDN, etc.?

Is there a CDN or anything which can be pointed at to retrieve the UI elements?

GitLab cisco-ui/pattern-library vs this repository

What are the differences between cisco-ui/pattern-library and https://github.com/CiscoDevNet/CiscoUIKit? This repository is on version 1.3.4-official vs GitLab's version 2.0.5 which leads me to think this repository is outdated.

README is wrong

Your readme points to an internal gitlab instance and not this github repo.

Consider upgrading kss module to fix audit issues

❯ npm audit

                       === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ handlebars                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.0.0                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
│               │ > kss > handlebars                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/61                              │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ handlebars                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.0.14 <4.1.0 || >=4.1.2                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
│               │ > kss > handlebars                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/755                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ marked                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.2                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ 2a25632e4f8c94ab788e0627f853ce4d58603d32e699bbc013f9e6d28eb… │
│               │ > kss > marked                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/812                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 3 vulnerabilities (1 moderate, 2 high) in 911146 scanned packages
  3 vulnerabilities require manual review. See the full report for details.

Delete the $ ?

When you copy the commands you have the $ in the code.

UI Kit Update

Hello everybody,

I guess the UI kit in this repo is the old Cisco branding! Are there any updates going to be pushed to the repo soon?

Thanks

Task 'pre' is not in your gulpfile

Command npm run build below are the details.

C:\Users\XXX\PycharmProjects\cui\CiscoUIKit>node -v
v18.14.1

C:\Users\XXX\PycharmProjects\cui\CiscoUIKit>npm -v
9.3.1

C:\Users\XXX\PycharmProjects\cui\CiscoUIKit>npm run build

> [email protected] build
> npm run build-prep && npm run build-docs && npm run build-post


> [email protected] build-prep
> gulp pre

[16:22:41] Using gulpfile ~\PycharmProjects\cui\CiscoUIKit\gulpfile.js
[16:22:42] Task 'pre' is not in your gulpfile
[16:22:42] Please check the documentation for proper gulpfile formatting

C:\Users\XXX\PycharmProjects\cui\CiscoUIKit>