Figuring out the measurements for your site layout
When deciding on a site layout, what decisions help you decide on what units to use like pixels vs percentages vs viewport vs... etc. Just curious because I'd like to build a simple layout as place holders but I get stuck on what units to use in what situation and positioning elements where I want them. I can get a very basic layout on paper and using background colored attributes but get stuck on units to use. Hope to get some great feedback 🙂
80 Replies
The less you define the better. Please avoid ViewPort units when starting out, because they are not some magic responsive unit like some think lol
Try for Intrinsic designs/layout that don't rely too much on constraints of unit values.
what units are best to get started with?
I'm hoping to get to responsive
The ones you don't define, for layout let your content determine size.
The less you define widths/heights the more responsive it is.
when you do use min/max to help. I still use pixels depending on device/need. Rem will help you base off the root font size if you need it to change when user/os changes it.
what about em?
Otherwise try to use %'s or again nothing at all.
this is my designs for that project I was working on
I don't really use em much. It cascades oddly. I have gotten in the habit of using them for media queries but thats really it.
rem a better choice?
Always "it depends"
Understanding what it does and how it works is more important cause its based on root font size
So if I wanted it to change with the root font then I would use it.
if not I'd use px
No overall "use this unit always" kinda thing
messing around with this is helping some
Rather "stay away from viewPort units" they broken (jp but they have caveats and might not be what you think they are, best to learn why/when to use them) Def don't use them like I see lots of people setting w/h all the time.
>.>;;
im doing grid and flex examples
here it is mobile
right on 😄
granted the examples are giving you units but im not sure when I make own how to break these things up. I think once I grasp that and positioning, the rest will get easier
side note we are getting better viewport units soon, and chrome now lets you tell overlay (keyboard/bars) to not change veiwport
im just dumb 😄
oh really
they say viewport is easy to work with
who is they?
cause "they" don't do enough testing lol
web site articles from devs like devs.to
css tricks
link me?
I just see lots of mistakes from begineers trying to use Viewport vh/vw not even vmin/max really poorly. When what they really want is %
its the actual viewport too so on mobile it causes lots of headaches, and ignores scrollbars
Medium
CSS Units: Which Ones To Use And Avoid
An explanation on CSS units with examples to get you going
I mean that explains it well but I don't see them saying use them all over. Or that they are "easy".
very specific use case even, as a break out unit. (which is a legit use for viewport units)
hmm true
😉
what helps you breaking down a layout into where you want to place things and getting it to work right?
grid/flex, again the less you define widths/heights the better (most the time) for responsive layouts.
some friends suggested I use grid for the pictures layout on my voting app
as they said "perfect" example of needing grid
i keep messing with it but cant get it how I want it
yeah my goal is responsive layouts
like I still get confused on position absolute and relative when to use which
Are you familiar with Figma? It might be easier to use that for your initial designs rather than pen/paper
ive seen it just dont think its free but I heard it does a really good job
I wireframe on paper, then goto figma (yes its free.... for now )
I just use excalidraw
I used to use dreamweaver or illustrator in the early days
It’s free at the moment, you can check it out
they got 3 figma and 3 figjam files for free
how does figma help with the css?
You can make unlimited drafts on the free plan which is all you need it for
does it help with the css?
It’s just for making quick designs without having to write code. It does make the css easier when you get there though because you are just recreating what you already designed so you focus on the code without distraction
ah did you see my png of layouts form excali?
*from
granted I can make anything as fancy as figma
Yes hehe, that’s why I suggested figma. 🙂
yeah im terrible at design
Err wrong link
lately my memory getting rough with trying to remember all this css stuff and react and then keeping up with what I already know and trying to handle family's stuff lol
Joy Of Code
Design For Developers
Learn enough visual design to be dangerous with actual tips instead of theory.
oh is it important to always have
Its more important to understand why, but yea most the time you want it. Learn about CSS box model in general
thanks! 🙂
I remember we had to have css reset stuff
guessing that's one
A bit late to the convo, but here's my 2¢:
• Font size should use
rem b/c it respects the user's chosen base font size (and em gets wonky if you nest it)
• If you do a variable font size (using clamp() the first and third number should always be in rem, the middle number needs rem + viewport unit
• Padding/margin should be in em, because larger font size needs more breathing room
• The content should decide the width/height, but if the main content is text, a good max width is 60ch, since ch is the width of the 0 character of the current font face and size (and ~66 characters per line is often cited as the "ideal" line length)
• Borders and border radius can be in px, since it's all display and not actually relavent to the overall point of the page
• Media queries should be in rem or em b/c you should be changing layout based on content, and content is usually determined by font size
Of course this is a bit of a simplification, but a good starting point. And with everything, once you know the why of the rules can you start to break them with purpose (and not on accident).media queries do not change when using rem or em. Least in all my tests it was a flat number even if root fontsize is changed.
Its a flat px number period. The reason people say to use EM is because of the difference the way browsers behave using PX
PX, EM or REM Media Queries? | Zell Liew
Have you wondered if you should use
px, em or rem for media queries? I had the same question too, and I never figured it out, not till now. When I first created the mappy-breakpoint library, I used rem units. Then [after ais sitting font size on your html attribute in your css file using percentages a good idea?
You will find some people that will defend using the whole 62.5% font size on html but yea nope... don't imo
Its going to make life easy for a px to rem conversion but from what I know its still bad for User font size which is the whole reason you use rem.
["Yeah, yeah, your scientists were so preoccupied with whether they could, they didn't stop to think if they should"]
https://tenor.com/tOxp.gif
62.5% font size is 1100% to make life "easier" for devs and literally shits on users who change their default font size. Don't ever do it unless you really want to alienate users who change their font size
What is the best approach?
The best approach is what b1 said in the first response:
The less you define the better. Please avoid ViewPort units when starting out, because they are not some magic responsive unit like some think lol
Height at 100% seems useful
Seems, sure. But what does it do? Not a whole lot
% is percent of parent container, and for height elements only take up as much room as they need to by default, so unless you're setting a specific height on the parent container the parent container's height is the same height as that of all the content's height combined…which is the same as not setting height: 100% lolWhat do you put in your html selector typically?
Typically nothing
I know root is for variables typically
no you have to use height: 100% on html or you can't use percent of properly on the way down
until you have a set a strict height to another parent to use % off of
::root for global variables, yes. Then I do my font-size trick on body along with margin: 0;. After that I only add things that I need to specifically change using as less-specific selectors as I can. Usually with a class on the container element then element selectors for everything else
Oh, and *, *::before, *::after {box-sizing: border-box;} as the very first itemCan you explain those value choices for your clamp
It is pretty nice using rem vmin
Yeah, sure.
So, clamp takes three numbers, the minimum value, the ideal value, and the maximum value. The result of the clamp will be the ideal value (the middle), unless it's smaller than the min or larger than the max. So with my starter template above, the font size will be 0.875rem + 1.5% of the viewport's width or height (which ever is smaller, due to
vmin). But if that number is smaller than 1rem it'll be 1rem, and if that number is larger than 2rem it'll be 2rem.
As an example, say the user doesn't change their default font size, so 1rem is 16px. And let's also assume the viewport is 800px x 600px.
• 1.5vmin = 1.5% x 600 (0.015 * 600) = 9px
• 0.875rem = 0.875 * 16 = 14px
That sets the font size to 23px. That's larger than 1rem (16px) and smaller than 2rem (32px) so that's our font size
Of course you're free to mess around with both the ideal and max values. You may want a smaller growth, so you'd use 0.75vmin or something. Or you want the max to be a bit smaller, so you'd use 1.5rem.This is really good breakdown of clamp. I dont see it used often
I love
clamp() and min(). They're both super-useful CSS functionsThat 0.875 rem is 14px
Nice
I like to stick to nice fractions. 0.875 is 7/8
Because 1rem is normally 16px you can use any */8 fraction and it'll be a whole number
I should learn those fractions like when Kevin explained using numbers in his color vars
Yeah 16/8 is 2
8/8 = 16
7/8 = 14
6/8 = 12
5/8 = 10
4/8 = 8
3/8 = 6
2/8 = 4
1/8 = 2
That's actually really smart for responsive font sizes
Mobile to desktop
I usually use 2/8 (1/4), 4/8 (1/2), 6/8 (3/4), 7/8, 9/8 (1.25), 10/8 (1.5), and 16/8 (2) as my default sizing scheme.
7 sizes to rule them all, and in the darkness bind them. Or something
I don't make random and variable different sizing for things like line height, margin, padding, etc. I have a solid scale system and only use those numbers. Set 'em up as variable on
::root and boom! You're off to the racesHow do you handle adaptive vs responsive layouts so your screen changes don't like snap change but are more fluid
First thing is the fluid font size I showed above. Combine that with rem- or em-based padding/margin and you're over half-way there
After that, continue to use relative units like em, rem, viewport, ch, etc for sizing things and you can use some basic breakpoints to change things like flex-direction (going from column to row, for example) and grid min/max. And be sure to use em/rem for your breakpoints and not px.
Once you get comfortable with CSS' other, more esoteric, rules you can bypass breakpoints almost entirely!
For example, leveraging some flexbox tricks you can do a sidebar swap without any breakpoints:
https://every-layout.dev/layouts/sidebar/
I like this link
And here's an example using clamp:
https://every-layout.dev/blog/sidebar-flex-basis-clamp/
(among other cool ideas)
Every layout is amazing. I love it so much and is well worth the price of admission IMO
I like layout breakdowns and seeing why certain values are used with explanation