Something wonderful is gonna happen!
Intro Root Texts Colors Layout Containers


Specific containers according to the content

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.

Basic Container

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.

Responsive Container

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.

Column Container

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.

Grid Container

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.

Footer Container

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.

Nav Container

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.

Article Container

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.

Section Container

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.

Please note that the be-container, be-article and be-section containers, use the pseudo class :is () which may not be supported by some older browsers.
There are other containers that belong to certain components and therefore it is not necessary to explain here. By using these components, the function of such containers is self-explanatory.
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%.