How to accomplish what bootstrap grid system does with it's “.col-xs-”

[WiseOldMan]

Hi, I am looking to build a website in custom CSS and without frameworks just to increase my command over CSS. I want my entire site to retain its layout and look no matter what the device. Foundation does it with it's "smallgrid" and bootstrap with ".col-xs-". How do I do that without a framework?

[DrDoc]

Welcome to WebmasterWorld!

Just so I understand you correctly -- you want your site to retain its layout (presumably with as much consistency as possible) whether the device is landscape/portrait, regardless of width, height, or useragent?

[WiseOldMan]

thats correct.

[swa66]

While I've no clue what "Foundation", "smallgrid", bootstrap with ".col-xs-" etc mean.

If you want all (modern) devices and browsers to show the same, then that's the easy part in CSS ;-)
Making a different layout for smaller devices (i.e. the smart thing to do nowadays!) is actually a bit (not that much) more work.

[DrDoc]

... but making it retain its layout (presuming you mean: look exactly the same) is not only a bad idea, it's impossible.

Sites should look like they are designed for the medium used to view them. That means vastly different layout, look, content, and functionality between viewing on a smartphone and using an Ultra-HD monitor.