16 The ‘New’ Left Top Bar(s) Explained

Enhanced Top Bar Right

Enhanced Left Top Bar

Bricks Builder has multiple sections in the Top Bar, which we will handle one by one. Let’s start on the left with the Enhanced Top Left Bar. We’ll see a number of new icons/buttons.

  1. Pseudo States: :hover, :active, :focus, :before, :after
  2. Grid guides (ctrl+cmd+i)
  3. X-mode (ctrl+cmd+j)
  4. Contrast Checker (ctrl+cmd+k)
  5. Dark Mode (ctrl+cmd+z)
  6. Class Manager (AT version 1.3)
  7. Advanced CSS (ctrl+cmd+l)

Element Bar (Left Panel)

The Top Bar of the individual Elements Panel is also enhanced with shortcuts. In this case, it is a Section, which is a parent element. The meaning of the icons can be found below. Some have a link to a broader explanation.

  1. Extend Classes & Styles
  2. Find and Replace Styles
  3. :Hover
  4. :Before
  5. :After
  6. :Active
  7. :Focus

Child Element Top Bar Left Panel

When we change to a child element an extra icon is added, “Go to Parent Element”.