Do you have a set system for web design?

Question

I've been building websites since the mid 90s. After I learned about html and got comfortable with it, I set up a pretty simple system for design. I'd create my artwork, then center my header graphic. Below my header graphic I'd put everything in a table. Navigation either across the top beneath the header graphic or to the left or right of the table. I filled in the other table cells with the content. For the most part, using this system I could generally set up a page in a few minutes. The pages loaded quickly, and looked good.

Recently, with all the new developments in HTML and CSS, building websites like this just isn't practical. Although my customers have been happy, I feel I should be giving them more. It's time to update my code-base.

Do you have a system for your CSS design? What used to take me 5 minutes to get setup, now turns into an hour or more getting div's lined up, and formatting my page. Then after the site is created I spend another hour or so making it responsive to different viewports.

Is this just how it's done now? Is there a simple system that helps to save time that I don't know about? I feel like I spend more time positioning elements and blocks now then I do designing.

Answer 1

I usually follow my basic setup too.
I always have the same values for universal selector
margin, padding, font-family, font-size and box-sizing

navbar with a inline list. List must have font-size 0px to remove the gap between the elements.

Usually I have just one or two breaking points
768px for mobile and above for desktop
If I have a centered container like sololearn do, I usually use 1100px for it.

Always use line-height instead of padding so that you always know the exact height without calculating the padding and font-size

But there's always an escape. Lazy option for unskilled front-end developers ... the bootstrap.