The holy trinity of the CSS

Now that I finished with HTML, I started to add some subtle design to the "skeleton" of my web page. This article is not going to be about the colour-pickers or background design but more about the concept of CSS.

I tried to summarise the three main CSS concepts (Box model, Flexbox and Grid), to understand the approach to CSS. Additionally, I will present the layout of the web page what we can use with the combination of these 3 CSS models so that we could position the content.

CSS Box model

The box model is essential for web page design. It represents that the content is not just a line or phrase on our page, but that it also has some "hidden" elements.

If I write a paragraph "CSS box model is the fundamental of design" it will appear as a line of sentence, but it is built up from different boxes, as in the following picture:

(https://seenthis.net/messages/759834)

We have to examine the model from the inside out.

The first box (represented by orange) is our content, and it doesn't need any further explanation. 😊

The second box is the padding. It defines the space between the content and the border. We could add some properties to a content's border to make it look better. With these properties, we could define the empty space between the content and the border. The value would determine the distance of the content from the sides.

There are two options to define this distance, and both will result in the same design.

The first and "longer" version will clearly define each value:

p {
  padding-top: 15px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 10px;
}

The second version is shorter, it represents the values clockwise, starting from the top:

p {
  padding: 15px 10px 15px 10px;
}

In padding, we could define width as well.

With the next "box layer" we could design the border of the content. This is the thin line between padding and margin (represented as dark blue in the figure above).

The border of the element is invisible by default, but we could make it any colour or change the design, like for a red dotted line, or a blue border, just on the top of our content.

By defining more precisely which border we would like to design, we could design in more detail, where we could change each side of the border differently.

For example, the following will result in a dotted, red, slightly rounded border, but with solid style on the sides.

See the Pen KKwjObg by Balázs Kemenesi (@KemenesiB) on CodePen.

The last in the box model is the margin. In the aspect of positioning, it works just like padding, but it defines the distance between the elements.

By setting the margin property to auto, it will position the element horizontally to the centre of the page. We could also add the margin value to "inherit" an element so that it would inherit the value from the parent element.

Example?

Flexbox

The CSS Flexbox is an excellent replacement of Floats (with Floats you can place the element on the right or the left side of the container, so the text will wrap it.). With flexbox, we can define the layout more naturally, not just horizontally, but with total control over our web page layout. Flexbox defines the content in containers and lays down different positioning, resizing solutions and these containers include the actual content, the "flex item".

To use the flexbox layout, we have to add the following to our code:

.mainmenu {
  display: flex;
}

After this, we could start to design our layout. The four main properties, that we could adjust are:

• Alignment

Justify-content to positioning, grouping, stretching the flex containers. Align-items to the positioning of our flex items inside the container. Align-self to align items individually

• Wrapping

Flex-wrap gives us more control over our flex items, and it prevents a slip in the content, it creates an "invisible grid."

• Order

Flex-direction orders the containers vertically or horizontally (reverse also) only by a single line of code, order to swap the element.

• Size

Flex defines the width of individual items in a container. It defines with numbers that scale the size to other elements.

CSS Grid

The grid system also helps with the layout and positioning of our content. Unsurprisingly it creates a hypothetical grid on our webpage so that we can place our content into this transparent container. Think of this as having a table in the background.

Just with Flexbox, we have to define what we are using the Grid model, like so:

p {
  display: grid;
}

A grid is a table, it has columns (vertical lines) and rows (horizontal lines), but it has gaps between the rows and columns, that we can adjust. For adjustment of the size of our grid, we have to define the number of rows and columns, like in the example where we want four rows and four columns (so we add four different value).

p {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rowss: auto auto auto auto;
}

(https://kipalog.com/posts/CSS-Grid-module-layout--items--Phan-2)

These lines are functioning as a map when we are positioning an element.

Just after we have "mapped" the wished position, we have to give this information to place the items.

There are different ways to position an element (previously defined positions). Still, the most precise is the positioning by giving the start/end lines, according to this order: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at:

button1 {
  grid-area: 3/2/3/4;
}

It will position our element between the 2nd column line and the 4th column line, limited between the 3rd and 4th horizontal lines.

Conclusion

Though the methods mentioned above describe only the positioning, it should be the first step by designing of the page, because otherwise, the page would just look like a simple document where everything is ordered below each other.

In the beginning, it helped me a lot with positioning to plan everything on a blank paper with a pen, so it is easier to visualise our design and positioning.

Once the positioning is complete, we could start working on the rest of the design: colours, animations and many other tricks that can make the page catch one's eye.