Library creator guide

Layouts

Webflow Libraries are made up of layouts, but the layouts that you design will need to be saved and submitted as components in your Demo Site. Remember that your Demo Site will be the source of truth for your Library, so you should be sure to keep all of your designs saved in it as components.

Layout requirements

Your Library must include a minimum of 50 layouts to be accepted to the Webflow Marketplace.

All layouts should include your name or brand prefix.

In addition, take a look at our Quality Rubric and the Design Guidelines for more information on what will make your submission successful!

Add metadata to your Library layouts

Once you’ve created the components you’d like to include as layouts in your Library, you must add metadata to each one. Using the pencil icon next to each component in the components panel, you’ll need to update the following fields:

• Name
• Labels each layout in the Library
• Category
• Defines sections of the Library, e.g. “Footers” or “Navigation”
• Preview image
• Shows a preview of each layout in the sidebar

‍

"Category" best practices

When filling out the "Category" field, we recommend following these best practices:

1. Build layouts that fit a diverse set of categories
2. Use familiar categories. Not sure what’s familiar? We recommend referencing categories found in popular Libraries like Relume or Flowbase
3. The order of your categories is determined when you save them (i.e. press the blue “save” button after setting a category) so if you would like to control the order you’ll need to save them intentionally. For example, if the first layout you save is in the “Footers” category, then that will be the first category listed for users who install your Library. Once you’ve saved a layout under a new category, that category’s sort order cannot be changed. We recommend saving them in alphabetical order, but you’re welcome to choose an order that suits your Library.

"Preview image" requirements and best practices

Preview images are screenshots of your layouts that users will see in the designer. You must first upload these screenshots using the Assets panel, which will make them selectable in the Preview image selector. Please note the following requirements for your images:

• The maximum “container” should fit within 1440x900
• Images will be scaled down to a max-width of 285
• Max-height of the image is 178

Remember that the Assets panel enables bulk uploads! Take advantage of that to upload your previews after taking your screenshots. We also recommend naming your previews in a way that is consistent with the name of the corresponding layout before uploading, e.g. “Footer 1 preview” for the “Footer 1” layout. This will make it easier to find the right preview for each component.

This metadata is key to creating the user experience for your Library, as demonstrated by the screenshots below:

Demo and Documentation Site

In your library details page (this is the page that shows your Library on the Webflow Marketplace), you will include links to the following:

Demo Site [Required]

To show off the layouts that come with your Library to potential users, we require that you build your Libraries into a Demo Site. Please follow the guidelines below for your Demo Site:

• General UI polish in order to provide the best user experience
• Clear delineation of each category (i.e. Nav Bar, Footer, Hero, etc.)
• Ability to either filter or scroll to specific categories
• No links or placeholder text that is a clear call to action to purchase other libraries or direct sales marketing. General links to documentation, external sites, contact info, etc is allowed.

You can explore demo site examples by clicking “Open demo site” on any Library detail page

Importantly, all components in your site will be included in your Library when you submit it. This means that if you create any components specific to your Demo Site, you will need to remove those components before submission. If you do build your Demo Site using components, we recommend that you label them accordingly to make the submission process easier.

This will link out to a live Webflow site that you used to author and submit the library. In the Demo Site, an interested user can interact with your layouts to test drop-downs, Interactions, sliders, etc.

• The Demo Site can either be the Homepage of your Library or a separate site which will be displayed at the Library details page.

Demo Site guidelines

• General UI polish in order to provide the best user experience
• Clear delineation of each category (i.e. Nav Bar, Footer, Hero, etc.)
• Ability to either filter or scroll to specific categories
• No links or placeholder text that is a clear call to action to purchase other libraries or direct sales marketing. General links to documentation, external sites, contact info, etc is allowed. If you have specific questions on this, please do not hesitate to reach out with your specific example.

‍‍

Documentation Site [Optional]

If applicable, you may also include an external documentation site that includes additional information about your libraries or link to your external site for users to explore additional offerings.

‍

‍

Design requirements

The guidelines below highlight our expectations for what “good design” looks like for your Libraries. Following the guidelines provided before submitting your Library will help speed up the design review process, and allow us to publish your Library in a more timely manner.

Content and layout

• Libraries should include design variations for several elements, such as Navbars, Sliders, Forms, etc.
• Libraries should not include:
• • Nested Symbols
  • Nested elements: Tabs, sliders, etc
  • Google fonts
  • Custom fonts
  • Map element
  • reCAPTCHA element
  • CMS elements
  • Ecommerce elements
  • Search element
  • Prealoaders
  • Background videos
  • Bindings to Logic Flows
  • Custom code

Rich text

• When a user adds any text element inside of a Rich Text, it should look good and be styled correctly in the Tag selectors.
• If there is special styling on elements inside of a specific Rich Text element, add a class to that Rich Text and then style tags for that class. Ex: If a text link is supposed to look different in a specific Rich Text compared to All Links on the site.
• Spacing between each text element inside of a Rich Text should be consistent. Ideally this spacing should be set on Tags so they're consistent throughout the site.

Typography - Legibility, spelling, and grammar

• All text should have proper spelling and grammar
• Headings need unique wording (not "lorem ipsum) for the type of website it is made for.Paragraphs can use “lorem ipsum”
• Text needs to be legible (background and font colors should have enough contrast on all device screens)
• Long and short heading titles should be used to test line height bugs
• Text line-height should avoid text crashing on itself on all devices

Combo classes

• We expect a large percentage of library users will be newer to Webflow. That being said, please only utilize combo classes when it's necessary for achieving a specific use-case in a given layout. Whenever possible, please do try your best to not utilize combo classes.

Responsive behavior

• Important: Layouts should be responsive and fluid and percentage based. Library creators should test their layouts by dragging the viewport width in Webflow and test the published site on mobile devices.
• Layouts should work across all media queries. Ex: tabs should become stacked on mobile
• Generally layout spacing should be tighter on mobile devices.
• Do not add any larger breakpoints to your layouts
• Use a spacing system that spans appropriately across screen sizes
  • Good example: A website uses 60px of top and bottom padding on desktop, and 20px of top and bottom padding on mobile
• Ensure typography classes (H1s, H2s, H3s, etc.) have specified sizing for different screen sizes (i.e., mobile usually requires smaller heading sizes than large screens)

Webflow usability

• When possible use initial appearance on elements with Interactions so that it’s visible to customers. Detail: Some elements use display:none, visibility:hidden, or opacity:0 and other elements are visible by default and have display:none set on an Initial Appearance.
• Exception: Preloaders should have Initial Appearance set to display:none, so that the element doesn't block the access to the page content.
• Elements (tabs, sliders, etc) should not be nested. Ex: slider inside of a slider.
• The main images inside repeating grid items should be links instead of just having small hidden text links.

Forms

• Form fields should have correct settings. Ex: email fields should not be text fields
• Success messages should be customized to fit website design
• Input focus states should be customized to fit website design
• Input fields text and placeholders should be legible
• Give appropriate names to the Forms and Field elements (in form settings). These names will appear in form email notifications and form reports.

Components

• Create one component per layout. Ex. A Navbar should be a Component available in the Components panel
• Do not use nested components

Classes and Styles

• When possible don't create new classes and styles when you could re-use or cascade styles from another class to create the same design.
• Class names should describe the element. Bad: "column2", "text1" or “section-6”. Good: "Social Icon" or "Author Title" or “Testimonial Section.”
• Unused styles should be cleared.
• Delete styles if they aren’t needed. Ex: Setting float: none has no purpose unless you are overriding float: left.

Interactions and transitions

• The Library should not contain any page level Interactions.
• Transitions should be applied to specific properties, not “All”.
• Transitions should be set on all properties that change on hover. E.g. If text color changes on a button hover it should have a transition.
• Transitions should be consistent. Ex: input focus and button hover transitions should have the same timing.

Variables

Variables let you store size, color, and font styles so you can reuse them for a consistent design experience. When someone updates a variable value, that change will update everywhere it’s used on the site. And they’re available in a central location for more visibility into your site’s styles.

We recommend using Variables on your Library to provide a faster and quicker way to update Library components.

Accessibility

• Follow Webflow’s accessibility checklist as referenced in the quality rubric. For templates, pay special attention to the following:
• Avoid excessive motion behind text
• Allow zoom without forcing horizontal scrolling
  • People with low vision use zoom to scale content, sometimes up to 400%. As they zoom, content should reflow vertically (as a column) and remain fully legible and logical without a need for horizontal scrolling.
• Check legibility on landscape and portrait
• Ensure content has appropriate structure and relationships
• Ensure that text can be resized without the loss of content or functionality
• Layout is simple, straightforward, and consistent
• Make sure that color is not the only  way information is conveyed
• Check the contrast for all borders, icons, text and overlap on photos/videos
  • Color contrast guidelines indicate that there should be at least a 4.5:1 ratio between the foreground content and the background content. However, this guideline is not applicable if:
  • The content is large. If the text is large enough to exceed 18 pt. font size or 14 pt. font size if bold, a contrast ratio of 3:1 can exist.
  • The content is decorative
  • The content part of a logo or wordmark
• Use inclusive language
• Use plain language
• Use unique and descriptive link labels
• Include alt text for every important image
• Avoid auto playing media

Logo

• The logo in the navigation should have the same name as the library
• The logo should be an image so it’s easy to replace.

Style guide

Create a page called “Style Guide” with all of the tags (Headings, paragraphs, text links, lists, buttons, etc).

‍

‍

‍

‍

Classes and styles

• No auto generated class names (e.g., Div Block 45, Image 4)
• Re-use classes for elements with same styles
• Class name casing and usage should be consistent throughout the entire template. Designers can use their own naming conventions as long as they are descriptive of the element. Client-first approaches are allowed and recommended. (*The rendered HTML will always display any of the naming conventions as “class” or “class-name”):
  • Class Name
  • class-name (recommended)
• Use descriptive words for naming classes, not abbreviations:
  • Bad example: column2, text1, section-6
  • Good example:s ocial-icon, author-title, testimonial-section
  • Best example: section, column, icon
• If you want to differentiate the style of a section from all others, you can add a combo class: section
  • Combo classes should not be more than two levels deep.some text
    • Bad example: section  testimonials  dark  customers  horizontal
    • Good example: section  testimonials  dark
• Unused styles should be cleared
• Don’t apply redundant styles if they aren’t needed e.g., (setting text-align: left on a paragraph inside a container that has text-align: left)

Components

Make sure you follow these guidelines for naming your components

• You may use any class naming convention as you wish, but we recommend using a client-first naming convention
• Requirement: please add your brand name as a prefix to each component and class utilized in the library. In this way, when users drag your layout into their canvas, they can clearly see where the class is from via the Style Manager.
• Example if your brand name is MR (please be sure the prefix follows whatever naming convention you use):
  • mr-padding-global, Acme-Padding-Global
  • acme_padding_global, Acme_Padding_Global
  • Acme Padding Global
  • Acme / Padding / Global
• Components  should follow Title Case
• Components should contain the Library or name prefix

Interactions

• Interactions should follow sentence case and should be descriptive (e.g., "Slide nav down on scroll" instead of "Show nav")

Pages

• Page names should be Title Case
• The page name should be consistent with it’s slug

The use of premium or trademarked graphics assets are not allowed. Use only free assets that are allowed for resale and free redistribution or CC0-licensed graphics from sources like:

• ‍Stock Up‍
• Pexels‍
• Unsplash

Include a licensing page on the project (see example)

• Include the following text at the top:“All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below”.
• ‍Display graphic sources on this page (images, icons, fonts, illustrations) with a link for each, pointing to the page where the license is defined (see example).Licensing and Changelog (when added) pages should have the following custom head code: <meta name="robots" content="noindex">

‍

Recommended practices

Using Variables

• Use variables where appropriate

Pre-submission audit

Run a pre-submission audit based in the quality rubric and implement any improvements before submitting your library:

• Test every link//interaction on every layout and on every device so that there are no design or layout bugs
• Test your layouts across all screen sizes
• Make sure your Library doesn't contain any unsupported elements and features
• Check if your brand or Library prefix is added to each class and component
• Make sure that all styles are added to each component. No styles added to wrapper elements
• No tag-based selectors. All styles should be added as classes to each element
• Each Form filed is uniquely named
• Do not use any CMS or Ecommerce bindings
• The Style Guide and Licensing pages exist and follow the guidelines
• The Library's Workspace profile is set to public

Creator agreement

Library designers agree to these points when adding their library to the Webflow Marketplace:

• If a library has any bugs we will remove the library from the Webflow Marketplace until the bugs are fixed by the creator.
• Libraries must be updated with the latest Webflow features.
• Affiliate links are not allowed in libraries. If affiliate links are found in a library, the library will be unpublished and reviewed for infringement.
• Creators are responsible for the graphic asset licenses used in the library. Images, icons and other graphic assets used in the library should be allowed for resale and redistribution by the copyright holder.
• If improperly-licensed images/assets are found in a library, the library will be unpublished and reviewed for infringement.
• Creators retain the rights to the library they sell on the Webflow Marketplace. They transfer these rights to the library customer as part of the Single Use License.