Framepad Starter Docs
Learn how Framepad starter works and the best practises and strategies to use it effectively.
See Framepad Starter in action
Try out Framepad Starter with a demo site created using all the Framepad Starter features and strategies.
1.0 Purpose of Framepad Starter
Framepad Starter is a scalable and efficient framework and set of guidelines designed to make building consistent sites in Framer faster.
The core problem Framepad Starter solves
What makes Framer so special, is the fact you can create a website in no time. Without the use of classes, websites can be built much quicker, with room for experimentation. However the issues with not using a class system become evident when aspects such as spacing, sizing, typography etc. become inconsistent.
Also, as Framer makes web development as easy as using a design tool, it can be quite attractive to quickly throw a design together and publish it. However, without proper structure and an over reliance on absolute positioning (within frames), many sites end up being plagued with responsive and display issues.
Framepad Starter directly addresses both of these issues with a default layer structure pre-built on every file. This layer structure is built using responsive units and best practices to ensure responsive and consistent design throughout the whole site. The starter file also uses spacing strategies and components to ensure consistent margin, padding and element spacing site-wide.
2.0 Getting Started
Once you’ve remixed the Framepad Starter file to your own Framer account, the first step is to start setting up your styles for the project.
Typography
Heading styles
Framepad Starter has Heading 1 to 6 (H1-H6) styles. Framer by default only supports text styles for headings 1 to 3 (H1-H3), however we can use an accessibility tag to define which heading tag we want.
When using Headings 4 to 6 (H4-H6) in your build, you need to set the accessibility tag to match the heading style you're using. For example, if you're using the 'Heading 4' text style, then you would set the accessibility tag to 'h4', otherwise Framer will treat the heading as an H3 heading.
We can also use this same method of using accessibility tags to remove a heading tag from a heading text style. For example, say you want to use a larger heading text style in your build, but not treat it as a semantic heading tag (H1-H6), you can set the accessibility tag to 'p' to remove any semantic HTML heading tag.
Accessibility section in properties panel
Body styles
Framepad Starter has preset body text styles. There are preset body styles ranging from XL to XS. These are designed to be flexible reduce the amount of ‘random’ text sizes on your site. Start by editing each style, changing to your own font, and sizes that match your project.
The text styles should also help with consistent text hierarchy site-wide. The general rule to follow is each layer deep the text is nested, you should go one text size down.
Text links
There are three text links set up by default. These can be viewed and edited within the ‘Link Styles’ property. Often times you may want to have a different link style for nav links and regular inline text links. Here’s where you can set those link styles.
Colors
Setting up your color palette allows you to consistently reuse colors throughout your site, reducing the use of random one off colors. When adding your colours into the circle swatches, don’t forget to also create them as color styles in the ‘Shared Colors’ section in the ‘Fill’ property.
3.0 Layer structure
Framepad Starter comes with a pre-made layer structure. This layer structure is useful in multiple ways:
1. It ensures the entire site is responsive by default.
By default, new Framer projects have no stacks, or responsive layouts, requiring responsive layer set up every time a new project is started.
2. Best practices in web layout are set by default, including meta tags for accessibility.
3. Quickly get started without having to worry about setting up the site structure.
Framepad Starter layer structure in Framer
Layer naming
Before we breakdown the layer structure, let's quickly talk about layer naming. As Framer is not a traditional class based system, like Webflow, our layer names aren't tied to a certain class. Therefore, naming our layers in a specific, structured way is not super important.
However it's still good practise to keep our layer names clean and detailed enough so that we know what each layer is doing (if your build has layers called 'Frame' or 'Rows', it's hard to know what each layer is for). Below, in the core layer structure, each layer has a specific name. It's important to follow this naming convention throughout each section and site you work on. This way, we always know what these layers are doing, and that they are there for the same purpose, no matter the build.
With custom layer naming (any layers outside of the core structure) don't overcomplicate it. While there's no set rules for this, it's best to use concise names, that are descriptive enough to convey the purpose of the layer. For example, if a layer is dictating the layout of a section, then you can simply name that layer 'Layout'. If you need to be more specific, go ahead. Or if a layer is containing a bunch of images for a gallery, you can call that layer 'Gallery Images Wrapper'.
Let’s break down exactly what each layer in the structure does.
The Desktop layer is the breakpoint frame. This is created by default in Framer for every project. This breakpoint frame contains the entire site content, from nav, main site content and footer.
No styling needs to be changed on the desktop layer.
The Main layer is the wrapper for all of the site content, excluding the nav and footer. Ensure you place the nav bar and footer OUTSIDE of the Main layer, but inside the Desktop layer.
The primary use for the Main layer is to contain all section layers of the site, and to define which content on your website...
No styling needs to be changed on the desktop layer.
The section layer wraps all of the content for each section. In a standard site, we would generally have multiple section layers, nested within the Main layer.
Nested within the section layer lives our padding and container layers. To add more sections to your site, it is best practise to duplicate the Section layer. This way we can ensure all padding and container layers copy across with it, keeping our site spacing consistent.
We can style section layers. The most common style would be adding a Fill to the layer to give the section a background color.
Section structure in Framer using Framepad Starter
Getting into the spacing related layers. The H Padding layer is what wraps our horizontal spacing blocks (H Block) - more on this below. Our horizontal spacing is essentially the right and left margin of our Section.
This layer is purely just to wrap our horizontal spacing blocks (H Block).
Sometimes we don’t want any padding on our section. Such as a full-width image gallery that takes 100% of the screen width and height. In instances like this, we can remove the H Padding layer, and all of its children, placing all of our own content in the ‘Section’ layer.
No styling needs to be changed on the desktop layer.
Like the H Padding layer wraps the left and right padding for the site, the V Padding layer wraps the vertical spacing blocks (V Block). which define the top and bottom padding for each Section.
This layer is purely just to wrap our vertical spacing blocks (H Block).
No styling needs to be changed on the desktop layer.
The last layer within the default structure is the L Container layer. This layer holds all of our content for the section and is the container that defines the max-width. This is essentially the maximum width the content within this section can span. We use containers to limit how wide out content grows. Take someone using a large monitor to view your site, it can become quite jarring and illegible if content spans the entire width of the display.
By default in Framepad Starter there are 3 container sizes. The difference between them being the max-width amount.
• L Container = 1280px
• M Container = 960px
• S Container = 768px
To change the container size, you simply need to type the max width of the container you want. For example, if I want a small container (S Container), I would change the max-width value of this layer to be 768px, and change the layer name to S Container for consistency & organisation sake.
These values are purely just recommended values. In Framer we can’t actually set the different sizes as variants (as we do for spacing blocks - more on this below), so we need to type the max-width we want that matches the container size we are after.
If required, you can change the max-width amount of the 3 container sizes, and document this in the Style Guide page. However, for consistency sake, it’s advised to follow three main container sizes only.
The only styling needed on this layer is changing the max-width to the required amount to match one of the 3 container widths.
Section structure in Framer using Framepad Starter
4.0 Consistent spacing
To achieve consistent spacing in our builds. We can call on different strategies and methods within Framepad Starter to help us out. There are 3 main tools we use for spacing within Framepad Starter. We’ll cover them below, but first let’s talk about our Spacing scale.
Spacing scale
A spacing scale is a system of units we use to consistently define spacing within our site. Framepad Starter uses a 4pt spacing system. This means, every element is spaced using a number divisible by 4 (eg. 8, 12, 16, 24, 32, 40 and so on.) This brings uniformity and consistency to our site.
Whenever we want to space something, we would use a value from the 4pt spacing scale below:
1px
2px
4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
120px
160px
Horizontal spacing blocks, also known margin blocks, are components within Framer that we can use to define consistent left and right spacing for each section. They give our content breathing room for when the browser width gets smaller (our content won’t be pushing up against the edge of the window).
H Blocks live within the ‘H Padding’ layer, and we have one block for the left margin, and another block for the right margin. H Blocks are set for each section, however they should not change per section, as page margin should be consistent site-wide. To change the width of content, we use the ‘Container’ layer (more on that below).
We have 3 variants for H Blocks. Desktop, Tablet and Phone, and as the name suggests, which variant should be used depends on the breakpoint.
Left and right H Blocks selected.
Select the correct variant for each breakpoint using the ‘Variant’ selector in the properties panel. For eg. On desktop, the ‘Desktop’ variant should be selected. On tablet, change the variant to ‘Tablet’ etc.
Sometimes we may want to have content span the entire width of the page, but still have top and bottom padding on the section (V Padding). In these cases, we wouldn’t want to delete the entire H Padding layer. Instead we can use the ‘Visible’ variable in the H Block component properties, turning the visible toggle to ‘No’ to hide it.
If necessary for your project, you can edit the default values of the H Block. Simply double click into a H Block to open up the component view. Here we can change the width of the block to any value we want to use as our margin.
Vertical spacing blocks define the top and bottom spacing of each of our sections. They give our sections breathing room between each other, and other content on the page (such as the nav and footer)
V Blocks live within the ‘V Padding’ layer, and like H Blocks, we also have two V Blocks. One for the top padding, and one for the bottom padding of the section. Unlike H Blocks however, V Blocks can be different from each other in the same section, as well in other sections. They also don’t correspond to a breakpoint like H Blocks do.
V Blocks come by default in 4 different size variants, and you can switch out the variants based on whatever size is required for your build. If you want more white space on your site, opt for the large 120px block. You can also swap a V Block variant on smaller devices like mobile. For example, if I am using the large - 120px V Block on desktop and tablet, I might find mobile has too much spacing. In this case, I’d swap the variant to the medium - 80px block on mobile.
Top and bottom V Blocks selected
To choose the amount of padding you want, select a V Block, or both (top and bottom), and change the variant in the H Block component property panel.
Sometimes we may not want to have any vertical (top and bottom) padding on a section. In these cases, rather than deleting the entire ‘V Padding’ layer completely, which would also remove our container. We can use the ‘Visible’ variable in the V Block component properties, turning the visible toggle to ‘No’ to hide it.
Like the H Block, if necessary for your project, you can edit the default values of the V Block. Want to make the large variant even bigger than 120px? Simply double click into a V Block to open up the component view. Here we can change the height of any of the block sizes to any value we want to use.
Spacing blocks allow you to space elements apart from each other visually, and without creating unnecessary stacks. They are useful for spacing elements that will not be spaced evenly. They also contribute to a more consistent build, with only a limited amount of set spacing sizes to choose from, random and inconsistent spacing is avoided.
Spacing using stacks vs Spacing Blocks
Using stacks in Framer is great, and Spacing Blocks are not the replacement for stacks, just a second method of spacing you can employ. Where stacks space all children elements inside of it evenly. Spacing Blocks allow you to set the spacing between every element individually.
They are essentially just an empty frame/div with a width and height set. By dropping a spacing block into a layout, we can give the illusion of white space, without having to create multiple stacks, and setting different gaps within the stacks.
Spacing Blocks can also allow us to visually see our spacing within the canvas, as well as in the layers panel. This makes it easier to identify where our spacing is.
Three Spacing Blocks selected showing how to space elements using them
To choose a different size Spacing Block, use the ‘Variant’ picker seen above in the Spacing Block component properties panel.
Take the above design in the screenshot two above. By using spacing blocks, we can space all elements a different distance from each other, whilst using only a single parent layer. To recreate this using stacks, we’d have to create three nested stack layers, each with a different stack gap amount. Even in this simple example, we can see this is not only cumbersome and time consuming, but it adds quite a lot of complexity and clutter to our layers panel.