Custom Code

The "Global-Code" Component

The custom code in the Global-Code component allows styles to applied on both the editing canvas and the published site. You can place your custom styles in the 04_custom inside the Global-Code component.

Let's take a look at the overall structure:

Global-Code
code
js
01_framework /* -- Base Setup -- */ /* -- (1) S2 Attributes -- */ /* -- (2) S2 Colors & Palettes -- */ /* -- (3) S2 Defaults -- */
02_css-animations /* -- CSS Animations -- */
03_modes /* -- Styles for Modes -- */
04_custom /* -- Global Custom Attributes -- */ /* -- Global Custom Styles -- */

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

css_page /* styles specific to a page */

Below is a template of media queries that use 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) {}
*/

JS

Unless a script needs to be placed as early as possible AFTER the <body> tag or serves a specific purpose for a Webflow Component, avoid adding scripts directly to the canvas.

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

Always add a meaningful comment to your scripts.

For example:  

PreviousHTML Structure NextS2 Attributes

Last updated 10 days ago