Code Embed

The Global Code Component

The custom code in the Global Code component allows styles to be applied on both the editing canvas and the published site. You can place your custom styles in the custom inside the Global Code component. Let's take a look at the overall structure.

CDN Option

To place the S2 Framework's base CSS by importing minified CSS from CDN:

Global Code code

js

S2 Base CSS: CDN code

css

/* S2 Framework: Base CSS — By CDN */

custom /* -- Global Custom Attributes -- */ /* -- Global Custom Styles -- */

Embed Option

To place the S2 Framework's base CSS by embedding directly on the page:

Global Code code

js

S2 Base CSS: Embed code

framework /* -- Base Setup -- */ /* -- S2 Attributes -- */ /* -- S2 Defaults -- */

css-animations /* -- CSS Animations -- */

custom /* -- Global Custom Attributes -- */ /* -- Global Custom Styles -- */

Page-specific CSS

For page-specific custom styles, place them inside css_page code embed.

css_page /* styles specific to a page */

Bonus: The below is a template of media queries that uses Webflow’s breakpoints.

/* media queries template */
/*
@media screen and (min-width: 1280px) {}
@media screen and (min-width: 1440px) {}
@media screen and (min-width: 1920px) {}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 479px) {}
*/

JavaScript

Unless a script needs to be placed as early as possible AFTER the body tag, or serves a special purpose for a Webflow Component, we recommend avoiding adding JavaScript directly to the canvas using Code Embed.

We recommend placing scripts in the site-wide or page-specific Head code or Footer code areas.

Always add a meaningful comment to your scripts.

For example: <!-- Icons in Profile Blocks --> <!-- Showing and hiding of icons inside Profile blocks according to the visitor's browsing history. -->