Choose Which CSS File(s) to load on each page(s) and CSS pages.

(Not to be confused with Magnification!)

I must purge redundant webflow.css into the following:

  1. webflow-master.css
  2. webflow-blog.css
  3. webflow-commerce.css
  4. webflow-gallery.css
  5. webflow-lp-00_main.css
  6. webflow-lp_01.css
  7. webflow-lp_02.css
  8. webflow-lp_03.css
  9. ...
  10. webflow-lp_127.css 
  11. custom-framework.css

(lp _xx is interchangeable with brand_xx, category_xx, ab_test_xx, etc)


How it works:

  • All haves have CSS Pill Buttons to select which CSS is applicable to the designer page
  • CSS Master shows up as BLUE (default) on the style panel Class selector.
  • CSS alt shows up as   VIOLET, RED, ORANGE, YELLOW, etc
  • Style Page for each CSS type will be created by default under Utility (under 404/password/search results pages)
    • Utility Pages
      • Password
      • 404
      • Search Results
      • Master Styles
      • Blog Styles
      • Commerce Styles
      • etc...
  • Custom CSS Styles can be edited in Utility pages and Pages with Custom CSS Style is enabled.
  • Auto Conflict Resolution (class names can not be shared between Master and Custom Styles)


Webflow Master CSS

  • This css file will apply to ALL pages in the whole project.
  • Can not disable on a page.
  • Can be used in conjunction with other CSS files or flattened to other css file (for example, flatten webflow-master.css + webflow-lp_01.css into webflow-lp_02.css


Webflow Blog CSS

  • Blogs typically have different styling than rest of website.
  • Served on Assigned CSS Template(s)





  • Miek Thompson
  • Mar 6 2019
  • +4