Neuer Ansatz für css Benennung
Paar grundlegende Klassen umbenannt. Neue .gitignore
This commit is contained in:
Stephan
parent
7e85f9f654
commit
9c03fb44cc
8 changed files with 306 additions and 94 deletions
146
.gitignore
vendored
146
.gitignore
vendored
|
|
@ -1,13 +1,56 @@
|
|||
# =========================
|
||||
# Operating System Files
|
||||
# =========================
|
||||
# https://gist.github.com/octocat/9257657
|
||||
|
||||
# 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
|
||||
# =========================
|
||||
|
||||
.DS_Store
|
||||
# https://github.com/github/gitignore/blob/master/Global/macOS.gitignore
|
||||
###################
|
||||
# General
|
||||
*.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
|
||||
# =========================
|
||||
|
|
|
|||
|
|
@ -57,30 +57,12 @@
|
|||
// Structure attributes
|
||||
// ------------------------------------------------------------------------------
|
||||
|
||||
// Simulate new body element
|
||||
.screen_body {
|
||||
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;
|
||||
%full_viewport {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
// Fixed elements
|
||||
|
|
@ -95,13 +77,18 @@
|
|||
}
|
||||
|
||||
// Absolute elements
|
||||
.fullscreen_body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: transparentize($alpha_color, .5);;
|
||||
.viewport-full-body {
|
||||
@extend %full_viewport;
|
||||
background-color: transparentize($alpha_color, .5);
|
||||
}
|
||||
|
||||
.viewport-hover-body {
|
||||
@extend %full_viewport;
|
||||
background-color: darken($basic_background_color, 20%);
|
||||
transition: background-color .2s ease-in-out;
|
||||
&:hover {
|
||||
background-color: $basic_background_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ i, em {
|
|||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 500;
|
||||
font-weight: 500; // TODO maybe bolder
|
||||
}
|
||||
|
||||
small {
|
||||
|
|
@ -143,4 +143,4 @@ ins {
|
|||
|
||||
del {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
90
example.css
90
example.css
|
|
@ -59,26 +59,12 @@
|
|||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.screen_body {
|
||||
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_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%; } }
|
||||
.viewport-full-body, .viewport-hover-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh; }
|
||||
|
||||
.relative {
|
||||
position: relative; }
|
||||
|
|
@ -89,14 +75,15 @@
|
|||
.bottom {
|
||||
bottom: 0; }
|
||||
|
||||
.fullscreen_body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
.viewport-full-body {
|
||||
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 {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mark {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
*/ }
|
||||
/* .full {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.mark {
|
||||
float: left;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
*/ }
|
||||
.card_body .bkg_box {
|
||||
transition-duration: 800ms;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
14
example.html
14
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><body></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><article></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><article></code>. Solch ein Element wird oft detailliert gestaltet, kommt aber auch ohne jegliche Gestaltung aus.</p>
|
||||
<p>Noch allgemeiner ist das <code><section></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>
|
||||
|
|
|
|||
46
gulpfile.js
Normal file
46
gulpfile.js
Normal file
|
|
@ -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
|
||||
})
|
||||
});
|
||||
}
|
||||
22
package.json
Normal file
22
package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue