# Welcome [Frames](https://madewithframes.com) is a lightweight and simple to use modular design system for[ Bubble apps](https://bubble.io/home?ref=yc5cigsn). It enables users to quickly create consistent and pixel perfect responsive layouts in a few clicks. 🎉 Even though Frames saves you an inordinate amount of design time and resource, the Frames mantra is about delivering **high end & consistent designs** that work out the box. {% embed url="" %} # Getting Started #### 1. Install the Chrome Extension In order to you Frames, you'll need to [download](https://chrome.google.com/webstore/detail/frames/hihddnjamcpdegjphaokpldajmpcmlkc) and install the chrome extension. Once installed, you'll be able to access the Frames panel within the Bubble editor. #### 2. Refresh your browser If you installed Frames with your Bubble editor open, you'll need to refresh your browser in order to see the launch icon in the bottom right hand corner. #### 3. Sign up to Frames Once you've opened the Frames panel within your Bubble editor, you'll be able to sign up and access the **free sections** instantly. If you'd like to access the full library of sections, you'll need to upgrade your account. #### Supported browsers At present, Frames works with [Chrome](https://www.google.com/intl/en_uk/chrome/) and [Edge](https://www.microsoft.com/en-us/edge). # Summary After installing the Frames [chrome extension](https://chrome.google.com/webstore/detail/frames/hihddnjamcpdegjphaokpldajmpcmlkc), you'll notice a new floating icon in the **bottom right hand corner** of your screen. This icon is only visible when you are in your Bubble editor.

Clicking the icon exposes a new panel on the right side from which you can access your Frames account, sections and layouts.

You will need to **sign up to Frames** from the panel before gaining access to the sections. Once signed up, Frames will be accessible in all of your Bubble apps. Make sure to use the same browser that you install the chrome extension on. # Sections You can think of sections as blocks that span the width of the page, such as a header, hero section, pricing or footer section to name a few. They include elements such as text, buttons, images and icons and are grouped together in a group that works responsively. Once you start stacking sections vertically, you're building a page from top to bottom. {% hint style="info" %} Be careful not to move the elements within the sections as this will disrupt the responsive settings. {% endhint %} ![A hero section](https://3157777526-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mhc1tyZ6xD7S7XsqE29%2F-MhxNm7BJmFlFAUJvd2f%2F-MhxONgDy80Jue9CIxuU%2FComponent-hero.jpg?alt=media\&token=bd1c42cf-dcdb-456b-8349-164f52d9545e) ### How it works With the panel open, click on the sections icon in the header and browse to a section category. You can **preview** a section by clicking on the magnifying glass. Once you find the section you need, click on the copy icon. *You have 2 paste options:* 1\. Paste using your keyboard shortcut: The section will be pasted at the top of the page. 2\. Click on 'edit' in the Bubble editor, then select **Paste from Frames**: This will paste the icon within your current viewport. *(recommended).* You can also use the standard Bubble paste command but this will paste the section at the top of the page. ### Editing sections We designed Frames so that all you need to do is add your copy (text), images, colours and icons etc. The sections are designed using pixel perfect responsive settings. Avoid editing the positioning or responsive settings, as the sections won't behave as intended. We cannot provide support for sections that have been repositioned in this way. {% content-ref url="/pages/-Mhc74GwkfxCmSVfd4z5" %} [Video Tutorials](/help/video-tutorials) {% endcontent-ref %} ## Section types ### Blogs These are card layouts that work perfectly for blogs but could be used for any section of your app where a card layout is suitable. ### Brands This section enables you to highlight brands that you have worked with or that endorse your product. Replace the grey placeholder images with images. It's best practise to format the logos consistently so that they are a similar shape. The best place to find logo consistently is on a brands social media page. ### Content Content sections are sections to draw attention to your products leading features. You probably want to make use of your main product images or screenshots here. ### CTAs A CTA or a 'call-to-action' and it's an important section for any landing page to convert your customers in some form or another. Either sign them up to your product or subscribe them to a mailing list etc. ### FAQs A frequently asked questions section. ### Footers Footers are placed at the bottom of your page and contain an index of your app links as well as external social media links ### Forms Beautifully designed authentication, onboarding & password reset forms that can be repurposed into any for that you need. ### Galleries A range of image gallery layouts in a grid structure. Replace the grey boxes with images. If the images are static, edit them first so that they are in a 4:3 aspect ratio. This is ensure the best behaviour. {% hint style="info" %} Use WEBP format to achieve the best size vs quality result. {% endhint %} ### Headers Headers contain your logo on the left and buttons to take actions such as sign up or log in. Some of the header variants contain icons for mobile. This is just an icon, you will need to build the menu yourself. ### Heros A hero is undoubtedly the most important part of any page, as it's the section that is seen first on page load. Paste your hero section directly beneath your header. ### Pricing Display your products pricing options within this section. ### RG Lists Fully responsive repeating groups from 2 columns up to 7 columns. Includes text, icons and buttons. ### RG Grids Coming soon ### Stats Champions your product achievements here. ### Teams Highlight your team members in this section. ### Testimonials This section enables you to display customer feedback. ### Titles Bold titles to draw attention to your message. Centred options as well as 2 column layouts with buttons. # Layouts Think of layouts as fully designed responsive pages. All you need to do is add your copy (text), images, colours and icons etc. and you have yourself a responsive page in no time at all. You can build layouts yourself, by stacking sections or you can conveniently use fully completed layouts that the Frames team has designed. **Layouts will be released in November 2021.** # Themes Themes are industry or product specific layouts with applied brand attributes such as styled buttons, icons, images and text. A theme could be based on *industry* such as **fintech** or based on *function* such as a **marketplace** application. Themes enable you to get even closer to a fully branded page as quickly as possible and the Frames team has extensive experience to be able to design highly converting designs in a variety of industries and functions. **Themes will be released in January 2022.** # Text You **don't** need to change the height or width of the text elements to fit your text, as Bubble does this for you while retaining the Frames responsive settings. Notice in the example below that the text element only contains 3 words, however, we have to display 6 words. Bubble handles this for us and will add height to the text element auto-magically 🙌

# Images The grey boxes in the designs are image placeholders. You can replace them with static or dynamic images. We've applied appropriate **responsive settings** depending on the use case.

{% hint style="info" %} If possible, use [Figma](https://figma.com) or any design tool to edit your static images to the initial size and shape of the image placeholder. Then convert your images to [WEBP](https://convertio.co/jpg-webp/) as this will improve performance and SEO. Ideally keep your image size under 250kb if you can. {% endhint %} ### Examples This example has a min width of 20 and a **max width of 100**. The image will not stretch any wider than its current form.

This example uses **fixed width** to maintain the round shape. If it wasn't fixed width, the round shape would become a pill shape. ![](https://3157777526-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mhc1tyZ6xD7S7XsqE29%2F-Mi1QOn2UBqpEejvW1zy%2F-Mi1_OcbkeqmayfsKo4b%2FImages%202.png?alt=media\&token=924736d4-9a7a-4587-9bf0-0d288d67d669) This example uses **keep element proportions as the page is resized**. The image will maintain its shape as the page is expanded and contracted. ![](https://3157777526-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Mhc1tyZ6xD7S7XsqE29%2F-Mi1QOn2UBqpEejvW1zy%2F-Mi1aGpI0Le__Tieromp%2FImages%203.png?alt=media\&token=fae3d14b-3430-42b3-a214-21ae2b94957d) ## Dynamic image processing Bubble applies **run mode rendering** to dynamic images. Let's explore how applying different options renders different results. #### ### Run mode rendering: **Rescale** Bubble fits the dynamic image with its original dimensions into the image element.

### Run mode rendering: **Zoom** Bubble zooms into the image element to maintain its original shape. Results can be pixelated.

#### ### Run mode rendering: Stretch + processed with imgix Bubble uses the builtin imgix plugin to first crop the image and then we use stretch to make sure the element fills the image element. This will usually give the best results ✅

# Styling Frames styles are **not currently inherited** when pasting elements into your own app. If you like the Frames styles, save them as a new style in your app. As a reference, here are the styles that we currently use: ``` Typeface Inter Weight (variable) 700, 600, 500, 400 Primary blue #3333FF Secondary blue #EFF6FF Heading #111111 Body #6B7280 Image (Placeholder) #EBF0F7 ``` # Video Tutorials ### Getting started with Frames A 90sec introduction to the Frames design system. {% embed url="" %} ## Build a Bubble landing page in minutes using Frames A comprehensive tutorial for marketing elements {% embed url="" %} # Support We provide support from Monday to Friday 09:00 to 18:00 GMT (London) Our support email is ****. Please allow 24 to 48hrs for a response. Support is limited to problems with the sections themselves, and not how to integrate them into your app. For this purpose we have created a set of video tutorials to get your started. Remember that Frames only works on a **960px page width**. We suggest you start on a fresh page instead of trying to fit Frames into arbitrary page widths. {% content-ref url="/pages/-Mhc7E6pFb\_\_iCMZH9LT" %} [FAQ](/help/faq) {% endcontent-ref %} {% content-ref url="/pages/-Mhc74GwkfxCmSVfd4z5" %} [Video Tutorials](/help/video-tutorials) {% endcontent-ref %} # FAQ #### What are sections? Sections are groups containing elements that span the full width of a page, such as a header, hero section, pricing or footer section to name a few. They include elements such as text, buttons, images and icons and are grouped together in a group that works responsively. #### What are layouts? Think of layouts as a collection of sections. So in essence, a fully designed page. All you need to do is brand your elements, change the text and images and viola, you have yourself a 100% responsive page. #### Are your sections and layouts responsive? Yes, Frames really shines in this department. The designs will be responsive from a 320px mobile page, all the way up to large monitors. Frames was created using the Buildcamp grid system which has been extremely popular in the Bubble community. #### Can I build my entire application with Frames? No, Frames is a responsive **design system** and does not include logic, workflows or database structure. #### Can I use Frames within my existing project? Yes you can, however, the designs are created to work on a 960px width canvas. You will need to create new pages within your existing app that conform to this page size. #### What's the recommended page size to use with Frames? Frames only works on a 960px page width. This system has been meticulously design by the Frames team to provide pixel perfect responsive designs with pre-determined break points. #### Can I hire you to design my pages? No need, as this is the point of Frames. Save on developer costs by using this system instead 😎. #### Can I use Frames to build client projects? Totally. This is where Frames shines. 🙌 #### Can I repurpose and sell Frames layouts on the Bubble template store? No. This is against our terms of service that you agreed to on signup. #### Do you have any starter templates? This will be available soon. #### Who creates the designs within Frames? The design elements are created by [James More](https://twitter.com/jameore) of [Buildcamp](https://buildcamp.io).