Cloudflare brand assets

Overview

This repo contains CSS components, illustrations, and other SVG assets for use on a number of Cloudflare tools and properties, including:

• Cloudflare Developers site
• Cloudflare Workers site
• Cloudflare’s documentation engine
• Cloudflare’s documentation sites (repo), e.g.:
  • Cloudflare Workers docs
  • Cloudflare Stream docs
  • Cloudflare Access docs
  • etc...

CSS

Global CSS

While some of them are not strictly necessary (like the selection color styles, for example), to achieve consistency it’s best to include them all, and in this order:

• box-sizing.css
• element-normalization.css
• sizes-variables.css
• font-variables.css
• brand-color-variables.css
• theme-color-variables.css
• theme-helpers.css
• selection-color.css
• html.css

See this example of including them in a Gatsby site.

CSS Components

Once you have the global CSS included, you’re ready to start pulling in components.

• Components for all Cloudflare Developers sites:

  • AspectRatio
  • Breadcrumbs
  • Button
  • CodeBlock
  • DefinitionList
  • Dropdown
  • ErrorPage
  • Footer
  • InlineCode
  • Link
  • MarkdownLite
  • NetworkMap
  • Number
  • RadioTabs
  • StreamVideo
  • Superscript
  • ThemeToggle
  • Tooltip

• Components for Cloudflare Workers-specific sites:

  • UnorderedListWorkersThemed

• Logos:

  • CloudflareLogo
  • CloudflareWorkersLogo

Helper CSS

There are additional CSS “helpers” that “just work” in most situations when applied to elements by a data attribute.

• desktop-and-mobile-only.css
• is-smooth-scrolling.css
• is-visually-hidden.css
• with-styled-webkit-scrollbars.css

Resources

The resources folder contains favicons and SVGs used across the Cloudflare Developers sites.

Developing

See DEVELOPING.md.