Fairdata UI components and style guidelines

This document defines components and style guides to be used in Fairdata services.

This component library is not tested together with any other common UI framework. Styles should not be colliding, but make sure that everything works properly if include some other stylings.

Components are written in SCSS. This project includes the Bootstrap grid system, no other external styles or JavaScript are involved in this project. As there is no jQuery or other Javascript involved in the components, any interactions, for example dismissable alerts needs to be implemented in the project utilizing the components.

Usage

To use predefined components, import builded css file and add required classes to your components. See available components bellow.

Plain HTML

Add contents of dist/ folder to root of your web server and add following inside head tag:

  
    <link href="/css/fairdata.css" rel="stylesheet">

CSS blob can be served from other directory as well, fonts are expected to be in fonts/ subfolder, in same level to fairdata.css.

Your folder structure should look something like:

  
    │   ...
    │   fairdata.css
    │   ...
    └───fonts
        │   Lato-Bold.ttf
        │   Lato-Regular.ttf

React

Add fairdata ui as dependency:

  
    npm install TODO --save

Import styles in your root component:

  
    import 'node_modules/blahblah/fairdata.css'

Vue.js

Add fairdata ui as dependency:

  
    npm install TODO --save

Development

If you want to customize the styles, it can be done by using a development server with Gulp.js and Browsersync. Development server provides this documentation page, where all the components are present. Gulp automatically compiles the SCSS, injects styles and hot reloads documentation page when changes detected. Gulp provides also a task to build and copy necessary files for production use.

Start customizing the styles with:

Docker

If you have Docker installed you can just build the image and start local development server by:


docker build -t fairdata-ui .
docker run -v "$(pwd)":/code --name fairdata-ui --rm fairdata-ui npm install
docker run -d -p 3000:3000 -v "$(pwd)":/code --name fairdata-ui --rm fairdata-ui

Now you should have the documentation running on http://localhost:3000

With Docker you can create the bundled css by (when development server running):


docker run -v "$(pwd)":/code  --rm fairdata-ui npm run build

Without Docker

Development workflow requires nodejs (v12 or later) and npm to be installed on your development machine. Install requirements and start local development server by:


npm install
npm start

Now you should have the documentation running on http://localhost:3000

A compiled version of styles can be done with npm run build.

Components

Alerts

Alerts can be used with any length of text and alerts can contain also links. Dismissable alerts are not available. Bellow is listed all implemented variations:

This is a primary alert!

This is a success alert!

This is a danger alert! Alerts can contain also links.

              
<div class="fd-alert fd-primary">This is a primary alert!</div>
<div class="fd-alert fd-danger">This is a success alert!</div>
<div class="fd-alert fd-danger">This is a danger alert! <a href="#">Alerts can contain also links.</a> </div>

Buttons

Fairdata component library defines some predefined button styles:

Regular buttons:


<button class="fd-button fd-primary">fd-primary</button>
<button class="fd-button fd-success">fd-success</button>
<button class="fd-button fd-danger">fd-danger</button>
<button class="fd-button fd-success disabled">Disabled</button>

All variations can be used as outline button with fd-outline- class prefix:


<button class="fd-button fd-outline-primary">Primary</button>
<button class="fd-button fd-outline-success">Success</button>
<button class="fd-button fd-outline-danger">Danger</button>
<button class="fd-button fd-outline-success fd-disabled">Disabled</button>

A button can be disabled by adding fd-disabled class to it.
Padding can be increased by adding fd-large class to ay button


<button class="fd-button fd-success large">Success large</button>

Card

Card implements a simple container for content. Card can include a title and any length of content.
Additional actions can be included to a card. Actions should contain one or more buttons. The buttons inside actions container will be adjusted properly for small screen width.

Card title

This is a cool card. Bellow is some actions:


<div class="fd-card">
<h1>Card title</h1>
<hr>
<p>This is a cool card. Bellow is some actions:</p>
<div class="actions">
  <button type="button" class="fd-button fd-outline-success">Action 1</button>
  <button type="button" class="fd-button fd-danger">Action 2</button>
</div>
</div>

Logout

This will end the active session for ALL Fairdata Services, not only for IDA

Content

Content of the page should be put inside of container. This container has specified max widths for different screen sizes and can be used as a container for grid system.

Add your content:


<div class="fd-content container">
<p>Page content here</p>
</div>

Links

Fairdata components include two text link styles:

Content link styling is used for links that appear within a paragraph of text or are otherwise assiciate with body text and thus receive the styling

This is a content link

    
      <a href="https://www.fairdata.fi" class="fd-link fd-link-content">This is a content link</a>

Footer link styling is used in the page footer to render lists of links to resources external to the given page context.

    
      <a href="https://www.fairdata.fi" class="fd-link fd-link-footer">This is a footer link</a>

Footer

Fairdata component library defines a sample footer to be used in Fairdata services. An example of footer can be found in the end of this documentation page. Footer is designed to fold properly across all screen widths.

Footer should be placed in the end of page. For layout to work properly footer, header and container should be inside an element with display: flex; and flex-direction: column;, as well with width and height of 100% related to the body.

Footer styles can be used independently from other Fairdata styles. Note that footer requires to have Bootstrap grid system, which is not included in the standalone verion of footer styles. Footer styles can be included form dist/footer.css and can be built with npm run gulp -- sass-footer

Official translations for footer texts are defined bellow and should be used if context is localized

English:

FAIRDATA

The Fairdata services are offered by the Ministry of Education and Culture and produced by CSC – IT Center for Science Ltd.

INFORMATION

Terms and Policies

Contracts and Privacy

ACCESSIBILITY

Accessibility statement

CONTACT

servicedesk@csc.fi

@fairdata.fi

What's new

Finnish:

FAIRDATA

Fairdata-palvelut järjestää opetus- ja kulttuuriministeriö ja toimittaa CSC – Tieteen tietotekniikan keskus Oy

TIETOA

Käyttöpolitiikat ja ehdot

Sopimukset ja tietosuoja

SAAVUTETTAVUUS

OTA YHTEYTTÄ

SEURAA

Swedish:

FAIRDATA

Fairdata-tjänsterna erbjuds av ministeriet för utbildning och kultur och produceras av CSC - IT Center for Science Ltd.

INFORMATION

Villkor och policyer

Kontrakt och integritet

TILLGÄNGLIGHET

Tillgänglighet uttalande

KONTAKT

servicedesk@csc.fi

FÖLJ

@fairdata.fi

Nyheter

If you prefer to use a four column footer instead of five columns, you need to update the column widths. The sum of widths and offsets should be equal to 12 on every breakpoint.


<div class="fd-footer container-fluid">
<div class="row no-gutters">
  <div class="col col-lg-4 col-md-12 col-sm-12 col-12">
      <span>FAIRDATA</span>
      <a href="https://www.fairdata.fi/en/fairdata-services/">
        <img width="175px" src="assets/Supporting_EOSC.jpg" alt="Supporting EOSC" class="logo"/>
      </a>
      <p>
          The Fairdata services are offered by the <strong>Ministry of Education and Culture</strong> and produced by<strong> CSC – IT Center for Science Ltd.</strong>
      </p>
  </div>
  <div class="col padding-right col-lg-2 col-md-3 col-sm-6 offset-lg-1">
      <span>INFORMATION</span>
      <p><a href="https://www.fairdata.fi/en/terms-and-policies/" target="_blank">Terms and Policies</a></p>
      <p><a href="https://www.fairdata.fi/en/contracts-and-privacy/" target="_blank">Contracts and Privacy</a></p>
  </div>
  <div class="col padding-right col-lg-2 col-md-3 col-sm-6 col-6">
      <span>ACCESSIBILITY</span>
      <p><a href="https://www.fairdata.fi/en/accessibility/" target="_blank">Accessibility statement</a></p>
  </div>
  <div class="col col-lg-2 col-md-3 col-sm-6 col-6">
      <span>CONTACT</span>
      <p><a href="mailto:servicedesk@csc.fi">servicedesk@csc.fi</a></p>
  </div>
  <div class="col col-lg-1 col-md-3 col-sm-6 col-6">
      <span>FOLLOW</span>
      <p style="display: flex; align-items: center;">
        <a href="https://bsky.app/profile/fairdata.fi" rel="noopener" target="_blank" title="Follow us on Bluesky">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 568 501" width="20px" style="margin-right: 4px; vertical-align: middle;">
                <path fill="#1185FE" d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"></path>
            </svg>@fairdata.fi
        </a>
      </p>
      <p><a href="https://www.fairdata.fi/en/news/" target="_blank">What's new</a></p>
  </div>
</div>
</div>

Header

Header should be placed in the start of page. For layout to work properly header, footer and container should be contained inside an element with display: flex; and flex-direction: column;, as well with width and height of 100% related to the body.

A basic header with logo can be added with:


<div class="fd-header container-fluid">
<div class="row no-gutter">
  <div class="col-md-10 col-sm-10 col-10">
      <img src="fairdata-logo.svg" alt="Fairdata logo" class="logo">
  </div>
</div>
</div>

Add pre-styled language selectors by adding following after the first column in header:


<div class="col-md-2 col-sm-2 col-2 language-selector-wrapper">
<div class="language-selector-container">
  <span class="language-choice" role="button" tabindex="0">fi</span>
  <span class="language-choice" role="button" tabindex="0">sv</span>
</div>
</div>

Layout

A basic Fairdata layout can be achieved with the header, footer and content components:


    <body>
        <div class="fd-header container-fluid">
            ...
        </div>
        <div class="fd-content container">
            <p>Page content here</p>
        </div>
        <div class="fd-footer container-fluid">
            ...
        </div>
    </body>

Cookies notification

A notification about cookies can be included to the page. Please refer to Fairdata SSO for including the notification on your page. This repository contains only styles for the notification.
Notification styles are available on dist/notification.css and can be used independently from other Fairdata styles. Notification styles can be updated by running npm run gulp -- sass-notification

Toggle the sample cookies notification:

English:

The Fairdata services use cookies and tracking to ensure security and quality.

View the Fairdata Privacy Policy.

Finnish:

Fairdata-palvelut käyttävät evästeitä ja seurantaa turvallisuuden ja laadun varmistamiseksi.

Katso Fairdatan tietosuojakäytäntö

Swedish:

Fairdata-tjänsterna använder cookies och spårning för att säkerställa säkerhet och kvalitet.

Se Fairdata sekretesspolicy (på engelska)

Logos

Fairdata component library includes logos in various resolutions for each Fairdata service and for essential external services and organizations, to be used in all services utilizing the common Fairdata styles.