Neuer Ansatz für css Benennung

Paar grundlegende Klassen umbenannt.
Neue .gitignore

.gitignore

@@ -1,13 +1,56 @@
-# =========================
+# https://gist.github.com/octocat/9257657
-# Operating System Files
-# =========================
 
-# Windows
+# Compiled source #
-# =========================
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
 
-# Windows image file caches
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+
+
+# https://github.com/github/gitignore
+
+# https://github.com/github/gitignore/blob/master/Global/Windows.gitignore
+###################
+# Windows thumbnail cache files
 Thumbs.db
 ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
 
 # Folder config file
 Desktop.ini
@@ -24,17 +67,16 @@ $RECYCLE.BIN/
 # Windows shortcuts
 *.lnk
 
-# OSX
+# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
-# =========================
+###################
-
+# General
-.DS_Store
+*.DS_Store
 .AppleDouble
 .LSOverride
 
 # Icon must end with two \r
 Icon
 
-
 # Thumbnails
 ._*
 
@@ -45,6 +87,7 @@ Icon
 .TemporaryItems
 .Trashes
 .VolumeIcon.icns
+.com.apple.timemachine.donotpresent
 
 # Directories potentially created on remote AFP share
 .AppleDB
@@ -53,6 +96,87 @@ Network Trash Folder
 Temporary Items
 .apdisk
 
+https://github.com/github/gitignore/blob/master/Global/Linux.gitignore
+###################
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# https://github.com/github/gitignore/blob/master/Node.gitignore
+###################
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+
+
+# https://interaktionsweise.de/
+
 # =========================
 # Other files
 # =========================

basic/_common.scss

@@ -57,30 +57,12 @@
 // Structure attributes
 // ------------------------------------------------------------------------------
 
-// Simulate new body element
+%full_viewport {
-.screen_body {
+	position: absolute;
-	width: $basic_width;
+	top: 0;
-	@media screen and (orientation: landscape) {
+	left: 0;
-		@media (min-width: $screen_small) {
+	width: 100vw;
-			width: $width_2;
+	height: 100vh;
-		}
-		@media (min-width: $screen_medium) {
-			width: $width_3;
-		}
-		@media (min-width: $screen_large) {
-			width: $width_4;
-		}
-	}
-	@media screen and (orientation: portrait) {
-		@media (min-width: $screen_small) {
-			width: $width_2;
-		}
-	}
-	margin: 0 auto;
-	border-top-width: $border_width_8;
-	border-top-style: solid;
-	border-color: $basic_border_color;
-	padding-top: $space_3;
 }
 
 // Fixed elements
@@ -95,13 +77,18 @@
 }
 
 // Absolute elements
-.fullscreen_body {
+.viewport-full-body {
-		position: absolute;
+	@extend %full_viewport;
-		top: 0;
+	background-color: transparentize($alpha_color, .5);
-		left: 0;
+}
-		width: 100vw;
+
-		height: 100vh;
+.viewport-hover-body {
-		background-color: transparentize($alpha_color, .5);;
+	@extend %full_viewport;
+	background-color: darken($basic_background_color, 20%);
+	transition: background-color .2s ease-in-out;
+	&:hover {
+		background-color: $basic_background_color;
+	}
 }
 
 

basic/_grouping.scss

@@ -115,7 +115,7 @@ ul {
 	li {
 		list-style: none;
 		position: relative;
-	
+
 		&:before {
 			content: "_";
 			position: absolute;
@@ -144,4 +144,29 @@ main {
 
 div {
 
-}
+}
+
+.screen-box {
+	width: $basic_width;
+	@media screen and (orientation: landscape) {
+		@media (min-width: $screen_small) {
+			width: $width_2;
+		}
+		@media (min-width: $screen_medium) {
+			width: $width_3;
+		}
+		@media (min-width: $screen_large) {
+			width: $width_4;
+		}
+	}
+	@media screen and (orientation: portrait) {
+		@media (min-width: $screen_small) {
+			width: $width_2;
+		}
+	}
+	margin: 0 auto;
+	border-top-width: $border_width_8;
+	border-top-style: solid;
+	border-color: $basic_border_color;
+	padding-top: $space_3;
+}

basic/_textlevel.scss

@@ -39,7 +39,7 @@ i, em {
 }
 
 b, strong {
-	font-weight: 500;
+	font-weight: 500; // TODO maybe bolder
 }
 
 small {
@@ -143,4 +143,4 @@ ins {
 
 del {
 
-}
+}

example.css

@@ -59,26 +59,12 @@
   margin-right: 0;
   margin-left: 0; }
 
-.screen_body {
+.viewport-full-body, .viewport-hover-body {
-  width: 96%;
+  position: absolute;
-  margin: 0 auto;
+  top: 0;
-  border-top-width: 8px;
+  left: 0;
-  border-top-style: solid;
+  width: 100vw;
-  border-color: black;
+  height: 100vh; }
-  padding-top: 32px; }
-@media screen and (orientation: landscape) and (min-width: 1024px) {
-  .screen_body {
-    width: 80%; } }
-@media screen and (orientation: landscape) and (min-width: 1280px) {
-  .screen_body {
-    width: 60%; } }
-@media screen and (orientation: landscape) and (min-width: 1920px) {
-  .screen_body {
-    width: 48%; } }
-
-@media screen and (orientation: portrait) and (min-width: 1024px) {
-  .screen_body {
-    width: 80%; } }
 
 .relative {
   position: relative; }
@@ -89,14 +75,15 @@
 .bottom {
   bottom: 0; }
 
-.fullscreen_body {
+.viewport-full-body {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
   background-color: rgba(250, 216, 3, 0.5); }
 
+.viewport-hover-body {
+  background-color: #4d4d4d;
+  transition: background-color .2s ease-in-out; }
+  .viewport-hover-body:hover {
+    background-color: gray; }
+
 .space_box {
   float: left;
   display: table;
@@ -317,6 +304,27 @@ ul li {
 figure {
   margin: 16px 2em; }
 
+.screen-box {
+  width: 96%;
+  margin: 0 auto;
+  border-top-width: 8px;
+  border-top-style: solid;
+  border-color: black;
+  padding-top: 32px; }
+@media screen and (orientation: landscape) and (min-width: 1024px) {
+  .screen-box {
+    width: 80%; } }
+@media screen and (orientation: landscape) and (min-width: 1280px) {
+  .screen-box {
+    width: 60%; } }
+@media screen and (orientation: landscape) and (min-width: 1920px) {
+  .screen-box {
+    width: 48%; } }
+
+@media screen and (orientation: portrait) and (min-width: 1024px) {
+  .screen-box {
+    width: 80%; } }
+
 a {
   color: #52bed1;
   text-decoration: none; }
@@ -491,21 +499,21 @@ legend {
 
 .card_body {
   height: 100%;
-  /*  .full {
+  	/*  .full {
-  			position: absolute;
+  	position: absolute;
-  			width: 128px;
+  	width: 128px;
-  			height: 128px;
+  	height: 128px;
-  			top: 16px;
+  	top: 16px;
-  			left: 16px;
+  	left: 16px;
-  			background-color: #fff;
+  	background-color: #fff;
-  	}
+  }
-  		.mark {
+  .mark {
-  			float: left;
+  float: left;
-  			width: 32px;
+  width: 32px;
-  			height: 32px;
+  height: 32px;
-  			margin-top: 16px;
+  margin-top: 16px;
-  	}
+  }
-   */ }
+  */ }
   .card_body .bkg_box {
     transition-duration: 800ms;
     overflow: hidden;

example.html

@@ -7,26 +7,26 @@
 
 	<meta name="author" content="Interaktionsweise">
 	<meta name="description" content="hippie example">
-	<meta name="generator" content="notepad++, sublime">
+	<meta name="generator" content="Notepad++, Atom">
 	<meta name="robots" content="noindex">
 
 	<!--    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic,700' rel='stylesheet' type='text/css'>-->
 	<link rel="stylesheet" type="text/css" media="all" href="./example.css"/>
 </head>
 
-<body>
+<body class="viewport-hover-body">
 
-	<div class="layer_absolute">
+	<div class="layer">
 		<div class="exp_overlay_btn exp_help_btn"><span class="span_solo">?</span></div>
 	</div>
 
-	<div class="screen_body">
+	<div class="screen-box">
 		Dies ist einfach nur Text.<br/>Weniger wäre Nichts, denn dieser Text ist nicht durch ein spezifisches Element umschlossen.
 		<p>Es wirken nur die Eigenschaften des <code>&lt;body&gt;</code> Elements. Dieses Element umschließt den gesamten Inhalt des Dokumentes und kommt daher nur einmal vor. Inhalte sind normalerweise durch Elemente definiert. Grundlegende Elemente teilen das Dokument zunächst in Abschnitte.</p>
 		<h1>Bereiche</h1>
 		<article>
 			<section>
-				<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet kommt aber auch ohne jegliche Gestaltung aus.</p>
+				<p>Einen Abschnitt, welcher für sich alleine stehen kann, definiert sich durch <code>&lt;article&gt;</code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
 				<p>Noch allgemeiner ist das <code>&lt;section&gt;</code> Element. Es schafft Bereiche um Inhalte zu strukturieren.</p>
 				<p>Bestimmte Bereiche haben einen vorgegebene Zweck.<br/>Folgende Bereiche sind vorgegeben:</p>
 			</section>
@@ -203,7 +203,7 @@
 					<td>A</td>
 					<td>B</td>
 				</tr>
-			</tfoot>  
+			</tfoot>
 			<tbody>
 				<tr>
 					<td>Tabelle</td>
@@ -483,4 +483,4 @@
 		});
 	</script>
 </body>
-</html>
+</html>

gulpfile.js

@@ -0,0 +1,46 @@
+const gulp = require('gulp');
+const sass = require('gulp-ruby-sass');
+const sourcemaps = require('gulp-sourcemaps');
+const plumber = require('gulp-plumber');
+const notify = require('gulp-notify');
+const livereload = require('gulp-livereload');
+
+gulp.task('default', function(){
+	console.log('default gulp task...')
+});
+
+gulp.task('sass', () =>
+sass('./*.scss', {sourcemap: true})
+// .on('error', sass.logError)
+.pipe(plumber(errorReport("sass error")))
+.pipe(sourcemaps.write('./', {
+	includeContent: false,
+	sourceRoot: 'source'
+}))
+.pipe(gulp.dest('./'))
+.pipe(livereload())
+);
+
+gulp.task('watch', function() {
+	livereload.listen();
+	gulp.watch('./**/*.scss', ['sass']);
+	gulp.watch(['*.html']).on('change', livereload.changed);
+	// gulp.watch('js/src/*.js', ['js']);
+	// gulp.watch('img/src/*.{png,jpg,gif}', ['img']);
+
+});
+
+gulp.task('default', ['sass', 'watch']);
+
+
+
+function errorReport(errTitle) {
+	return plumber({
+		errorHandler: notify.onError({
+			// Customizing error title
+			title: errTitle || "Error running Gulp",
+			message: "Error: <%= error.message %>",
+			sound: true
+		})
+	});
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "hippie",
+  "version": "0.3.3",
+  "description": "Hippie interweaves preeminent personal interface elements",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sthag/hippie.git"
+  },
+  "author": "Interaktionsweise",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sthag/hippie/issues"
+  },
+  "homepage": "https://github.com/sthag/hippie#readme",
+  "devDependencies": {
+    "gulp": "^3.9.1"
+  }
+}