Carbon Devtools V10

A basic set of tools for teams building live Carbon pages for Carbon v10.

▶

Carbon Devtools V10 - Design Tool for Carbon Pages

"Carbon Devtools V10" is a Chrome extension designed for designers, developers, and QA teams working with Carbon pages. It features a grid overlay for quick layout checks, tools to identify color, spacing, and typography tokens, and a comprehensive inventory of all Carbon components on live pages. This simple toolset aids in visualizing and understanding how the Carbon Design System is implemented, making collaboration more efficient and effective.

Download

Extension stats

By: Carbon

Users: 1,000+

Rating: 5.00

(1)

Version: 2.8.4 (Last updated: 2024-08-16)

Creation date: 2020-07-22

Risk impact: Low risk impact

Risk likelihood:

Very low risk likelihood

Manifest version: 3

Permissions:

activeTab
storage
scripting

Host permissions:

https://*.mybluemix.net/*
https://*.carbondesignsystem.com/*

Size: 285.70K

Email: ca*****@us.ibm.com

URLs: Privacy policy

Ranking

# 30,200 ▲ 146

Other rankings

#292 in Developer Tools ▲ 1 #109 in component keyword 11 ▼ 9 #114 in grid keyword 25 ▼ 5 #214 in usage keyword 13 ▼ 24

Other platforms

Carbon - SSH Code Editor (v0.2.10)

3.15

(323) 206,046+

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

Carbon Devtools provides designers, developers, and QA teams collaborating to build Carbon pages with a simple toolset. The tool helps visualize Carbon's 2x grid over any live page, and provides basic insights into the usage of components and patterns on a given page to help users understand how the Carbon Design System is being used.

Align to grid Use the grid overlay to lay the 2x and mini unit grids on top of your live page to quickly check its alignment and layout.

Identify tokens Switch between a number of options like color, spacing, and typography to quickly identify Carbon’s usage.

Component list Quickly get an inventory of all the Carbon components being used within a live page.