Project Defaults

Over the years we’ve found that it’s best if we add some project defaults to each one of the project. Those include:

Text Anti Aliasing

This makes the font render exactly the same as in Figma. There are instances where fonts look much thicker in the browser than in the Figma file itself. This is a simple fix for all projects:

<style>

body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

</style>

Fonts Preload

Usually it’s looking really ugly when you go to a page and you see the font fall back. If you’re using a custom font, that is really wide, it might also impact your speed performance of the site as you will have Cumulative Layout Shift (CLS) happening on page load.

That’s why we recommend using:

<link rel="preload" href="/your-font-file.woff" as="font" type="font/woff" crossorigin>

Navigation Scroll

Creating more complicated navigations might cause you to enable scrolling in the nav dropdown. In that case it would be bad to also scroll the background of the project. Usually we’re preventing this with:

<!-- Disable Scroll Script --><script>var Webflow = Webflow || [];Webflow.push(function () { var $body = $(document.body); var scrollPosition = 0;
$('[scroll="both"]').on('click', function () { if ($body.css('overflow') !== 'hidden') { var oldWidth = $body.innerWidth(); scrollPosition = window.pageYOffset; $body.css('overflow', 'hidden'); $body.css('position', 'fixed'); $body.css('top', `-${scrollPosition}px`); $body.width(oldWidth); } else { $body.css('overflow', ''); $body.css('position', ''); $body.css('top', ''); $body.width(''); $(window).scrollTop(scrollPosition); } });});</script>

Fixing Webflow Error states design:

/* Style for the error text below input */label.error {color: red;font-size: 12px;font-weight: 400;margin-top: 0px;}/* Style for the error state of input */.w-input.error {border-color: red;}

Adding Logic for Webflow Error States:

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script>var $form = $("#wf-form-Kickoff-Form");$.validator.addMethod("letters", function(value, element) { return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);});$form.validate({ rules: { contactname: { required: true, minlength: 3, letters: true }, email: { required: true, email: true }, }, messages: { contactname: "Please specify your name", youremail: "Please specify a valid email address", }});</script>

If the project has the form in the footer you can use this code globally. If not you can add it only on the contact page of the project.