Define Containers - ariel-fer/Araena GitHub Wiki

Are used to separate content within a single section, as well as limit the width that content can reach.

Unless really required, classes defined for sections cannot be modified unless it is on the properties already defined. If other classes are needed to be defined, it needs to be discussed.

image.png image.png

Following are some conditions for containers:

  • must be a<div>
  • Do not use Webflow Container Element
  • Only spacing can be modified on these classes (margins, padding, max-width)
  • Do not change any other style of the containers: All further styling should be added as a parent or children element
  • Do not add combo classes to containers apart from the ones already built.

When dealing with multiple values for containers, generate classes for their sizes by utilizing previously defined layout variables. For instance, create a class like c-container-s to correspond to the size defined in layout-s. c-container-m must be the default container.

Classes related

Class Description
c-container-s/m/l Used to separate content from the same section. can be used consecutively inside containers. includes a margin-top styling
c-container cc-first combo class for c-container to define the first container that will not include margins, avoiding repetitive margins after the ones added by the Section

Verify containers are displayed correctly

Ensure the correct display of containers by examining them through various methods:

  • Test different combinations of section + container or section + 2 containers to observe their behavior and assess how the layout functions.
  • If you identify multiple layouts that may not correspond to a container in the template but rather to divs on the page to separate content, it is advisable to define them as a type of container.
⚠️ **GitHub.com Fallback** ⚠️