Breakpoints

Webflow offers 7 breakpoints.

Breakpoint Name	Abbr	Minimum Width	Maximum Width
XX-Large	1920	1920px	∞
X-Large	1440	1440px	1919px
Large	1280	1280px	1439px
Desktop (base)	D	992px	1279px
Tablet	T	768px	991px
Mobile Landscape	L	480px	767px
Mobile Portrait	P	-	479px

Goals;

• Allow some SA5 attributes to be enabled only on certain breakpoints

• Allow some SA5 attributes to be configured differently on different breakpoints

  • Utilize Webflow's natural "override from desktop" behavior here if possible

SA5 & Breakpoints

Some of SA5's attribute settings are breakpoint-aware, meaning that their configuration can be changed for specific breakpoints.

• In simple cases, we simply want to be able to switch on or off the attribute's behavior at specific breakpoints.

• In more complex cases, we may have breakpoint-specific configurations.

This leads to 3 classes of attributes;

Attribute type	Responsive enable/disable?	Responsive config?
Standard attributes ( Non-responsive )	-	-
Simple Responsive attributes	Yes	-
Complex Responsive attributes	Yes	Yes

Simple-Responsive Attributes

A Simple Reponsive attribute can be switched on or off using a special modifier;

*:bp = ( breakpoints list )

e.g. we might have sa-layout:bp = d+

The breakpoints list is a comma-separated list, defining the breakpoints which should be supported.

• Breakpoints can be listed in any order

• They must be comma-separated

• They are case-insensitive - D and d are identical

• They can be range-expanded using + and - modifiers

  • + meaning this breakpoint and larger

  • - meaning this breakpoint and smaller

Examples;

	1920	1440	1280	Desktop	Tablet	Landscape	Portrait
d+	Yes	Yes	Yes	Yes	-	-	-
d-	-	-	-	Yes	Yes	Yes	Yes
l-	-	-	-	-	-	Yes	Yes
1440+,t,p	Yes	Yes	-	-	Yes	-	Yes

Notes;

• Overlapping specifications are fine, but not recommended

  • e.g. 1280+,1920 is redundant, but will be processed fine

Complex-Responsive Attributes

Still under specification

On these attributes, that's achieved by adding a special suffix to the custom attribute name. For example, an attribute named sa-attr could have these suffixes.

These attributes are applied in a cascading fashion in the same way that breakpoints work within Webflow directly. However, if you have overlapping configs, they will be applied in the order specified with the last one taking precedence.

Ideas;

:bp - specify breakpoints this attribute applies on

sa-layout

sa-layout-target

sa-layout-pos = 5

sa-layout-pos:T = 4

sa-layout-pos:L = 3

Layout-sensitive elements

Re-execute on breakpoint changes

Configuration Blocks

`wfu-grid-equalheightrows:bp = ( breakpoints )

Combined Config Block

With breakpoint-specific sub-objects

<script type="application/sa5+json" name="foo">
{
  "@context": "https://attr.sygnal.com",
  "@type": "ConversionEvent",
  "@version": "0.1",
  "url": "https://conversion-tracker-url.com", 
  "transactionIdType": "query", 
  "transactionId": "transactionId",
  "type": "contact",
  "item": "",
  "1280": {
    "type": "contact",
    "item": ""  
  } 
}
</script>

Responsive Config Blocks

<script type="application/sa5+json" name="foo" bp="1280+">
{
  "@context": "https://attr.sygnal.com",
  "@type": "ConversionEvent",
  "@version": "0.1",
  "url": "https://conversion-tracker-url.com", 
  "transactionIdType": "query", 
  "transactionId": "transactionId",
  "type": "contact",
  "item": "" 
}
</script>

Technical Notes

SA6 might add core attribute foundations, e.g.

• Default attribute

• Configurable attribute ( can have a config block )

• Responsive attribute

• Responsive configurable attribute