Guest

Cisco.com User Experience Guidelines and Standards

Content CSS Developer Kit

Before you begin

Please join the cdc-content-css@cisco.com mailer alias. If you have any questions regarding the CSS or any content within this Developer Kit, please email your questions to the alias.

Benefits for using the Content CSS Developer Kit

  • It allows for centralized styling of content. If you are correctly implementing your pages with this CSS package, you can be sure that your page's content conforms to the UE specifications.
  • Many updates to the UE can be done in the background without asking you to update your code.
  • Take advantage of ongoing UE development to enhance the CUEG & UE

Inside you will find

  • Developer Guide: explaining the use of the CSS.
  • Module Libraries: Code Snippets and examples for properly coded UE Modules
  • Local Development Setup Files: Setup files to allow you to develop pages on your local computer
  • Templates: Content area templates for various content layouts
  • Training Docs & Examples: The files used during the implementation training, exercise files, and module library

Notes regarding the new framework and Content CSS

  • You must use the correct table-column-left, table-column-right, table-column-both for the situation. Incorrect use will result in incorrect vertical grey borders.
  • Case sensitive classes. (Use "item" NOT "Item")
  • Lower case html elements/tags. (<div class="item"> NOT <DIV class="item">
  • Trailing slash on elements without closing tags. i.e.:
    <br /> (not <br>)
    <img src="/your/image/image.jpg" />
    <base href="http://www.cisco.com" />
    <hr />

Download the Developer Kit 

Content CSS Release History

v2.1 (October 3, 2005)


New Features

  • Resizable text for new framework pages (Accessibility)
  • Text and background color changes--grey box and title-bar regions containing forms (Accessibility)
  • New style for nested unordered lists
  • Character support for China, Japan, Korea, Taiwan

Fixes

  • Grey vertical borders and column spacing for root pages
  • Other spacing and margin issues

v2.0 (May 20, 2005)


New Features

  • Accessibility Framework Compatability Changes Spotlight Changes

Fixes

  • Green Button Fixes

v1.4.1 (Bug Fix Release)


Fixes

  • item-no-caret has correct left side margin
  • <th> now has the proper font size (when used with pages using cdc.css)

v1.4 (Mar 31, 2005)


New Features

  • Floating content box (generalized use of the 'download box' from v1.3)
  • Grey and light grey floating box versions
  • Grey and light grey header regions
  • HTML buttons

Fixes

  • Deprecate L4 templates and setup files (use L3 moving forward.)
  • Removed the orange caret, and reduced left margin

v1.3 (Jan 31, 2005)


New Features

  • Navigation Tabs
  • File Icon Download lists (with text file sizes, graphical icons and text file types.)
  • Floating Download lists
  • FAQ styling
  • Suggested "Process Steps" implementation
  • Multiple Floating Container implementation

Fixes

  • Margin underneath teal headers became 10px left and right.

v1.2 (Dec 6, 2004)


New Features

  • Announcements
  • Sidebars
  • End-of-tree pages
  • Items without Carets
  • Illustrations with Diagrams
  • Sub-brand Images
  • Formatted Tables
  • Ordered Lists
  • Paragraph Styles