What styles should I use in a DroneDeploy App?

111 Views Asked by At

When writing a DroneDeploy app, what styles should I use?

The app design guidelines specify that apps should follow a consistent design with the native DroneDeploy app. How do I know which styles are consistent with the native app?

disclosure: I am a developer on the DroneDeploy team, and this is a question we regularly get from developers on the App platform.

1

There are 1 best solutions below

2
ramblinjan On BEST ANSWER

Right now, the quickest way is to add this CSS file to the <head> of your index.html file in your app folder like so:

<link rel="stylesheet" href="https://s3.amazonaws.com/drone-deploy-plugins/templates/uikit/v1/styles.css">

Specifically, to follow DroneDeploy styles you can link to the same CSS as an example app.

Link to the same CSS as Example Apps

The above stylesheet link can be found in in the App Design Guidelines, specifically inside an example app:

If you stick to the CSS styles guidelines below and use the expandable app example here, you are on the right track.

Currently, the example app links to an external stylesheet that includes a set of default styles similar to a lightweight UI framework. It includes:

  • Typography
  • Form styles
  • A basic grid-system framework with .container, .row, and .col-* classes as explained in the app guidelines

As mentioned above, simply link to this file in your app as you would any other external stylesheet.