today has been a great day for coding; things are making sense, i’m soaking stuff up and im adding lines of code by the directions from memory it really feels awesome.
but im feeling really confused and flustered by the spacing stuff. will this become clearer with time? i feel overwhelmed, like none of this is really taking hold for me, 5px here, 10 px there and how it interferes with other space and the problems with the default spacing. i have to say some of it seems so much harder than it needs to be, i guess im just spoiled after years of just using pretty easy GUI stuff, huh?
Design systems are often used for larger projects and they use design tokens, a token is just named access to a value or group of values. A spacing token might be one of them.
It doesn’t necessarily tell you which one to use or where to use it but it lets you have consistent spacing by always using the same values.
If you want to try using something akin to a design system you can look at the tailwind CSS library. As long as you keep applying the same spacing classes to the same elements in the same context you will get a consistent look.
The browser default spacing is zeroed out or overwritten in such systems. Often there will be a reset or a normalize applied before all the other styles.
If you create the design or have it created for you (e.g. in Figma) you will have most of the spacing defined already. You basically just put the design into code.
It is a rigid approach but it helps keep consistency at a large scale. For simple pages or one-page sites, it isn’t really necessary.
3 Likes
ok , so for simple single pages or multiple pages you can play around if you dont like the default values of whatever language you are working with? or is format and spacing only with CSS and HTML, do things like javascript not deal with these things? im excited to move on from CSS im almost done!
for larger projects there is another layer of code or design systems/formats which will provide the continuity and symmetry in different styles so you dont have to fuss with this stuff? i will browse your links, thanks for you time!
The default styles the browser applies are just some sensible baseline styles it can use if it isn’t given anything else. They are not going to work for most layouts/designs and need adjustments.
JavaScript has nothing to do with how things look. It is just a tool to interact with the page. You can adjust CSS and manipulate the DOM (the page content) using JavaScript, but it doesn’t do anything on its own without you telling it what to do.
Consistency and symmetry (or intentional asymmetry) are needed no matter how complex a page is. The brain identifies things that are pleasant to look at which is how beauty can be universally (well maybe just terrestrially) identified.
Web design uses the same principles as art, cinema, and music. You have harmony and disharmony, distinct and subtle, rhythm and tempo. There are underlying principles that govern it all. The rules once you know them can also be intentionally broken to great effect.
You can build the rules into a system so they are easier to follow and apply.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.