How do I add css to a page in V2

  • 1
  • Question
  • Updated 6 months ago
How do I add css to a page in V2
Photo of Bill Fox

Bill Fox

  • 8,880 Points 5k badge 2x thumb

Posted 6 months ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
The V2 Page API does not allow the use of CSS in your pages.  All visual customization is done in the Design System Studio. 
Photo of Bill Fox

Bill Fox

  • 8,880 Points 5k badge 2x thumb
If I want rounded corners an one wrapper, they have to be on all wrappers?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
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. 
Photo of John Dahlberg

John Dahlberg, Champion

  • 4,316 Points 4k badge 2x thumb

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/skuid/topics/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.

(Edited)