This is a repo of css helpers to make Superset dashboard styles more consistent.

CSS helpers can be found in app/css and are also accessible via github pages for import.

The helpers are built with Stylus, a CSS preprocessor, and then compiled to CSS via gulp.

To set up the repo:

• clone the repo
• npm i
• gulp - this will listen for changes to your .styl files and compile changes.

In app/styl you will find the stylus files where you can make edits. They will automatically be compiled into CSS via Gulp.

There are 2 templates that have been created for styling Superset dashboards in this repo:

• For editing, all styles but show chart controls: This provides all the dashboard styling while retaining the chart controls so you can continue editings.

 * In Superset, this can be activated by picking the Authoring Dashboard CSS - no button wipeout option

• In this repo, you can adjust this template by editing dashboard--master--no-button-wipeout.styl

• For production, all styles and hide chart controls: This provides all the dashboard styling and also hides the chart controls and superset header.

  • In Superset, this can be activated by picking the Authoring Dashboard CSS - with button wipeout option
  • In this repo, you can adjust this template by editing dashboard--master.styl and its associated files

You can add the button wipeout by calling this css in superset:

@import url('https://massgov.github.io/dashboard-style-helpers/app/css/dashboard--wipeout-buttons.css')

Here is how you create a text slice within Superset.

• Create a new markup slice: You can do this by either creating a new one or saving an existing markup slice with a new name.
• Pick html under the code settings
• Open the code editor and copy in the stylesheet import at the top:

  <style type="text/css" scoped>
        @import url('https://massgov.github.io/dashboard-style-helpers/app/css/dashboard--type-styles.css');
  </style>

• Below that, start writing your HTML. You can use this starter block to get started. 99% of the styles are applied to default tags rather than by class. The one exception is for the text-wrapper which can be applied to a div to constrains the width of a text container so it is more readable.

    <h1>I am a H1. I should be used for the dashboard title </h1>

    <h2> I am a H2. I should be used to start a section of a dashboard. </h2>

    <div class="text-wrapper">

        <h3> I am a H3. You should use me for subheadings within a section.</h3>

        <p>I am a p tag. You can use me for any of your descriptions. You can also <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">add links with an a tag</a>, or <i>italicize text</i> with <a target="_blank"  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i">the i tag</a>, or <b>bold text</b> with <a target="_blank"  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b">the b tag.</a></p>

        <p>Create new paragraphs with a new set of tags. Here is an example of an unordered list built with <a target="_blank"  href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul"> the ul tag</a>:</p>

       <ul>
          <li>This list is great.</li>

         <li>I am also great.</li>
        </ul>

       <p>You can also do ordered lists with the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol"> the ol tag</a>:</p>

        <ol>
         <li>This list is great.</li>

         <li>I am also great.</li>
        </ol>

• You can also reference these demo docs as rendered HTML here, or, if you'd like to see the raw files, you can find them as raw HTML here.