Global Code

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 css_custom inside the Global Code component. Let's take a look at the overall structure.

Apply the S2 Framework's base CSS by importing minified CSS from CDN.

Global Code code

- Framework Base CSS css

- Icon Libraries css

css_custom /* -- Global Custom Attributes -- */ /* -- Global Custom Styles -- */

How can I switch to the "embed option" globally?

Click into the Global Code component and switch the visibility setting from CDN to Embed options to apply it globally.

Page-specific CSS

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

css_page /* styles specific to a page */

Here 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 whenever possible.

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