Old Friends Webflow StarterLast Updated 1/10/24
Worth mentioning:
- Typography is fluid, the clamp formulas should be calculated from the design file for each text style using https://fluid-type.webflow.io/ and added to the global-style_type embed. Usually each heading and body style uses a different rate of scaling, so it's more true to the design to clamp them individually.
- The spacing classes are embedded within global-styles_spacing instead of present within the project, to avoid them being deleted when unused. Unminified code can be viewed here.
- All the sites we build are bespoke. Tailor this style guide to the project before building. Remove unneeded typography styles, trim colors, add new helper classes, etc.
DECK DOCTORS
Our Practice makes perfect
heading-large
Where do you build decks?
Simplify
Simplify
Simplify
This is the root size used for all spacing. When something is 1em, that means it's 1 × the root text size. This root sizes changes as the viewport width changes, which keeps spacing responsive with typography.
“The primary benefit is that you don't need to hire or allocate software engineers to build a custom experience. The secondary benefits are speed and flexibility to change the site as you grow. In this hybrid space between web apps and low-code exists a field of opportunity to build more than just marketing sites — you can put together functional prototypes for whole set of business models.
The
embed provides a set of classes to use for adding space between elements. Typical use is to wrap your element in a div and style it with a direction and value, as shown in the examples below. The same set of directions and values are available for both margin and padding.
Instead of the margin and padding classes, the
components can be used to quickly add relative or absolute spacing between elements as well:
The
symbol contains embedded CSS for styling this site.
The global-styles_spacing global-styles_utilities global-styles_grid embeds are standard across all projects at Old Friends. They provide access to utility classes like margin-top margin-4 and col-span-4. You shouldn't need to edit them. If there's anything you need to override, add it to the global-styles_site embed.
The global-styles_site embed (and any others) are specific to this site. Please take care if and when editing any of these embeds. Always create a backup of the site (Shift + Command + S), and save a local version of the styles before and after your changes.
Most projects use some amount of custom code.
- In Project Settings, custom head scripts will contain external libraries and any code that needs to run before the page fully renders. The custom body section will contain other scripts that are used throughout the site. During development, this code typically references an external file hosted in a provider like Dropbox so that changes are instantly reflected on the staging site. Once the site is live, this code is either pasted directly into the project or page settings, or linked to an external hosting provider through a CDN.
- The same applies for page-specific code. Code is only ever included on a page-by-page basis if it is used exclusively on that page and unlikely to ever be used on another page. Otherwise the code is included in the global body.