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. 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, there are some general design tokens that affect all components. Of course, these can be freely reassigned to match your current project.
Creating responsive designs using spx components is straight forward using the following two options:
Drop these into your CSS file or add them as inline style tags.
Every data attribute that starts with bp- will automatically be added to the responsive options. The number after the dash indicates the screen size (in pixels) when the new settings should be applied. (mobile-first)
The following code is the equivalent of the example from above:
Keep in mind that the content inside the attributes has to be a valid JSON object and thus needs to be enclosed by single quotes.
Responsive attributes have the big advantage that every component property can be changed depending on the current screen size, even ones that don't have a CSS variable counterpart! This means that you can create fully responsive versions of components without ever leaving the markup of the page.
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.
Since version 4.0, it is now possible to define your own Tailwind config and overwrite the standard configuration by naming your object spxTailwindConfig.
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, slider, slideshow (spxGetImages) and navigation (spxGetNavigation) component. The navigation component only works using the helper function.
This will automatically create a masonry layout from the ACF gallery!
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.