Layout

Breakpoint:

Beet set the breakpoint for screen responsive design in 3 categories according to phone, tablet and desktop screen size

breakpoint sizes:

size value
sm: 550px
md: 750px
lg: 990px

layout & visibility class:

class description
.max-width-center Center element at max width of the screen
.container, ul container with flex row wrap display with 6 columns
.container-[size:s|m|l] The 3 size set of container with different padding size
.button-[ : s | m | l ] The 3 size set of button
.hide hide element and eliminating the empty space
.show show element

Layout method 1: Flexbox responsive grid using Calc and box model

Use tag such as 'header', 'main', 'aside', 'sidebar' to declare the column & span of the layout. The advantage of the layout is that values of the columns, width(span), gap and flexbasis can be easily changed for each tag element.

CSS Calc Formula for the layout

header, main, aside, sidebar {
--columns: 6;
--width: 6;
--initialbasis: calc(var(--width) / var(--columns) * 100%);
--gap: calc((var(--columns) - var(--width)) * 0.05%);
flex-basis: calc(var(--initialbasis) - var(--gap));
}

Change the layout by changing value of following elements

CSS Variable Description value
--columns Preset by default to be 6 columns 6
--width It’s the span of each column 1-6
--initial basis It’s the result of width/span dividing the columns in % x %
gap percentage
(preset: 0.05%)		 Gap between the columns in % 0 - x %
Flex-basis It’s the actual width of the columns without the gap 0 - x %

Layout method 2: Grid column & row

beet-grid template is set to have 6 columns and n number of rows, the grid direction is row, and it use class such as .col-1 to .col-6 to determinate the span of the columns or use .col-1-3 to determinate column that starts on column 1 and ends before column 3.

Grid class:

Class Description Value
.beet-grid 6 columns, x row
.col-[Span: 1-6] The span of columns 1 - 6
.col-[Start Col:1-6]-[End Col:1-7] To determinate where Columns start and end spanning 1 - 7
.col-gap-[size:zero|s|m|l|xl] The gap between columns 0 - 1 or customize
.row-gap-[size:zero|s|m|l|xl] The row between columns 0 - 1 or customize

Size, Padding & Margin

Padding and Margin are set to be only horizontal, but user can customize the value of the vertical Paggind and Margin value.

space class:

Class Description Value
.padding-[size:zero|xs-xl] Padding is set to be horizontal ONLY, vertical padding is customable 0 - 2rem
.margin-[size:zero|xs-xl] Margin is set to be horizontal ONLY, vertical padding is customable 0 - 2rem

Height: text & container

Height class:

Class Description Value
.base-line-height The base line height for text 1.5rem
.small-line-height The small line height for text 1.3rem
.large-line-height The small line height for text 2.5rem
.height-[size:s-xxl] 5 size set of height for container 1.5rem - 8.5rem

Typography

Typography class:

Class Description
.multipliers-[scale: 1.200|1.125|1.414] The typography scales variation from minor-third for laptop, major-second for tablet and phone augmented-fourth
.align-[alignment=left|right|center|justify] Text alignement

Columns

Column are set to different width and it’s preset to be 100% wide when passing the breakpoint of small screen

Columns class:

Class Description
.column Set to float to left with 10px of padding
.column.side Column with 25% of width
.column.middle Column with 50% of width
.column.wide Column with 65% of width
.column.even Column with 30% of width