@cloudflare/workers-brand-assets

Cloudflare Developer brand assets

Note about the project name

This project currently lives at @cloudflare/workers-brand-assets (and is published to an NPM package of the same name) as it originally included only the brand assets for Cloudflare Workers. As of version v3.0.0 its use has expanded to beyond that of just Workers, so the project should be renamed to @cloudflare/developer-brand-assets. This is not something that is currently technically possible, so for now, please disregard the “workers”-portion of the name.

Overview

This repo contains CSS components, illustrations, and other SVG assets for use on the ecosystem of Cloudflare Developer sites, including:

• Cloudflare Developers
• Cloudflare Workers
• Documentation sites published using the Cloudflare Docs engine
  • Cloudflare Workers docs

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.