In this post my aim will not be about comparing pixels units vs "you-name-it units", but rather I am going to show you with just a few examples a way in which you can too use fixed pixels as a way of sizing your own containers, buttons, CSS Grids layouts and more.
One definition of design that I personally agree with, is that it's an agent of communication that uses shapes, colors, typography and other stuff to represent an idea, a service, a product and other things too. Do we need design as theory? Yes, nope, maybe, it could help. What kind of practice does one need to create functional designs, layouts and other web stuffs, in my opinion the web looks alot like magazines and articles, in fact you could get so many ideas just by staring at a magazine cover and articles. This is the thing. HTML comes predefined with things like "lists", "forms", "columns", "options in a box" (select), "buttons" and more. You could use a div or any other tag and give that any shape you want, with any background color you wish, you can also give that box an amount of "padding", "margin", "height", "width" and, Gradient? Yea. Rounded corners, one porfavor. Neumorphism? Uh, sure I'll take it. By looking at a magazine your'e probably be thinking in terms of HTML, at least I know I do.
So this means we can make compositions like in magazines or a very close effort, in fact with CSS Grid this is nothing but a walk in wonderland, its so pretty. So we can build many things with HTML, and of course if your'e reading this here on this website it probably means that your'e able to use HTML to its full potential and probably a lot more than just plain HTML and CSS. So let's get to it!
I wanted to talk about fixed pixels because Im a designer and trust me when I say, I can be a little bit of a "perfectionist" when it comes to spacing things, organizing boxes, making sure everything is well alligned, horizontally and vertically, that nothing seems off and has enough "air to breathe", maybe you look at these things in the same way I do. Cool. And maybe you have heard about the "Fibonacci sequence"? Yep! Thats what this is about, finally Iv'e said it.
Turns out Fibonacci numbers are just a wonder to work with in web design, its become my "framework" of choice, those numbers. You can blindly set the height and width using those numbers and youll quickly get a template going.
For the example below I used cards to illustrate my point, but I also included a hidden "top bar" and a hidden "sidebar" with "fixed pixels".
Consider inspecting this pen with fixed pixels aka Fibonacci fixed pixels.
I have been using these numbers and most of the time if not every time my layouts look pretty good, I don't need percentages of any kind, all my widths and heights still maintain a decent aspect ratio.
In case you want to know more about the Fibonacci sequence: https://www.livescience.com/37470-fibonacci-sequence.html
The magic of Fibonacci numbers by Arthur Benjamin (TED talk)
This is my first post ever on DEV, please consider sharing your knowledge when it comes to bloggin. Thanks for reading me.
Top comments (2)
My experience with blogging is that you should use headings l, and use them wisely. People tend to skim through articles, see what they may be interested in, then only read those sections.
Yes thats something I do too.. thanks!