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.
This template does use external resources
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?
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.
- 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
The /templates/ directory contains the following template variants:
- front-page.html: A template for the front page in German.
- front-page-en.html : A template for the front page in English.
- front-page-app.html: A template for a DARIAH app front page in German.
- html-elements.html: A list of possible HTML elements.
- login.html: A template for a login page.
- news-post.html: A new post template.
- select-organisation.html : A template for the organisation selection.
- status.html: A template for the status page of the app.
- full-width.html: A template using the full-width of the browser window.
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
The default task, executed with just gulp, runs the compile task and watches for changes.
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.
For bugs, feature requests etc. please use the github issue tracker.