By clicking “explore”, you agree to cookies and the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.
Once you explore, you opt-in cookies, which can be changed by changing your cookie preferences via the cookie manager modul.
Explore
Build by The Wall.
BRICKS Framework
V1.0

Class Naming

Bricks aims to write clean and easy to read code with meaningful names, that clearly state the classes functionality/purpose. This helps create more maintainable projects that grow organically with the Framework.

Naming Strategy

  • Only use lowercase characters
  • Use dashes (-) between words and underscore to show parent child correlation
  • Only use characters that are also supported by the CSS syntax
  • Refer to sizes and scales with names relative to purpose, for example xxxsmall-xxxlarge, text-size-small, gap-is-medium
Beginner Tip: Take your time and always name classes, while creating them, so that you don't end up wih a div-mess.

Parent Child Class Correlation

Is defined as a phenomenom where multiple elements are correlated between each other in a hierarchical sense.
  • what's after underscores (_) is hierarchically speaking subordinate to what's before an underscore (_)
  • underscores create a hierarchical folder system (in our example studio is the main folder, whereby slider item is a sub folder and the heading is a sub folder to slider_tem)
Examples:
studio_block
studio_slider-wrapper
studio_slider-item
studio_slider-item_heading