All settings for spx components are applied using attributes. These are no different to attributes for standard HTML elements.
The above code would output a masonry layout of images that spans four columns, with a gap of 2% between images. The number of columns will reduce to 2 when the screen size is under 1000px and to 1 when under 600px.
Every component has different possible attributes that can be applied. Please head to the individual components to find out more.
Components which are not purely functional can also be styled using CSS variables. The variable names correlate with their attribute counterpart like this:
That would create a gap of 10px between all images of all existing masonry components on the site. If you want to target a specific instance, you could give an ID or class to the component:
While it is technically possible to style the components directly and without CSS variables, it is not recommended. Since all CSS is generated dynamically, random classes are being applied by the CSS-in-JS engine (spx is using Emotion ). These classes change depending on the applied attributes. CSS variables are also future-proof in case components will be switched over to use the new Shadow DOM API .
On top of that, some component attributes apply the same value to many different properties for the element to function correctly, making styling without CSS variables not a viable option.
Besides variables for all individual components, some general design tokens that affect all components.
Please note that all builder elements use a different system for the font-family and font-size and are thus not altered by the above values.
Creating responsive designs using spx components is straight forward with the help of CSS variables.
Some components can be styled using varying methods. If the styling attribute is present on a component, up to three different techniques are available:
Styles are applied using CSS attributes.
In this mode, a value will responsively scale up or down in a linear fashion depending on a set min and max value.
Great for a utility-first workflow using a library like Tailwind. Please refer to the component docs for all possible class slots.
While many of the components will work without WordPress, the true, time-saving power of spx comes from using it in conjunction with the provided PHP helper functions. At the moment, helper functions exist for the masonry and navigation component. The navigation component only works using the helper function.
This will automatically create a masonry layout from the ACF gallery!
Helpers are also available as non class-based functions:
Some components have certain slots that can be filled with custom markup. For example, the accordion can be filled with custom slots for the header and content.
The above code would start the animation of the typewriter component. Methods come in handy when trying to interact with other libraries and functions.
To counteract this, it is possible to specify a list of body classes, which, when present, will load the necessary assets for components to function correctly.