Summary:

Purpose

The purpose of the DARIAH-DE StyleGuideTemplate (SGT from now on) is to provide a basic template for all web applications that are part of the DARIAH-DE ecosystem.

Tip: If you are about to start developing a new DARIAH-DE application, by following the SGT the look & feel of your app is going to be consistent with the rest of the applications.

Tip: If you have already developed a DARIAH-DE application, you may want to adjust its layout so as to match the one described by the SGT.

Dependencies

This template does use external resources

    Fonts
  • Museo Sans Rounded: See here
  • Roboto: See here

Note, that Themify icons are defined as SVG symbols at the end of this html file. To extend with additional files, check the corresponding website, e.g. the SVG definition of the alert.

The design of the SGT uses SCSS which is compiled using the definitions in the gulpfile. If you want to change aspects of the design, have a look at this section.

How to use this template?

Clone the github repository and start adapting the template to your own application (e.g. integration with the template engine of your choice).

Where to start

The design and its elements are explained in German in the design-primer.de.md file in the root directory of the repository.

A good starting point is the collection of possible HTML elements. Using tools like the Web Inspector in Firefox or Chrome quickly shows how to use class attributes for changing the page behaviour.

Common exampels

  • To display the website without the navigation bar, one adds the attribute
    <body class="site -no-header">.
  • To hide specific elements from the nagivation bar, one adds the hidden class, e.g. to hide the search item
    <div class="search hidden">.
  • front-page-app.html shows an example starting page for a DARIAH tool.

What to change

  • the tool name (search for the <title> element)
  • the list of supported languages (search for <div class="language">...</div> in the HTML code)
  • the licence information (search for <div id="footer">...</div> in the HTML code)

What not to change

The DARIAH-DE Global Menu must remain unchanged (i.e. the dropdown menu in the top-right corner which is re-populated from a global JSON definition).

Included examples and content

Templates

The /templates/ directory contains the following template variants:

Resources

The assets and content directories contain all the files required by the SGT in order to display correctly.

The assets directory contains fonts, logos, the favicon, scripts and styles, whereas the content directory contains images.

If you move the assets or content directory make sure you change the path of links pointing to its content (e.g. js, css, icons, etc.).

Changing CSS design aspects

The design aesthetics can be found in the design-primer.de.md file in the root directory of the repository (currently only in German).

If not already availaible, install node.js, which comes with npm. Then, install all dependencies with npm i --dev from the root of the cloned repository.

You may also need to install gulp globally with npm i -g gulp.

The design is based on the definitions in the /scss and /js folders. Dependencies are listed in the package.json file. Destination folders for compilation can be changed in the gulpfile.js file.

Compile and watch

Compile SCSS to CSS by running gulp styles. Compile JavaScript with gulp scripts. Run gulp compile to execute the tasks above.

The default task, executed with just gulp, runs the compile task and watches for changes.

License

This design is licensed under the AGPL 3.0, by Torsten Schäfer with the following exceptions:

The included Museo Sans Rounded font is under a proprietary license and must not be used by other projects without an appropriate license.

The included Roboto font is under the Apache 2.0 license.

The included Themify icons are under the SIL Open Font License, their code under the MIT license. Included brand icons are copyright/trademarks of their respective owners.

Contact

This template was refined by Malte Vogl , Hanna Meiners and Klaus Thoden, based on a design by Tobias Schäfer.

Former versions of this template were packaged together by Matteo Romanello and based on the layout design by Patrick Heck.

For bugs, feature requests etc. please use the github issue tracker.