Skip to main content

How do I add css to a page in V2

The V2 Page API does not allow the use of CSS in your pages.  All visual customization is done in the Design System Studio. 


If I want rounded corners an one wrapper, they have to be on all wrappers?


In a Design System you can create variants of all components and variables.  This lets you create a specific “Rounded Corner Wrapper”.  Give it a meaningful name and add usage information to its description.   Then in your pages you define the style variant used by each component.   One wrapper uses sharp corner variant,  One uses rounded.  As you like. 



This feels hacky so I’m not recommending it, but I have been able to get CSS inserted into the page with the Text component.  If you go to the Advanced tab, there is an HTML component editor and you can add a style tag with your CSS in it.  At least at the moment this seems to work ok. 

I’m finding that the Design System can get you reasonably started, but the options for fine tuning the components are limited.  Also, the components themselves are limited and several don’t have desirable behavior, such as the wizard component (https://community.skuid.com/t/wizard-navigation-in-spark). 

In addition, there are additional elements that are helpful to add to the page that are not part of the component library. For example we have a requirement for a progress bar and we’re leveraging jquery for this.  These “add-ons” often require CSS for styling.  Spark is still really new and I know there will be improvements coming but for now we’re focusing on exercising the framework out of the box as much as possible to learn the system while waiting for these improvements before building anything production ready.


Reply