Work on demo mode and readme
This commit is contained in:
Stephan Hagedorn
parent
d812ed6208
commit
84957f75a0
|
|
@ -42,7 +42,7 @@
|
|||
"boss" : false, // true: Tolerate assignments where comparisons would be expected
|
||||
"debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
|
||||
"eqnull" : false, // true: Tolerate use of `== null`
|
||||
"esversion" : 5, // {int} Specify the ECMAScript version to which the code must adhere.
|
||||
"esversion" : 6, // {int} Specify the ECMAScript version to which the code must adhere.
|
||||
"moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
|
||||
// (ex: `for each`, multiple try/catch, function expression…)
|
||||
"evil" : false, // true: Tolerate use of `eval` and `new Function()`
|
||||
|
|
@ -87,11 +87,10 @@
|
|||
"yui" : false, // Yahoo User Interface
|
||||
|
||||
// Custom globals
|
||||
"globals" : {
|
||||
"globals" : { // additional predefined global variables
|
||||
"debugOn": true,
|
||||
"hippie": true,
|
||||
"viewHover": true,
|
||||
"basicEase": true
|
||||
},
|
||||
"esversion" : 6 // additional predefined global variables
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
README.md
20
README.md
|
|
@ -6,7 +6,7 @@ This is a [node.js](https://nodejs.org/) based generator for static HTML based s
|
|||
|
||||
It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).
|
||||
|
||||
## USAGE
|
||||
## INSTALLATION
|
||||
|
||||
Clone the repo `https://github.com/sthag/hippie.git` to a folder to create your build environment.
|
||||
|
||||
|
|
@ -15,16 +15,28 @@ Change to the newly created folder. By default this would be *hippie*.
|
|||
Run the command `npm install`.
|
||||
This will install all node.js dependencies into the folder *node_modules*.
|
||||
|
||||
## USAGE
|
||||
|
||||
The command `gulp --tasks` will give you an overview of possible actions.
|
||||
|
||||
Run the command `gulp` for a live development environment.
|
||||
This will create a folder *build* with the resulting files to use.
|
||||
Also the source files will be watched for changes which are reflected live at [localhost:3000](htpp://localhost:3000)
|
||||
This will create a folder *build* with the resulting files.
|
||||
Also the source files will be watched for changes which are reflected live at [localhost:3000](htpp://localhost:3000) and the *build* directory.
|
||||
|
||||
`gulp build` will create the resulting *build* directory ready for deployment.
|
||||
|
||||
HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.
|
||||
|
||||
## LOGIC
|
||||
|
||||
> Klassennamen enthalten Objektnamen und Funktionen
|
||||
### Intro
|
||||
|
||||
There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.
|
||||
|
||||
### SASS (CSS)
|
||||
|
||||
Everything has its default style.
|
||||
The lo
|
||||
Class enthalten Objektnamen und Funktionen
|
||||
> Sie sind mit `-` und `_` unterteilt.
|
||||
> Der Bindestrich `-` trennt Objektnamen von Funktionen. Der Unterstrich `_` wiederum unterteilt Funktionsbezeichnungen.
|
||||
|
|
|
|||
55
gulpfile.js
55
gulpfile.js
|
|
@ -1,13 +1,16 @@
|
|||
// Setup project
|
||||
const hippie = {
|
||||
let hippie = {
|
||||
brand: 'hippie',
|
||||
titlePrefix: ' - HIPPIE',
|
||||
pageBase: './',
|
||||
index: 'index.html',
|
||||
jsFile: 'main',
|
||||
jsonFile: 'db',
|
||||
index: 'demo.html',
|
||||
data: 'demo/data.json',
|
||||
titlePrefix: ' - HIPPIE',
|
||||
pageBase: './'
|
||||
data: 'data.json',
|
||||
source: 'source/',
|
||||
demoContent: true
|
||||
}
|
||||
|
||||
// Gulp requirements
|
||||
const { watch, series, parallel } = require('gulp');
|
||||
const { src, dest } = require('gulp');
|
||||
|
|
@ -28,12 +31,12 @@ const sassLint = require('gulp-sass-lint');
|
|||
const rename = require('gulp-rename');
|
||||
const cleanCss = require('gulp-clean-css');
|
||||
const pump = require('pump');
|
||||
const cache = require('gulp-cached');
|
||||
const remember = require('gulp-remember');
|
||||
// const cache = require('gulp-cached');
|
||||
// const remember = require('gulp-remember');
|
||||
const concat = require('gulp-concat');
|
||||
const uglify = require('gulp-uglify');
|
||||
const jshint = require('gulp-jshint');
|
||||
const gulpif = require('gulp-if');
|
||||
// const gulpif = require('gulp-if');
|
||||
const changed = require('gulp-changed');
|
||||
const merge = require('merge-stream');
|
||||
const spritesmith = require('gulp.spritesmith');
|
||||
|
|
@ -43,6 +46,34 @@ const htmlValidator = require('gulp-w3c-html-validator');
|
|||
// const imagemin = require('gulp-imagemin');
|
||||
|
||||
// Data variables
|
||||
const demo = {
|
||||
root: 'demo',
|
||||
screens: 'source/screens/**/*.+(njk|html)',
|
||||
templates: 'source/templates',
|
||||
data: 'source/data/**/*.json',
|
||||
style: 'source/style/**/*.s+(a|c)ss',
|
||||
code: [
|
||||
'source/code/hippie/variables.js',
|
||||
'source/code/hippie/functions.js',
|
||||
'source/code/hippie/global.js',
|
||||
'source/code/variables.js',
|
||||
'source/code/functions.js',
|
||||
'source/code/global.js',
|
||||
'source/code/**/*.js',
|
||||
'!source/vendor/**/*'
|
||||
],
|
||||
fonts: 'node_modules/@fortawesome/fontawesome-free/webfonts/**/*',
|
||||
art: {
|
||||
favicons: 'source/art/favicons/**/*.+(ico|png)',
|
||||
sprites: 'source/art/sprites/**/*.png',
|
||||
images: 'source/art/images/**/*.+(png|gif|jpg|svg|webp)'
|
||||
},
|
||||
vendor: 'vendor/**/*',
|
||||
demo: {
|
||||
data: 'source/templates/demo/data.json'
|
||||
}
|
||||
};
|
||||
|
||||
const input = {
|
||||
root: 'source',
|
||||
screens: 'source/screens/**/*.+(njk|html)',
|
||||
|
|
@ -84,11 +115,11 @@ const output = {
|
|||
};
|
||||
|
||||
//Check for index file and deactivate demo content
|
||||
if (fs.existsSync('source/screens/index.njk')) {
|
||||
hippie.index = 'index.html';
|
||||
if (!fs.existsSync('source/screens/index.njk')) {
|
||||
hippie.index = 'demo.html';
|
||||
}
|
||||
if (fs.existsSync('source/templates/data.json')) {
|
||||
hippie.data = 'data.json';
|
||||
if (!fs.existsSync('source/templates/data.json')) {
|
||||
hippie.data = 'demo/data.json';
|
||||
}
|
||||
if (fs.existsSync('source/data/data.json')) {
|
||||
input.data = ['source/data/**/*.json', '!source/data/demo.json'];
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
<hr class="hr_dotted space_even_fourth js_pop"/><div class="exp_pop"><code class="code_solo">hr.hr_dotted.space_even_fourth</code></div>
|
||||
<p class="column_2 js_pop">Zur horizontalen Unterteilung kommt natürlich auch eine vertikale Trennung hinzu. Text kann so zum Beispiel in mehrere Spalten unterteilt werden. Dies ist hilfreich, wenn ein Text durch eine breite Fläche sehr lange Zeilen bekommen würde. Es ist dann schwer den neuen Zeilanfang zu finden. Die vertikale Trennung dient in erster Linie dazu, diesem Umstand zu begegnen. Auch hier kann die Unterteilung viele Formen annehmen.</p><div class="exp_pop"><code class="code_solo">p.column_2</code></div>
|
||||
<p class="column_3 column_line js_pop">Drei Spalten gilt es jetzt also zu Füllen. Dann erst wird die Trennung der Spalten durch eine Linie sichtbar.</p><div class="exp_pop"><code class="code_solo">p.column_3.column_line</code></div>
|
||||
<p class="column_3 column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter. Ach das ziegen diese beiden Absätze ganz gut.</p>
|
||||
<p class="column_3 column_line">Ist der Text nicht lang genug bleibt eventuell eine Spalte leer. Diesmal wird dies aber nicht passieren, denn das Anschauungsbeispiel ist ja nun durch den vorherigen Absatz schon gegeben.<br>Oft ist es sinnvoll, Absätze mit mehreren Spalten deutlich von nachfolgenden Absätzen zu trennen. Da der Textfluss spaltenweise verläuft, liest man eventuell an der falschen Stelle weiter.<br>Auch das zeigen diese beiden Absätze ganz gut.</p>
|
||||
<p>Es gibt die Möglichkeit vorformatierten Text darzustellen <code><pre></code>.</p>
|
||||
<pre>Dadurch<br> bleiben<br> Einrückungen<br> durch<br> Tabulatoren<br> erhalten.</pre>
|
||||
<p>Wird Bezug auf fremde Inhalte genommen, kommt ein Zitat <code><blockquote></code> zur Anwendung. Es besteht aus der Aussage und der Quelle.</p>
|
||||
|
|
@ -146,14 +146,14 @@
|
|||
<h2>Formatierungen</h2>
|
||||
<p>Texte, Wörter oder Zeichen können vielfältig formatiert werden.</p>
|
||||
<p>Sie können <b>fett</b> <code><b></code> oder <i>kursiv</i> <code><i></code> geschrieben sein. <b><i>Auch beides ist möglich!</i>?</b>! Sollen sie nicht nur anders <strong>aussehen</strong>, sondern auch <em>eine besondere inhaltliche Bedeutung</em> bekommen, werden sie mit <code><strong></code> und <code><em></code> ausgezeichnet.</p>
|
||||
<p>Das <code><u></code> Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie <u>Interaktionsweise</u>, oder die Beschriftung des Textes als falsch geschrieben.</p>
|
||||
<p>Das <code><u></code> Element stellt eine Spanne von Text mit einer unartikulierten, wenn auch explizit dargestellten, nicht-textuellen Anmerkung dar, wie z.B. die Beschriftung des Textes als Eigenname wie <u>Interaktionsweise</u>, oder die Beschriftung des Textes als <u>flasch</u> (falsch) geschrieben.</p>
|
||||
<p>Ähnlich ist es mit dem Element <code><small></code>. <small>Es steht für Randnotizen wird aber häufig auch kleiner dargestellt.</small></p>
|
||||
<p>Ist ein Text nicht mehr korrekt oder relevant kann er mit <code><s></code> markiert werden:<br><s>Die Erde ist eine Scheibe.</s></p>
|
||||
<p>Ein besonderer inhaltlicher Bezug ist der Titel eines Werkes. Sowas kann mit <code><cite></code> ausgezeichnet werden. <cite>Pulp Fiction</cite>, ist ein super Film - zum Beispiel.</p>
|
||||
<p>Um ein Zitat direkt im Text zu verwenden benutzt man das <code><q></code> Element. Es platziert Anführungszeichen um die Aussage:</p>
|
||||
<p>Sie sagte: <q>Du wolltest staubsaugen!</q><br>Er sagte: <q>Mach' ich morgen.</q></p>
|
||||
<p>Mit dem <code><dfn></code> Element werden Begriffe definiert. Es wird häufig mit dem Element für Abkürzungen <code><abbr></code> gemeinsam verwendet. Die eigentliche Definition kann dabei auch im Attribut <code>title</code> stehen.</p>
|
||||
<p><dfn><abbr title="Hippie interweaves preeminent personal interface elements">Hippie</abbr></dfn> is an recursive acronym for <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||
<p><dfn><abbr title="Hippie interweaves preeminent personal interface elements">HIPPIE</abbr></dfn> is an recursive acronym for <dfn>Hippie interweaves preeminent personal interface elements</dfn>.</p>
|
||||
<p>Die besondere Auszeichnungen <code><ruby></code> <q cite="https://de.wikipedia.org/wiki/Ruby_Annotation">bezeichnet ein Anmerkungssystem, bei dem der Text zusammen mit seiner Anmerkung in einer Zeile erscheint.</q> Das System verwendet die folgenden weiteren Elemente mit spezifischer Bedeutung:</p>
|
||||
<dl>
|
||||
<dt><code><rb></code></dt>
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
</div>
|
||||
<hr class="hr_dotted space_even_half">
|
||||
<p>Wikipedia erklärt dies ausführlicher unter <a href="https://de.wikipedia.org/wiki/Ruby_Annotation">Ruby Annotation</a>.</p>
|
||||
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmkode zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <code><data></code> und <code><time></code> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||
<p>Es gibt auch mehrere besondere Elemente um Maschinensprache oder Programmiersprache zu bezeichnen. Dabei wird unterschieden, ob der Inhalt nur für Menschen ausgezeichnet wird oder auch maschinen-lesbar sein soll. Die Elemente <code><data></code> und <code><time></code> enthalten eine maschinen-lesbare Repräsentation des Inhaltes:</p>
|
||||
<dl>
|
||||
<dt><data value="0">0</data> ≠ <data value="">NULL</data></dt>
|
||||
<dd><code><data>0</data> ≠ <data>NULL</data></code></dd>
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
<pre class="pre_code"><code><html><br> <head><br> <title>Hyper Text Markup Language</title><br> </head><br> <body id="root"><br> <!-- Content goes here --><br> <p class="example">Just like this.</p><br> </body><br></html></code></pre>
|
||||
<p>Dabei bleiben vorhandene Textformatierungen wie Zeilenumbrüche und Einrückung erhalten.</p>
|
||||
<p><code>var def = "Definition einer Variablen";</code></p>
|
||||
<p>In diesem Beispiel wird die Variable <var>def</var> definiert. Solch ein spezieller Typ Programmkode kann mit dem dafür vorgesehenen Element <code><var></code> ausgezeichnet werden.</p>
|
||||
<p>In diesem Beispiel wird die Variable <var>def</var> definiert. Solch ein spezieller Typ Text kann mit dem dafür vorgesehenen Element <code><var></code> ausgezeichnet werden.</p>
|
||||
<p>Soll beispielhaft auf Ausgaben von Computern verwiesen werden, wird das <code><samp></code> Element verwendet. Der Computer hat gesagt: <samp>Ich kann das angegebene Objekt nicht finden</samp>.</p>
|
||||
<p>Benutzereingaben haben ebenfalls ein eigenes Element <code><kbd></code>. Damit werden Eingaben durch den Nutzer, wie zum Beispiel <q>Drücken Sie gleichzeitig <kbd>Strg</kbd> und <kbd>A</kbd></q>, gekennzeichnet.</p>
|
||||
<p>Hoch- und Tiefgestellte Zeichen werden durch die Elemente <code><sup></code> und <code><sub></code> repräsentiert. Sie dienen nicht dazu rein optische Auszeichnungen zu erreichen sondern werden für ihren jeweiligen Zweck eingesetzt. In der Mathematik oder Chemie sind sie üblich:</p>
|
||||
|
|
|
|||
Loading…
Reference in a new issue