DEV Community

duendeintemporal
duendeintemporal

Posted on

1

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.

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay