bricks_get_global_classes
Overview
Retrieves all global CSS classes defined in the Bricks design system. Returns class names, their CSS settings, selectors (hover, focus, pseudo-elements), and category assignments. Supports search filtering, category filtering, and pagination for large class libraries.
This is the first tool to call when examining an existing design system. Use it to discover which reusable classes are available before building any page sections, so you can assign existing classes to elements instead of writing inline styles.
Key Features
When to Use
When you receive a "Global Class Warning" — see which classes are available
To audit the design system and identify gaps in class coverage
When assigning globalClasses to elements — verify the class name exists
To check class settings before deciding whether to update or create new ones
When NOT to Use
When you need to create new classes — use bricks_create_global_class or bricks_create_classes_batch instead
Parameters
searchstringoptionalcategorystringoptionallimitnumberoptional50offsetnumberoptionalinclude_settingsbooleanoptionalfalseCode Examples
Search for button classes with full settings
Find all classes containing "btn" and inspect their CSS settings and hover selectors.
// List all button-related classes with full settings
bricks_get_global_classes({
search: "btn",
include_settings: true
}){
"classes": [
{
"id": "abc123",
"name": "btn-primary",
"settings": {
"_background": { "color": { "raw": "var(--bricks-color-primary)" } },
"_padding": { "top": "14", "right": "28", "bottom": "14", "left": "28" },
"_border": { "radius": { "top": "8", "right": "8", "bottom": "8", "left": "8" } },
"_typography": { "color": { "hex": "#ffffff" }, "font-weight": "600" }
},
"selectors": [
{
"selector": "&:hover",
"settings": { "_background": { "color": { "hex": "#3451c7" } } }
}
],
"category": "Buttons"
},
{
"id": "def456",
"name": "btn-secondary",
"settings": { ... },
"category": "Buttons"
}
],
"categories": [
{ "id": "cat01", "name": "Buttons" }
],
"total": 5
}List classes by category (lightweight)
Get all classes in the "Cards" category without verbose settings for quick reference.
// List classes in the "Cards" category, lightweight
bricks_get_global_classes({
category: "Cards",
include_settings: false,
limit: 20
}){
"classes": [
{ "id": "ghi789", "name": "card", "category": "Cards" },
{ "id": "jkl012", "name": "card-hover", "category": "Cards" },
{ "id": "mno345", "name": "card-horizontal", "category": "Cards" }
],
"categories": [
{ "id": "cat02", "name": "Cards" }
],
"total": 3
}Common Mistakes
// Building a section without checking existing classes
{ "type": "heading", "settings": {
"text": "Our Services", "tag": "h2",
"_typography": { "font-size": "36px", "font-weight": "600" }
}}// First: bricks_get_global_classes({ search: "heading" })
// Found: heading-section class exists!
{ "type": "heading", "settings": {
"text": "Our Services", "tag": "h2"
}, "globalClasses": ["heading-section"] }// Fetching all 50 classes with full settings just to check names
bricks_get_global_classes({ include_settings: true })// Lightweight listing — only fetch settings when needed
bricks_get_global_classes({ include_settings: false })
// Then for specific class inspection:
bricks_get_global_classes({ search: "btn-primary", include_settings: true })Tips & Warnings
Tip: This tool is essential in Phase 1 of the workflow. Always call it before creating any sections to avoid duplicating existing classes with inline styles.
Warning: The server warns when ANY content element lacks a global class. If you see a « Global Class Warning », stop adding sections and use this tool to discover what classes already exist.
Best practice: A well-designed Bricks site typically has 20-40 global classes covering layout, typography, buttons, cards, and utilities. If you find fewer than 10 classes, the design system is likely incomplete.