In beCSS there are multiple containers and each one has its specific function.
You do not have to put the items necessarily inside a specific container. You can use the Html pre-determined labels. However, for the proper functioning of the beCSS features, it is appropriate to use a specific container in accordance with the elements inside it.
be-container: It is the general container designed to group all kinds of content. It has a .5px padding on each side. Heading and paragraphs have an inherited velue. Images are responsive but have their actual size as a limit. It has no flex property. Also include the --padding: variable for override.
be-container-responsive: It is basically the same as the basic container but the images acquire the maximum possible size according to the container. It has no flex property.
be-column-container: It is the container for columns based on the CSS Flexbox Module. It has a Flex property, the columns align next to each other. Images are not responsive. Paragraphs and divs are not aligned.
be-grid-container-* * = 1 to 12 : It is the container for columns based on the CSS Grid Layout Module. The columns occupy the indicated place and the images are responsive. They are actually a set of 12 grid column containers.
be-footer: It is the container for the footer. It must be inside the footer tag. By default it comes with the dark color indicated in the: root with the variable --dark-dark.
be-nav: It is a navigation container that can be used for menu, pagination and other elements. The lists are stylish and are presented in line. The default text color is the one corresponding to the --brand-color variable. It is recommended that it be included on the nav opening label.
be-article: Adds margins up and down to 1.5em, and also adds a .7em up and 1.2em down all paragraphs. Please remenber that must be include within the "article" tag.
be-section: It does the same function as the html tag but adds 2.5em of margin up and down, and set padding to 0. Please remenber that must be include within the "section" tag.
Selector | Value | Comment |
---|---|---|
.be-article | margin: 1.5em 0 | Suitable to contain paragraphs with headings. The "p" tag has margin of .7em 0 1.2em 0. |
section | padding: 1.2em margin: 0 |
The normal label with a little more padding. |
.be-section | margin: 2.5em 0 padding: 0 |
Suitable for grouping more diverse content. |
.be-container | padding: 0 5px | Images are width 100%. |