Giter Club home page Giter Club logo

dashboard-style-helpers's Introduction

Dashboard Style Helpers

What is this?

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

Where do I find the css helpers?

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

How do I set this up locally and edit a stylesheet?

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.

How do I use this to style dashboards?

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

I just need the button/header wipeout - what do I do?

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')

How do I use this to add text to dashboards?

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>

dashboard-style-helpers's People

Contributors

cmajel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.