Global Code

The Global Code Component

The custom code in the Global Code component allows styles to be applied not only to the published site but also to your editing canvas.

Let's examine the overall structure of the Global Code component:

Global Code

Base Setup css

S2 Attributes & Colors css by CDN

CSS Animations css

Custom Styles css

Custom Attributes css

Icon Libraries

code_ph-icons ... default enabled

code_fa-icons ... default enabled

code_bx-icons

code_lni-icons

Our modular approach to custom CSS within the Global Code component makes everything easy to manage. Each module works like a plugin, and you can remove any part that is not useful for your project.

• Base Setup: Core style configs and resets.

• S2 Attributes & Colors: S2 Attributes is a lightweight library of predefined attributes to help you work faster. Colors & Palettes uses the framework's Colors and Palettes variables as attributes.

• CSS Animations: A set of basic but useful CSS animation attributes.

• Custom Styles: Global custom styles for enhancements and some S2 Framework features.

• Custom Attributes: Essential global custom attributes that can be configured as needed.

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.