DEV Community


Posted on

A Way To Improve Your Layout Building Process using CSS

Well, Hi.

I don´t have too much time coding, but I find some things that I think improve my daily work, so I want to share it.

One of these things is the fact that you can make, for example: is create two css class say bg_test and bg_test_in that holds different background: properties colors of the background of the hole page and assign it to each container and it's children:

For example make the structure: container or wrapper and it's inside boxes. So the big containers will have de bg_test class(f. e. header, section, a div component container, etc..) and the children of these containers the bg_test_in(f. e. h1, span, p, a inside div, etc...) class. And then you just have to give a width and height property to each element to see how is fixing your layout adjust it to your needs.

Another thing could be, make an estimate of which is the equivalent in pixels of 1 view port width and height(say 13,64px/7,4px per 1vw/1vh) and then convert your units to vw or vh to make it more responsive... In these matter I find that some times is better work only with vw cause is some one resizes the screen only in the horizontal line it will make distortion in your pattern. It's my appreciation at least.

It's pretty simple, but it make my life simple... So I hope it's help you.

Latest comments (0)