Skip to main content Skip to navigation

Getting Started

The Comet design system offers quick ways for designers and developers to craft experiences cohesively together.

Comet is built to provide a lightweight and basic set of components and templates for web sites and apps. Comet provides an easy-to-implement starting point you can build with, and does not intend to provide solutions to all possible UX needs.

Can't find something you need? Request a style or component, and we’ll build it if it’s applicable across the portfolio. Additionally, you can use helpful smaller patterns and atomic elements as you compose components and pages of your own.

For Designers

Download Comet Design Assets

Sketch Sticker Sheet v1.0

Using Comet

Comet provides designers with a common visual language to facilitate collaboration across product teams. Comet components are high-quality, production-grade, and accessibility-tested.

Designers can browse guidelines on visual style including color, typography, iconography, and space as well as review each fully built component.

  • Comet Sticker Sheet: A Sketch file full of time-saving symbols, standard color swatches, and commonly used components.
  • Comet Tokens: Quick reference for everything from colors to borders to shadows.

For Prototypers

As a prototyper, you can engage with Comet in two ways:

  • Build Comet for Prototypes source code to use nunjucks macro templates and Stylus style definitions.
  • Download compiled Comet CSS to host locally along with markup you copy.

Fork Comet for Prototypes

Build Comet for Prototypes locally by downloading the latest version of the complete repository as a ZIP file or forking the remote repository to create your own isolated project.

Comet for Prototypes includes templates and examples to help prototypers get started.

Comet for Prototypes uses a grunt-based local environment that leverages nunjucks templates and Stylus to style components using tokens. Ask a developer from your team for help with the three technical prerequisites:

  • Access to the Comet and Comet for Prototypes git repositories in Source
  • SSH Keys tied to Source user Account
  • Git, Node, and NPM installed on local machine

See the Comet for Prototypes README for additional instructions:

  • Setting Up a Local Environment
  • Navigating the Code Base
  • The Grunt Build

Your First Page

Starting a Page

Use the sample pages in /pages/ as starting points for your prototype. Add to or modify /pages/ as needed. During the build process, pages are rendered by Nunjucks templates in /templates/ into compiled HTML. Never edit Comet’s /templates/.

  • sample_blank.njk provides a blank slate with just Comet styles and Javascript.
  • sample_shellonly.njk provides the most common context for Discovery Education products: the Comet page shell, global navigation components, and page grid.
  • sample_sink.njk is a kitchen sink demonstrating common combinations of components. Retain this template as a code reference.

Using Components

There are two methods of adding components to pages with Comet: component macros and pasting code snippets.

Component Macros

All Comet components are built using nunjucks macros that you can use within your own environment. All component macros are concatenated into: /src/library/components/comet.njk

Import component macros using this concatenated file with the following import:

{{ import "comet.njk" as comet }}

Once imported, reference a macro directly:

{{ comet.button(variations=["primary"], text="Primary Button") }}

to produce the following result:

<button class="comet-button comet-button--primary">Primary Button</button>
                

Pasting Code Snippets

Once your page refers to these assets, you can begin adding Comet components. Just copy and paste code snippets from the Comet Doc Site to use them in your project.

To add a button, include the following markup (or similarly, refer to the button macro) in your page.

<button class="comet-button comet-button--primary">
    My First Button
</button>
                

Refer to component documentation for additional snippets you can copy and paste directly into a page.

Separate Project Files from Comet Files

Avoid modifying files in /src/library/base/ and existing component files directly. Doing so will inhibit your ability to upgrade when a new version of Comet is released. Instead, consider composing your own extensions to style and components in a separate folder such as /src/library/base/extensions/ and /src/library/components/[my-new-component]/ respectively.

Download Comet

Download the latest Comet CSS, Javascript, fonts, and icon sprite and add references to these files as link and script elements in your page . Include comet.js after jquery.

Download Comet v2.10.0

<link rel="stylesheet" href="/path/to/fonts/comet_fonts.css">
<link rel="stylesheet" href="/path/to/comet.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/comet.js"></script>
                

Your First Page

Starting a Page

Use an example Comet page as a starting point. Update the page <HEAD> as shown above.

Using Components

Copy and paste component code snippets from the Comet Doc Site to use them in your project.

For example, to add a button, include the following markup in your page.

<button class="comet-button comet-button--primary">
    My First Button
</button>
                

For Developers

As a front-end developer, you can engage with Comet in many ways:

  • Build Comet source code to use nunjucks macro templates and Stylus style definitions.
  • Download compiled CSS to host on your product’s server along with markup you copy.

Build Comet

Build Comet locally by downloading the latest version of the complete repository as a ZIP file or cloning the remote repository to your local machine. Comet uses a grunt-based local environment that leverages nunjucks templates and Stylus to style components using tokens.

Using Components

There are two methods of adding components to pages with Comet: pasting code snippets and appending Comet classes to existing components.

Pasting Code Snippets

Once your page refers to these assets, you can begin adding Comet components. Just copy and paste code snippets from the Comet Doc Site to use them in your project.

To add a button, include the following markup (or similarly, refer to the button macro) in your page.

<button class="comet-button comet-button--primary">
    My First Button
</button>
                

Refer to component documentation for additional snippets you can copy and paste directly into a page.

Adding Comet Classes to Your Components

Adjust style the of your component by appending Comet classes.

<button class="my-component-button comet-button comet-button--primary">
    My Component Button
</button>
                

Adding classes to your component will preserve and style it consistently without collision. This technique works best for very simple components, like button.

Separate Project Files from Comet Files

Avoid modifying files in /src/library/base/ and existing component files directly. Doing so will inhibit your ability to upgrade when a new version of Comet is released. Instead, consider composing your own extensions to style and components in a separate folder such as /src/library/base/extensions/ and /src/library/components/[my-new-component]/ respectively.

Download Comet

There are various ways to integrate Comet into your product. Two common approaches are described below: including Comet in your build and referencing compiled assets. The download supports either approach.

Download Comet v2.26.0

Include Comet in a Build Process

Download the latest Comet uncompiled Stylus files to include them in your build process via Node.

Include all Comet styles:

@require comet('2.x/comet.styl');

...or just Comet tokens:

@require comet('2.x/comet_tokens.styl');

Then reference Comet fonts, Javascript, and icon sprite using the instructions below.

Reference Compiled Assets

Download the latest Comet CSS, Javascript, fonts, and icon sprite and add references to these files as link and script elements in your page <HEAD>. Include comet.js after jquery.

<link rel="stylesheet" href="/path/to/fonts/comet_fonts.css">
<link rel="stylesheet" href="/path/to/comet.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/comet.js"></script>
                

Support

Accessibility

All Comet components and visual style guidelines are designed, built, and tested to be accessible.

Browser Support

Comet supports modern browsers, including the latest Chrome and Firefox as well as Safari 6+, iOS 7+, Android 4.4+, and IE11. Components are built to gracefully degrade when possible in older browsers such as IE 10.

Older Browsers & Known Issues

Comet does not support IE versions 10 and prior.

Some simpler components may look fine in unsupported browsers.

  • Grids will not work in IE 9 or below.
  • SVG Icons will only work if svg4everybody is included on the page. We recommend using the version bundled with your version.
Navigation Menu