add new styleguide to current git

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{package.json,*.yml,*.yaml,.stylelintrc}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -4,7 +4,7 @@
 
 The goal of this template is to facilitate the development of interfaces for web tools that are part of the DARIAH-DE ecosystem.
 
-This template complements the report [R. 1.2.2/R. 7.5 *Usability Criteria for External Requests of Collaboration*](https://wiki.de.dariah.eu/download/attachments/14651583/R1.2.2-7.5_final.pdf?version=1&modificationDate=1452850842838&api=v2), specifically the *DARIAH-DE Style Guide* contained in the Appendix. 
+This template complements the report [R. 1.2.2/R. 7.5 *Usability Criteria for External Requests of Collaboration*](https://wiki.de.dariah.eu/download/attachments/14651583/R1.2.2-7.5_final.pdf?version=1&modificationDate=1452850842838&api=v2), specifically the *DARIAH-DE Style Guide* contained in the Appendix.
 
 ## How to view this template?
 
@@ -13,8 +13,16 @@ This template complements the report [R. 1.2.2/R. 7.5 *Usability Criteria for Ex
 3. launch a web server from terminal with `python -m SimpleHTTPServer 8000`
 4. open `localhost:8000` in a browser
 
+To view the previous styleguide version, `cd` to `templates/StyleGuide_v100` and launch
+the webserver from that directory.
+
 or just check it out at <http://dariah-de.github.io/StyleGuideTemplate/>
 
+## Desgin Primer
+
+For tips and guidelines on the extension of this template, have a look at
+the [Design-Primer](design-primer.de.md)
+
 ## Contact
 
 This template was packaged together by [Matteo Romanello](https://github.com/mromanello) and is based on the layout design by [Patrick Heck](https://github.com/patrickheck).

design-primer.de.md

@@ -0,0 +1,116 @@
+# DARIAH-DE Theme 2018 Design Primer
+
+## Layoutelemente und -varianten
+
+Alle Seiten sind aufgebaut aus einer Kopfzeile, einem Logo, dem Inhaltsbereich und einer Fußzeile. Das Layout ist [normalerweise bis zu 1200 px breit](https://tschaef.github.io/dariah-de-2018-mockups/mockups/front-page.html). Zusätzlich ist eine [Layoutvariante mit unbegrenzter Breite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/full-width.html) verfügbar.
+
+Alle Layouts sind responsive mit 4 Breakpoints, was bei Anpassungen beachtet werden sollte. Für Details dazu siehe [`settings.scss`](https://github.com/tschaef/dariah-de-2018-mockups/blob/gh-pages/scss/util/settings.scss) und die [verwendeten Media-Queries](https://github.com/tschaef/dariah-de-2018-mockups/search?q=media&type=&utf8=%E2%9C%93).
+
+### Kopfzeile
+
+Für die Kopfzeile bestehen 2 Varianten:
+1. mit Navigation und/oder weiteren Inhalten ([Beispiel](https://tschaef.github.io/dariah-de-2018-mockups/mockups/front-page.html))
+2. Zierleiste ohne Inhalt ([Beispiel](https://tschaef.github.io/dariah-de-2018-mockups/mockups/html-elements.html))
+
+Variante (1) enthält:
+
+- Website-Navigation
+- Sprachauswahl
+- Login (auf DARIAH-DE nicht benötigt, dennoch als Beispiel integriert)
+- Suche
+- DARIAH-DE-Menü (auf allein Websites identisch)
+
+Variante (2) ist ein schmaler blauer Balken ohne Interaktionsmöglichkeit.
+
+### Logo
+
+Auch das Logo gibt es in 2 Varianten:
+
+1. volle Größe mit Projektname ([Beispiel](https://tschaef.github.io/dariah-de-2018-mockups/mockups/front-page.html))
+2. klein ohne Projektname ([Beispiel](https://tschaef.github.io/dariah-de-2018-mockups/mockups/news-post.html))
+
+Das Logo in voller Größe (1) kommt nur auf der Hauptseite zum Einsatz.
+
+Auf Unterseiten wird hingegen die kleine Variante (2) verwendet, wobei der SVG-Code identisch ist, jedoch der ausgeschriebene Projektname verdeckt wird. Zusätzlich erscheint eine Trennlinie zwischen Logo und Seitentitel.
+
+Soweit es das Design des Logos zulässt, soll es zu einem kleinen Teil in die Kopfzeile hineinragen, wobei der überlagernde Teil von einem weißen Rand umgeben wird. Hierfür gibt es keine festen Werte, jedoch ist darauf zu achten, dass ausreichend Abstand zwischen den Inhalten der Kopfzeile und dem Logo besteht. Das Logo selbst darf nicht verändert werden, um zu vermeiden, dass vom Originallogo abweichende Varianten online zu finden sind. Vielmehr wird dafür separater SVG-Code hinzugefügt.
+
+## Farben
+
+Die Grundlage bilden 3 dem DARIAH-DE-Logo entnommene Farben:
+
+1. `#213365`
+2. `#494e7d`
+3. `#727299`
+
+Farbe (1) wird als Hintergrund für die Kopfzeile sowie für Überschriften erster Ebene (`<h1>`) verwendet. Farbe (2) wird für Links, dynamische Elemente und Buttons, Farbe (3) für Überschriften zweiter und dritter Ebene (`<h2>` und `<h3>`) eingesetzt.
+
+Normaler Text erscheint in `#333`, heller Text sowie alle übrigen Überschriften in `#707070`.
+
+Hinzu kommen aus Farbe (2) abgeleitete Hinweisfarben:
+
+- `#446521` für Erfolgsmeldungen
+- `#655321` für Warnungen
+- `#652122` für Fehler
+
+Ränder und Trennlinien erscheinen in `#ccc`.
+
+Hervorhebung erfolgt durch leichte Aufhellung. Dafür siehe [`settings.scss`](https://github.com/tschaef/dariah-de-2018-mockups/blob/gh-pages/scss/util/settings.scss) und die Effekte auf [dieser Seite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/news-post.html).
+
+## Typografie
+
+Überschriften erster und zweiter Ebene (`<h1>` und `<h2>`) werden im Font _Museo Sans Rounded_ mit der Stärke 500 gesetzt. Dasselbe gilt für Buttons, wobei nur Großbuchstaben (`text-transform: uppercase`) verwendet werden.
+
+Für alle anderen Überschriften und Fließtext kommt _Roboto Light_ (Stärke 300) zum Einsatz, für fette Passagen _Roboto Medium_ (Stärke 500).
+
+Basisschriftgröße ist 16&nbsp;px, kleiner Text erscheint in 14&nbsp;px. Die Schriftgrößen von Überschriften stehen im Verhältnis 5:4 (»große Terz«) zur Basisschriftgröße.
+
+Für gute Lesbarkeit sollten Textzeilen nicht breiter sein als 720&nbsp;px, was bei Roboto in 16&nbsp;px etwa 100 Zeichen entspricht.
+
+Autoren sollten nur `<h2>` bis `<h6>` vergeben können, nicht jedoch `<h1>`.
+
+Für mehr Details siehe [`fonts.scss`](https://github.com/tschaef/dariah-de-2018-mockups/blob/gh-pages/scss/util/fonts.scss) und [`settings.scss`](https://github.com/tschaef/dariah-de-2018-mockups/blob/gh-pages/scss/util/settings.scss) sowie das [Mockup mit allen HTML-Elementen](https://tschaef.github.io/dariah-de-2018-mockups/mockups/html-elements.html).
+
+## Icons
+
+Die Icons entstammen den [Themify-Icons](https://themify.me/themify-icons) und werden als SVGs eingebunden, soweit möglich in der Originalgröße von 17&times;17&nbsp;px.
+
+In den Kacheln auf der Hauptseite wird die Strichstärke der Icons vermindert, indem eine schmale weiße Umrandung hinzufügt wird.
+
+Sofern eigene Icons hinzugefügt werden, ist unbedingt darauf zu achten, dass sich diese harmonisch zwischen den anderen einfügen, insbesondere hinsichtlich der Strichstärke.
+
+## Mockups
+
+Die [bereitgestellten Mockups](https://tschaef.github.io/dariah-de-2018-mockups/mockups/index.html) bieten einen Überblick der verschiedenen Layouts und Designelemente. Die Fußzeile erscheint auf jeder Seite.
+
+### [Hauptseite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/front-page.html) ([auch auf Englisch](https://tschaef.github.io/dariah-de-2018-mockups/mockups/front-page-en.html))
+
+- volle Kopfzeile (klickbar ist nur der Menüpunkt »Digital Humanities«)
+- Logo in voller Größe
+- hervorgehobener Bereich mit 6 Kacheln, die &ndash; wie auf der alten Website &ndash; den Direkteinstieg zu wichtigen Unterseiten ermöglichen, ergänzt durch einen kurze Projektbeschreibung
+- die neuesten 7 Blogposts; 4 in einer 2&times;2-Matrix, darunter 3 weitere nebeneinander
+- hervorgehobener Link zum Blog
+
+### [Volle Breite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/full-width.html)
+
+- Kopfzeile ohne Inhalt
+- kleines Logo
+- Inhaltsbereich
+
+### [HTML-Elemente](https://tschaef.github.io/dariah-de-2018-mockups/mockups/html-elements.html)
+
+Eine Übersicht (fast) aller möglichen HTML-Elemente einschließlich Tabellen und Formulare.
+- Kopfzeile ohne Inhalt
+- kleines Logo
+- Inhaltsbereich mit begrenzter Breite
+
+### [Blogpost](https://tschaef.github.io/dariah-de-2018-mockups/mockups/news-post.html)
+
+Dieses Mockup demonstriert normalen Textinhalt mit optionalen Bildern und Medien, wie dieser für den Blog, aber auch auf statischen Seiten dargestellt werden sollte.
+- volle Kopfzeile
+- kleines Logo
+- Inhaltsbereich
+
+### Weitere Mockups
+
+Für spezielle Seiten wurden weitere Mockups erstellt, darunter die [Login-Seite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/login.html), die [Organisationsauswahl bei der Registrierung](https://tschaef.github.io/dariah-de-2018-mockups/mockups/select-organisation.html) sowie eine [Statusseite](https://tschaef.github.io/dariah-de-2018-mockups/mockups/status.html) mit den neuesten Tweets.

gulpfile.js

@@ -0,0 +1,51 @@
+var gulp = require('gulp')
+var autoprefixer = require('gulp-autoprefixer')
+var concat = require('gulp-concat')
+var cssnano = require('gulp-cssnano')
+var filter = require('gulp-filter')
+var newer = require('gulp-newer')
+var notify = require('gulp-notify')
+var sass = require('gulp-sass')
+var sassGlob = require('gulp-sass-glob')
+var uglify = require('gulp-uglify')
+var wrap = require('gulp-wrap')
+
+var paths = {
+	scriptSrc: 'js/**/*.js',
+	scriptDest: 'templates/assets',
+	scriptWatch: 'js/**/*.js',
+
+	styleSrc: 'scss/*.scss',
+	styleDest: 'templates/assets',
+	styleWatch: 'scss/**/*.scss',
+}
+
+gulp.task('scripts', function() {
+	gulp.src(paths.scriptWatch)
+		.pipe(newer(paths.scriptDest + '/*.js'))
+		.pipe(filter(paths.scriptSrc))
+		.pipe(concat('script.js'))
+		.pipe(wrap(';(function () { <%=contents%> })()'))
+		.pipe(uglify())
+		.on('error', notify.onError({title: 'Uglify Error', message: '<%=error%>'}))
+		.pipe(gulp.dest(paths.scriptDest))
+})
+
+gulp.task('styles', function() {
+	gulp.src(paths.styleWatch)
+		.pipe(newer(paths.styleDest + '/*.css'))
+		.pipe(filter(paths.styleSrc))
+		.pipe(sassGlob())
+		.pipe(sass())
+		.on('error', notify.onError({title: 'Sass Error', message: '<%=error%>'}))
+		.pipe(cssnano())
+		.pipe(autoprefixer())
+		.pipe(gulp.dest(paths.styleDest))
+})
+
+gulp.task('compile', ['scripts', 'styles'])
+
+gulp.task('default', ['scripts', 'styles'], function() {
+	gulp.watch(paths.scriptWatch, ['scripts'])
+	gulp.watch(paths.styleWatch, ['styles'])
+})

js/account.js

@@ -0,0 +1,31 @@
+// TODO: Merge with language.js
+;(function () {
+	var dropdown = document.querySelector('.account_list')
+
+	if (!dropdown) return;
+
+	var toggle = document.querySelector('.account_toggle')
+
+	toggle.addEventListener('click', function (event) {
+		var doOpen = !dropdown.classList.contains('-open')
+
+		// Close all
+		document.body.click()
+
+		if (doOpen) {
+			dropdown.classList.add('-open')
+			toggle.classList.add('-open')
+		}
+
+		event.stopPropagation()
+	})
+
+	document.body.addEventListener('click', function () {
+		dropdown.classList.remove('-open')
+		toggle.classList.remove('-open')
+	})
+
+	dropdown.addEventListener('click', function (event) {
+		event.stopPropagation()
+	})
+})()

js/common.js

@@ -0,0 +1,7 @@
+;(function () {
+	window.addEventListener('keydown', function (event) {
+		if (event.keyCode === 27) { // Esc
+			document.body.click()
+		}
+	})
+})()

js/functions.js

@@ -0,0 +1,14 @@
+// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
+// https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/
+function forEach(array, callback, scope) {
+	if (!array) return
+
+	for (var i = 0; i < array.length; i++) {
+		callback.call(scope, array[i], i)
+	}
+}
+
+// http://stackoverflow.com/a/21696585
+function isVisible(element) {
+	return (window.getComputedStyle(element).display !== 'none')
+}

js/language.js

@@ -0,0 +1,30 @@
+// TODO: Merge with account.js
+;(function () {
+	var dropdown = document.querySelector('.language_list')
+
+	if (!dropdown) return
+
+	var toggle = document.querySelector('.language_toggle')
+
+	toggle.addEventListener('click', function (event) {
+		var doOpen = !dropdown.classList.contains('-open')
+
+		// Close all
+		document.body.click()
+
+		if (doOpen) {
+			dropdown.classList.add('-open')
+			toggle.classList.add('-open')
+		}
+		event.stopPropagation();
+	})
+
+	document.body.addEventListener('click', function () {
+		dropdown.classList.remove('-open')
+		toggle.classList.remove('-open')
+	})
+
+	dropdown.addEventListener('click', function (event) {
+		event.stopPropagation()
+	})
+})()

js/nav.js

@@ -0,0 +1,79 @@
+;(function () {
+	var nav = document.querySelectorAll('.nav')
+	if (!nav.length) return
+
+	var header = document.querySelector('.header')
+
+	forEach(header.querySelectorAll('.nav_item.-level-1.-has-children > .nav_link'), function (node) {
+		var parent = node.parentElement
+		node.addEventListener('click', function (event) {
+			if (isSmallScreen()) {
+				parent.classList.toggle('-open')
+				parent.querySelector('.nav_list.-level-2').classList.toggle('-open')
+				return
+			} else {
+				var wasOpen = parent.classList.contains('-open')
+				closeAll()
+				if (wasOpen) return
+			}
+
+			header.classList.add('-nav-open')
+			parent.classList.add('-open')
+			parent.querySelector('.nav_list.-level-2').classList.add('-open')
+			event.stopPropagation();
+		})
+	})
+
+	header.querySelector('.nav_toggle.-portal').addEventListener('click', function (event) {
+		var wasOpen =  this.classList.contains('-open')
+		closeAll()
+		if (wasOpen) return
+
+		this.classList.add('-open')
+		header.querySelector('.nav_menu.-portal').classList.add('-open')
+		event.stopPropagation()
+	})
+
+	header.querySelector('.nav_toggle.-main').addEventListener('click', function (event) {
+		var wasOpen = this.classList.contains('-open')
+		closeAll()
+		if (wasOpen) return
+
+		this.classList.add('-open')
+		header.querySelector('.nav_menu.-main').classList.add('-open')
+		event.stopPropagation()
+	})
+
+	document.body.addEventListener('click', function () {
+		closeAll()
+	})
+
+	forEach(header.querySelectorAll('.nav_list'), function (node) {
+		node.addEventListener('click', function (event) {
+			event.stopPropagation()
+		})
+	})
+
+	function closeAll() {
+		header.classList.remove('-nav-open')
+
+		header.querySelector('.nav_toggle.-main').classList.remove('-open')
+		header.querySelector('.nav_menu.-main').classList.remove('-open')
+
+		var openNavItem = header.querySelector('.nav_item.-level-1.-has-children.-open')
+		if (openNavItem) openNavItem.classList.remove('-open')
+		var openNavMenu = header.querySelector('.nav_list.-level-2.-open')
+		if (openNavMenu) openNavMenu.classList.remove('-open')
+
+		header.querySelector('.nav_toggle.-portal').classList.remove('-open')
+		header.querySelector('.nav_menu.-portal').classList.remove('-open')
+
+		document.querySelector('.search_form').classList.remove('-open')
+		document.querySelector('.search_toggle').classList.remove('-open')
+	}
+
+	function isSmallScreen() {
+		var navToggle = header.querySelector('.nav_toggle.-main')
+		return (window.getComputedStyle(navToggle).display === 'block')
+	}
+})()