Implement Layout - ariel-fer/Araena GitHub Wiki
[[TOC]]
Sections will be in charge of wrapping content related to each other, by also separating it from other sections with a bigger spacing.
Sections can only contain separation styling like margins and paddings, along with effects like scrolling animation effect (see Classes section). any other type of styling that needs to be applied must be done within another element like a div, inside the Section element.
top and bottom margins defined will not interfere with other sections as both their margins will overlap with each other, avoiding the "repetitive" margins.
These are the main classes to use as sections:
Class | Description |
---|---|
c-section |
unique class to classify a section. only has a top and bottom margin styling. |
Are used to separate content within a single section, as well as limit the width that content can reach.
These are the main classes to use as containers:
Class | Description |
---|---|
c-container |
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 |
Any other type of separation between elements that is required will be resolved using either a grid or a flex-box and applying a gap between the elements. No margins or paddings will be applied.