Old Friends Webflow StarterLast Updated 1/10/24
Overview
This starter kit uses Finsweet's Client-First as a foundation, with utility classes pulled over from Tailwind CSS, as well as some custom approaches we've found helpful across projects.
Worth mentioning:
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.
typography
All type is fluid, meaning it grows and shrinks according to screen width. Stick to the predefined set of sizes below for visual consistency. If needed, view global-styles_site for the exact min and max values of each size.
heading-xxlarge
DECK DOCTORS
heading-xlarge
Our Practice makes perfect
heading-large
heading-large
heading-medium
Where do you build decks?
heading-small
Simplify
heading-xsmall
Simplify
heading-xxsmall
Simplify
text-size-normal
Armed with growing evidence that this new generation of software tools can enable solo operators to compete with much larger companies, I started Old Friends to use modern software to help people pursue their ideas, including myself.
text-size-root
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.
Armed with growing evidence that this new generation of software tools can enable solo operators to compete with much larger companies, I started Old Friends to use modern software to help people pursue their ideas, including myself.
text-size-small
Armed with growing evidence that this new generation of software tools can enable solo operators to compete with much larger companies, I started Old Friends to use modern software to help people pursue their ideas, including myself.
text-size-xsmall
Armed with growing evidence that this new generation of software tools can enable solo operators to compete with much larger companies, I started Old Friends to use modern software to help people pursue their ideas, including myself.
text-style-
Text Style Underline
Text Style Link
Text style caps
Text Style Italic
Text Style No Wrap
text-weight-
Text Weight Black
Text Weight Extra Bold
Text Weight Bold
Text Weight Semi Bold
Text Weight Medium
Text Weight Normal
Text Weight Light
Text Weight Extra Light
Text Weight Thin
text-style-quote
“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.
Color
Colors should be applied with the classes listed below, but they're also available as global swatches when needed for specific elements or interactions.
background-color-
red
light blue
blue
Pink
purple
black
white
light grey
mid grey
text-color-
Aa
green
Aa
navy
Aa
black
Aa
white
Aa
grey
opacity-XX%
opacity 10%
opacity 20%
opacity 30%
opacity 40%
opacity 50%
opacity 60%
opacity 70%
opacity 80%
opacity 90%
border-color-
black 10%
Elements
Base elements are defined here. View the Symbols panel for a complete list.
Spacing
The
global-styles
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.
Directions
margin-top
margin-right
margin-bottom
margin-left
margin-horizontal
margin-vertical
margin-none
Relative Values
margin-tiny
margin-xxsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-gap
Exact Values
margin-0d25
margin-0d5
margin-0d75
margin-1
margin-1d5
margin-2
margin-2d5
margin-3
margin-3d5
margin-4
margin-4d5
margin-5
margin-5d5
margin-6
margin-6d5
margin-7
margin-7d5
margin-8
margin-8d5
margin-9
margin-9d5
margin-10
Examples
margin-topmargin-2
margin-medium
margin-bottommargin-medium
margin-xmargin-large
Spacers
Instead of the margin and padding classes, the
spacer
components can be used to quickly add relative or absolute spacing between elements as well:
spacer-0d25
spacer-0d5
spacer-1
spacer-2, etc
Useful classes
text-align-
Text Align Left
Text Align Center
Text Align Right
align-
Align Left
Align Center
Align Right
display
Inline
Inline Flex
Flex
container-
Container Small
Container Medium
Container Large
max-width-
Max Width XXSmall
Max Width XSmall
Max Width Small
Max Width Medium
Max Width Large
Max Width XLarge
Max Width XXLarge
Max Width Prose. Mollit anim veniam ullamco voluptate occaecat magna nostrud aute culpa. Tempor esse non sunt. Commodo nulla dolor elit. In exercitation Lorem nisi aliqua do in. Occaecat ex id qui. Magna dolore consectetur ut in. Ad consequat ex occaecat cillum Lorem ipsum. Sint anim eu in ut cillum. Voluptate sint sint minim exercitation. Fugiat tempor do in ea ad labore culpa duis cillum.
hide
show
hide
Show
Show Tablet
Show Mobile Landscape
Show Mobile Portrait
CSS
The
global-styles
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.
Javascript
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.