feat(app generator): add debugging-aid styling, will be included on d…

…ebug builds only
marviq · Aug 26, 2016 · 0a08e4a · 0a08e4a
1 parent 267a5af
commit 0a08e4a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/generators/app/index.js b/generators/app/index.js
@@ -337,6 +337,7 @@ var AppGenerator = generators.Base.extend(
 
                     ,   'src/style'
                     ,   'src/style/images/'
+                    ,   'src/style/images/debug/'
                     ,   'src/style/images/sprites/'
 
                         //  Testing:
@@ -396,6 +397,8 @@ var AppGenerator = generators.Base.extend(
                     ,   'src/sass/_settings.sass'
                     ,   'src/sass/_views.sass'
                     ,   [ 'src/sass/app.sass' ]
+                    ,   'src/sass/debug.sass'
+                    ,   'src/style/images/debug/internals.jpg'
                     ,   'src/style/images/sprites/check-green.png'
                     ]
                 ;

diff --git a/generators/app/templates/@Gruntfile.coffee b/generators/app/templates/@Gruntfile.coffee
@@ -596,6 +596,7 @@ module.exports = ( grunt ) ->
 
                         app:            path.relative( grunt.config( 'build.assembly.app' ), grunt.config( 'build.part.app.tgt' ))
                         style:          path.relative( grunt.config( 'build.assembly.app' ), grunt.config( 'build.part.style.tgt' ))
+                        styleBase:      path.relative( grunt.config( 'build.assembly.app' ), grunt.config( 'build.part.style.tgtDir' ))
 
                         buildRun:       brief.buildNumber or brief.timestamp
                         debugging:      brief.debugging
@@ -668,7 +669,7 @@ module.exports = ( grunt ) ->
                     ##
                                         '<%= build.part.app.tgt %>'<@ if ( i18n ) { @>
                                         '<%= build.part.i18n.tgt %>**/*'<@ } @>
-                                        '<%= build.part.style.tgt %>'
+                                        '<%= build.part.style.tgtDir %>**/*.css'
 
                     ##                  Watch for changed bootstrap - source -
                     ##

diff --git a/generators/app/templates/src/index.template.html b/generators/app/templates/src/index.template.html
@@ -42,6 +42,7 @@
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]--><@ } @><% if ( debugging ) { %>
 
+    <link rel="stylesheet" type="text/css" href="<%- styleBase %>/debug.css?<%- buildRun %>" />
     <script src="//localhost:35729/livereload.js"></script><% } %>
 </head>
 <body>

diff --git a/generators/app/templates/src/sass/app.sass b/generators/app/templates/src/sass/app.sass
@@ -35,4 +35,11 @@
 //
 
 body
-    background-color: white
+    //  https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
+    //
+    background:                         #FFF
+    min-height:                         100vh
+    margin:                             0
+
+html
+    height:                             100vh
diff --git a/generators/app/templates/src/sass/debug.sass b/generators/app/templates/src/sass/debug.sass
@@ -0,0 +1,9 @@
+body
+    box-shadow:                         0 5vh 30vh 15vh rgba(16,0,0,0.9)
+
+html
+    //  Red flag, warning that you've got issues. If you never see this, you're covered ;-)
+    //  https://css-tricks.com/perfect-full-page-background-image/
+    //
+    background:                         image-url('debug/internals.jpg') center / cover no-repeat fixed border-box #C00
+    box-shadow:                         inset 0px 10vh 30vmin 15vmin rgba(16,0,0,0.9)
diff --git a/generators/app/templates/src/style/images/debug/internals.jpg b/generators/app/templates/src/style/images/debug/internals.jpg