S2 Framework
Clone S2 in Webflow
English
English
  • Welcome
    • S2 is flow simple!
    • Getting Started
  • How to use the Cloneable?
  • Guide & Documentation
    • Basic Concepts
      • Styling in Webflow
      • Utility Classes
      • Units
      • Fluid Typography
    • Variables
      • Colors vs Palettes
      • Colors in S2
      • Text
      • Variable Groups
    • Naming Strategies
      • Class Naming
      • Other Naming Strategies
      • Naming Custom Attributes
    • Structure
      • HTML Structure
      • Global Code
    • S2 Attributes
    • S2 Components
  • Editions
    • Build your own S2
      • One-page Style Guide
      • Lite Edition
  • More
    • FAQs
    • Ready to switch to S2?
      • Frameworks Comparison Overview
      • From Client-First
      • From MAST or The Saddle
      • From Lumos
    • Tools and Resources
    • Read More
      • Foundations of S2
      • Our Approaches
  • Links
    • 🤘Clone in Webflow
    • 🪵Changelog & Roadmap
  • Copyright & Terms
Powered by GitBook
On this page
  1. Editions
  2. Build your own S2

One-page Style Guide

This is a streamlined one-page version of the S2 Framework without custom code. You can customize it to make it your Style Guide.

PreviousBuild your own S2NextLite Edition

Last updated 1 day ago

Are you a template creator? Since Webflow does not allow custom code to be embedded in templates, this one-page version is perfect for you. It is essentially a one-page Style Guide that fully complies with Webflow’s marketplace submission , making your template creation process faster, more organized, scalable, and easy to maintain for anyone.

Let's follow these steps:

  1. Go to Site settings, then Custom code, and remove all the code from the global Head code and Footer code. Remember to click "Save".

  2. Open Designer, make the "Home" page your homepage, and remove DELETE-ME from the page.

  3. Delete all pages, except:

    • Your new blank homepage

    • The "One-page Style Guide" page

    • The "Licenses" page

    • The "Password" and "404" pages

  4. Remove the Global Code component on the "Password" and "404" pages.

  5. Go to the "One-page Style Guide" page and remove the S2: Clone Now CTA component. The Grid Guide component also consists of custom code, but you may keep it as a tool and remove it later.

  6. Optional: Remove Dark mode from the Colors variable collection.

  7. Clean up all unused Components.

  8. Clean up all unused interactions.

  9. Clean up all unused styles.

Congratulations! You are now ready to start building.

🎉
requirements