Knowledge base | WrapBootstrap

Themes and templates

Following the guidelines described on this page will help to ensure that your item is approved. Failure to follow the guidelines will result in rejection or the need for re-submission after fixes are applied.

The terms MUST, MUST NOT, SHOULD, SHOULD NOT, and MAY when in uppercase are used in accordance with RFC 2119.

Last updated 2014-05-22 - Changelog

  1. Bootstrap framework compliance
  2. Source code quality
  3. Design quality and consistency
  4. Item data conventions
  5. Item screenshot
  6. Live preview
  7. Licenses and attribution

1. Bootstrap framework compliance

  • 1000 Item MUST use the latest stable release version of Bootstrap. Item MUST NOT use work-in-progress or release candidate versions.
    • Clarification: CDN-hosted versions are not permitted.
  • 1001 Item MUST follow Bootstrap's conventions for fundamental HTML elements and use the grid system.
    • Clarification: Tables, forms, buttons, images, typography and other parts of your design must be constructed in accordance with the Bootstrap documentation. Do not include helper classes that duplicate functionality found in Bootstrap.
  • 1002 Item MUST use and restyle Bootstrap's components and JavaScript plugins.
    • Clarification: Item must use and restyle all or the majority of Bootstrap's components and plugins to provide sufficient coverage of the framework. Include one or more pages that showcase the selection of restyled components for use within the item.
    • Exceptions:
      • Items added to the Components category on WrapBootstrap.
      • Minimal templates such as "coming soon" pages are not required to restyle all or the majority of Bootstrap's components and plugins.
  • 1003 Item SHOULD NOT implement custom components or JavaScript plugins that duplicate functionality provided by Bootstrap.
    • Clarification: Components and plugins such as breadcrumbs, pagination, labels, alerts, progress bars, dropdowns, tabs, modals, etc. must not be re-implemented with custom or third-party code unless there is sufficient reason to do so.
    • Exceptions:
      • When it is not possible to achieve a specific visual style, effect, or functionality using the standard components and plugins.
  • 1004 Item MUST NOT include pages based on Bootstrap's example templates without sufficient modification.
    • Clarification: Elements from the Bootstrap documentation may be included in your item but only on pages that specifically showcase how the individual elements are styled by the item and must not be used throughout the design.

2. Source code quality

  • 2000 Files and directories MUST be treated as case-sensitive.
    • Clarification: Web servers and many operating systems treat files and directories as case-sensitive. Referencing files or directories inexactly in your source will result in "404 Not Found" errors.
  • 2001 Static HTML templates MUST use index.html as the filename for the index/default page.
    • Clarification: All other pages must also use the .html extension.
  • 2002 Item MUST store styles and scripts in files separate from the Bootstrap assets.
    • Clarification: Styles and scripts must be stored in external files apart from the markup. Inline scripts and styles are not permitted except when absolutely necessary. When possible, create separate files for scripts that apply to only one page or to very few pages within the item.
  • 2003 HTML MUST be valid HTML5 as determined by the W3C Markup Validation Service.
    • Clarification: File character encoding must be utf-8 and must be declared at the top of the <head> section as utf-8 before the page title and other metadata. Files must not begin with a byte-order mark.
    • Exceptions:
      • Non-standard use of the rel attribute.
  • 2004 Markup, styles, and scripts MUST be neatly formatted with proper, consistent indentation and consistent use of tabs or spaces.
    • Clarification: Mixing tabs and spaces for indentation within the same file is not permitted.
    • Exceptions:
      • Items that make use of individual templates to construct the final pages are not required to have globally consistent indentation but must have consistent indentation with each of the templates. Examples include CMS-based templates such as WordPress and Joomla themes and client-side templates implemented in JavaScript.
  • 2005 Item MUST be completely free of JavaScript errors.
    • Exceptions:
      • Permission denied to access property 'toString' (Firefox)
  • 2006 Markup, styles, and scripts MUST NOT be obfuscated or encrypted.
    • Exceptions:
      • Minifying styles and scripts is not considered obfuscation.
  • 2007 Item MUST include the original/non-minified versions of assets.
    • Clarification: Items including minified versions of custom or third-party styles and scripts must also include the original/non-minified versions.
  • 2008 A fallback font MUST be declared in your styles for all text.
    • Clarification: Some operating systems (for example, certain Linux distributions) do not ship with fonts commonly used on the web. Ensure that all font stacks end with an appropriate fallback such as serifsans-serif, or monospace.
  • 2009 Item MUST NOT use CSS frameworks with features and functionality that overlap or conflict with Bootstrap.
  • 2010 Item SHOULD make use of CSS pre-processors.
    • Clarification: Item description and documentation must include notes about the use of CSS pre-processors in the construction of the item.
    • Examples:
  • 2011 Item MAY make use of HTML pre-processors.
    • Clarification: Item description and documentation must include notes about the use of HTML pre-processors in the construction of the item.
    • Examples:
  • 2012 Item MAY make use of JavaScript pre-processors.
    • Clarification: Item description and documentation must include notes about the use of JavaScript pre-processors in the construction of the item.
    • Examples:
  • 2013 Item MAY make use of JavaScript templating languages and web application frameworks.
  • 2014 Item MUST NOT include third-party plugins and components without sufficient modification to their appearance.
    • Clarification: While use of third-party plugins and components in the construction of an item is permitted, the item must not include them in the design without altering the default appearance set by the vendor. Plugins and components must be styled to fit the appearance of the design.
  • 2015 Item MUST NOT make use of CSS resets.
  • 2016 Item MUST NOT hotlink assets from third-party servers.
    • Clarification: Images and placeholders must be bundled with the item and may not be hosted on third-party servers.
    • Exceptions:
      • Non-image assets may be linked from CDN servers.
  • 2017 Item source code, comments, and text that appears in the design MUST be written in English.
  • 2018 Item MUST include documentation or help files to assist the end-user with customization and installation (when applicable).
    • Clarification: Item documentation and help files should include information about how to add/edit/remove specific elements, create new pages, apply styles to elements, and must include information about third-party assets used in the construction of the item. It must not be assumed that the end-user possesses advanced knowledge of web development. When applicable, documentation must also include information about how to install the item on the specific platform it is built for. Documentation must also include the changelog for each version.

3. Design quality and consistency

  • 3000 Design MUST display high aesthetic quality, visual appeal, and should be attractive enough to compete on WrapBootstrap.
    • Clarification: Over time the expectation to deliver higher quality designs to customers increases. New items and item updates are expected to meet or exceed the current level of quality in order to ensure those expectations are met.
    • Example issues:
      • 3000.1 Design is too similar to existing items.
      • 3000.2 Displays inconsistent use of spacing/padding or line-height affecting typography and element placement.
      • 3000.3 Uses unattractive, watermarked, or overly compressed imagery and textures.
      • 3000.4 Colors used do not compliment each other.
      • 3000.5 Elements are misaligned or not placed in a consistent manner.
  • 3001 Item MUST employ consistent branding.
    • Clarification: The name of the item as seen from within the item and documentation (in both images and text) must match the name displayed on WrapBootstrap in the item name field and the item description field.
  • 3002 Design MUST display properly at common mobile device and desktop screen widths:
    • Clarification: With hundreds of devices and configurations it is necessary to test each page against as many of them as possible. If you are unable to test against a physical device or desktop screen size then use a software-based approach to test against various configurations. Simulation is not always accurate but can help to identify major issues.
    • Mobile device screen widths:
      • 320px
      • 360px
      • 480px
      • 568px
      • 600px
      • 640px
      • 768px
      • 800px
      • 1024px
    • Desktop screen widths:
      • 1280px
      • 1366px
      • 1440px
      • 1680px
      • 1920px
      • 2560px
  • 3003 Design MUST NOT exceed the width of the screen at any common screen width.
    • Clarification: When a design exceeds the width of the screen, elements are pushed off-screen, scrolling on mobile devices is affected, and horizontal scroll bars appear. See #3002.
  • 3004 Design MUST be tested in several browsers to ensure compatibility.
    • Clarification: Bootstrap provides a grid showing its official compatibility with various browsers and operating system combinations. If you do not have access to specific versions of Internet Explorer then you can test compatibility using software provided by Microsoft at Modern.IE.
    • Test compatibility for:
      • Internet Explorer 8/9/10/11
      • Latest Chrome
      • Latest Firefox
      • Latest Safari
      • Latest Opera
  • 3005 Design, documentation, and item description MUST NOT contain spelling or grammatical mistakes.
    • Clarification: While simple spelling and grammatical mistakes typically do not affect the functionality of an item, they can give the impression that there is a lack of attention to detail. Spelling mistakes within the source code (such as class names) must be fixed.
  • 3006 Images intended to span the full width of the screen MUST be at least 1920px wide.
    • Examples:
      • Non-tiling background images.
      • Images used in sliders.
  • 3007 Large images MUST be compressed to transfer quickly over the web.
    • Clarification: It is important that images are compressed enough to allow them to transfer quickly but they must not be compressed so highly that there is a noticeable degradation of image quality.
  • 3008 Item MUST NOT contain violent imagery, overly-sexualized imagery, or nudity.
  • 3009 Item MUST NOT contain racial slurs, hate speech, or otherwise inappropriate/offensive language.

4. Item data conventions

Name

  • 4000 Name MUST be unique on WrapBootstrap.
    • Clarification: It is important that the item's unique name is not already used by another item on WrapBootstrap. When a name is not unique it can cause confusion and branding issues.
  • 4001 Name SHOULD follow the format [unique name] [separator] [short description]
    • Clarification: Acceptable separators: Hyphen (-), vertical bar (|), colon (:), and tilde (~)
    • Example:
      • MyItem - Responsive Business Theme
  • 4002 Non-static HTML templates MUST include the name of the CMS or backend software that the item is built for.

Description

  • 4100 Description MUST be written in Markdown syntax.
    • Clarification: HTML is escaped and does not render on item pages.
  • 4101 Description MUST contain bulletpoint lists of features and pages included in the item.
  • 4102 Description MUST contain attribution links for third-party assets used in the construction of the item.
  • 4103 Description MAY contain images.
    • Examples:
      • Additional screenshots
      • Marketing images
  • 4104 Description MUST NOT contain violent imagery, overly-sexualized imagery, or nudity.
  • 4105 Description MUST NOT contain racial slurs, hate speech, or otherwise inappropriate/offensive language.
  • 4106 Description MUST be written in English.
  • 4107 Updated item versions MUST include a detailed changelog in the description and documentation bundled with the item.

5. Item screenshot

  • 5000 Screenshot MUST be 600x375 pixels in 24-bit PNG format. File size MUST be under 600KiB.
    • Clarification: Screenshots will be rejected if they are distorted, if they were previously saved in a lossy format (for example, JPEG or 8-bit PNG), or if they contain flaws such as part of the browser UI.
  • 5001 Screenshot MUST show the top portion of the index/default page without OS or browser UI, marketing text, or other imagery.
  • 5002 Screenshot MUST NOT be cropped or zoomed-in.
  • 5003 Screenshot MUST be kept up-to-date and reflect the item at its latest approved version.

6. Live preview

  • 6000 Live preview MUST NOT employ redirects or use URL shorteners.
    • Clarification: The URL entered for the live preview must already be fully resolved to its final destination.
  • 6001 Live preview MUST exactly represent the item for sale at its latest approved version.
    • Exceptions:
      • Style/color switchers not intended for production use.
      • Introduction pages used for accessing different variations of the item design.
  • 6002 Live preview MUST NOT employ source code obfuscation or encryption.
    • Clarification: See #2006
  • 6003 Pending item versions MUST be uploaded to a different live preview URL.
    • Clarification: It is not necessary to host the live previews of every past version of an item. It is only necessary to host a live preview for the current approved version and for the pending version.
  • 6004 Live preview MUST consistently load quickly and without error.
    • Clarification: If an item's live preview delivers content too slowly or experiences frequent downtime then a new live preview URL will be needed or an item will not be able to remain on WrapBootstrap.
  • 6005 Live preview MAY use web analytics and visitor tracking scripts.
    • Clarification: Analytics and visitor tracking scripts deployed must not be visible on pages. For example, tracking that shows as an image on pages are not permitted.
  • 6006 Live preview MUST NOT remove the WrapBootstrap preview frame or contain a separate frame that is not part of the item.
  • 6007 Live preview MUST NOT advertise items for sale outside of WrapBootstrap or contain any other form of advertising.
    • Clarification: Live previews must not link to pages or websites that link to other marketplaces or items for sales from other sources, including items for sales from your own website.
  • 6008 Live preview MUST NOT contain WrapBootstrap or third-party affiliate referral links and may not link to pages that contain such links.
  • 6009 Live preview MUST NOT contain links to websites or pages that are not part of the live preview.
    • Exceptions:
      • Frameworks and software used in the construction of the item
      • Attribution links to third-party assets
      • Your website and social media profiles (when not in conflict with #6007 and #6008)
      • Your profile on WrapBootstrap
  • 6010 Live preview SHOULD NOT contain links to item documentation.

7. Licenses and attribution

  • 7000 Third-party assets used in the construction of your item MUST be properly licensed or free for commercial use.
    • Examples of third-party assets:
      • Plugins and components
      • Textures, photographs, and other images
      • Icons and other glyphs
      • Fonts
      • Sounds, videos, and music
      • Source artwork (for example, .psd and .ai files)
  • 7001 Item description and documentation MUST include attribution links to third-party assets.
    • Clarification: Attribution must include the name of the author, the type of license the file is distributed under, and a direct link to the asset online.
  • 7002Item MUST NOT include third-party assets in the zip file that are not licensed for distribution.
    • Clarification: Some third-party assets allow for their use in commercial products but do not allow you to bundle them with your item (for example, certain .psd files). Those assets should be linked to in the documentation provided with the item and must not be included in the zip.

Changes to the submission guidelines

2014-05-22

  • Added additional mobile device screen widths and removed some outdated widths (#3002)

2014-05-15

  • Added additional mobile device screen widths (#3002)

2014-02-25

  • Removed #1004
  • Reordered #1005 → #1004