Font Smoothing
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-font-smoothing: antialiased;
}
</style>
Balanced text-wrap
text-wrap: balance;
Vertical Trim
For all the design homies 🫗
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
Hide elements from production, but show in editor
<style>
.element {
visibility: hidden;
}
html.wf-design-mode .element {
visibility: visible;
}
</style>
Best Practices Defaults
<style>
section {
position: relative;
}
img {
object-fit: cover;
}
a {
color: inherit;
text-decoration: none;
}
button {
background-color: unset;
padding: unset;
text-align: inherit;
}