Hello!

Congratulations! You're running the DC Styles project.
It includes everything you need to modify the DC stylesheets.

What's included

The npm dependencies included in package.json are:

Apart from package.json, the following files are included:

  • build.js browserify dependency bundler script
  • postcss.config.js css autoprefixer config
  • .gitignore common Git ignored files
  • index.html this HTML5 file
  • src/sass/main.sass a basic SASS file that imports Bulma and explains how to customize your styles, and compiles to dist/css/main.css
  • src/js/index.js an ES6 JavaScript file that compiles, and is minified, to dist/js/bundle.min.js
  • src/img/* logos, stakeholder logos etc that are optimized via imagemin to dist/img/
  • .babelrc configuration file for Babel. May be present, else configured in build.js.

If you want to learn more about the bulma framework, follow these links:

Bulma homepage

Documentation

How to use

Read the README.md in the git repo if you wish to commit code to the static build.

To use the style files in your project, include a link to the minified css in the <head> of your site. For most usecases, you'll want main-web.min.css. 

<link rel="stylesheet" href="[static-url]dist/css/min/main-web.min.css">
[static-url] is currently https://datacentral.survey.org.au/web/dcstatic/. This will change when the static files are hosted in a container rather than gitlab pages.
  • main-web.min.css contains styling for front-end react components (used for our main browser interface)
  • main.min.css configuration for the base bulma styling. Use this file instead of main-web if you do not need any additional js functionality and require ONLY the Bulma stylesheets.
  • main-api.min.css stylesheet for the browsable api (overrides some styles for djangorestapi)

dist/img/ contains the DC favicons, icons, logo variations and stakeholder logos. All have been optimized via imagemin (see the image-package script in package.json). For favicons, include the following 

<link rel="apple-touch-icon" sizes="180x180" href="[static-url]dist/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="[static-url]dist/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="[static-url]dist/img/favicon/favicon-16x16.png">
<link rel="manifest" href="[static-url]dist/img/favicon/manifest.json">
<link rel="mask-icon" href="[static-url]dist/img/favicon/safari-pinned-tab.svg" color="#db352e">
<meta name="theme-color" content="#ffffff">
DC uses Open Sans as its primary font face. Include the following: For clickable modals and tabs, plus JS interactivity for alerts, dropdowns, files, messages and a navbar, place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. <script type="text/javascript" src="[static-url]dist/js/bundle.min.js"></script> at the end of your site.

Important!

The JS included here is previously supplied by the dcauth app, and provides interactivity for modals and tabs. The extensive javascript powering the main DC interface is not included; it is javascript and/or react code relevant to the user interface elements interacting with the DC API and context provided by the django views, and does not make sense for other DC projects. If you wish to copy or adapt elements for your DC app, take a look at the dcapi repository directory web/web_application/core/assets/core/src/js/ for the full suite of front-end components and package implementations. The build process is governed by a (complex) gulp file, found at web/GulpFile.js

JS-enabled components

JS is not natively provided by Bulma, so all JS interaction is implemented in index.js. We include custom JS for Tabs and Modals (see below) and functionality for Alert, Dropdown, File, Message, Navbar Burger are imported from BulmaJS (using default Bulma html syntax).

Tabs
See tabs documentation for styling options.
one
two
three
<div class="tabs is-clickable is-boxed">
    <ul class="">
        <li class="tab is-active"><a href="#one">one</a></li>
        <li class="tab"><a href="#two">two</a></li>
        <li class="tab"><a href="#three">three</a></li>
    </ul>
</div>
<div class="tabs-content">
    <div class="tab-content is-active" id="one">one</div>
    <div class="tab-content" id="two">two</div>
    <div class="tab-content" id="three">three</div>
</div>
Modals
See modal documentation for styling options. 
<div id="my-modal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-content">
        <button aria-label="close" class="delete close-modal is-large is-pulled-right" data-modal-id="my-modal"></button>
        <div class="box">
            <article class="media">
                <div class="media-left">
                    <figure class="image is-64x64">
                        <img src="https://bulma.io/images/placeholders/128x128.png" alt="Image">
                    </figure>
                </div>
                <div class="media-content">
                    <div class="content">
                        <p>
                            <strong>John Smith</strong> <small>@johnsmith</small>
                            <small>31m</small>
                            <br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                            efficitur sit amet massa fringilla egestas. Nullam condimentum
                            luctus turpis.
                        </p>
                    </div>
                </div>
            </article>
        </div>
    </div>
</div>
Additional functionality

These components make use of the default Bulma syntax

Messages

Message title

I have to be manually dismissed.
Dropdown
File Upload