0.2.8 Adding Grunt and basic Grunt SASS task

gruntfile.js

@@ -3,23 +3,34 @@ module.exports = function(grunt) {
     //2. Project configuration.
     grunt.initConfig({
 
-        
         //define what to do with the SASS process
         sass: {                              // Task
-            dist: {                            // Target
+            dev: {                            // Target
                 options: {                       // Target options
-                    style: 'compressed'
+                    style: 'expanded',
+                    sourcemap: 'none'
                 },
                 files: [{
                     src: ['sass/theme.scss'],
                     dest: 'css/theme.css',
                     ext: '.css'
                 }]
+            },
+            dist: {                            // Target
+                options: {                       // Target options
+                    style: 'compressed',
+                    sourcemap: 'none'
+                },
+                files: [{
+                    src: ['sass/theme.scss'],
+                    dest: 'css/theme.min.css',
+                    ext: '.css'
+                }]
             }
         },
         watch: {
               css: {
-                files: 'sass/*',
+                files: ['sass/**/*.scss'],
                 tasks: ['sass']
               }
         }
@@ -30,7 +41,6 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-sass');
     grunt.loadNpmTasks('grunt-contrib-watch');
  
- 
     //3. register a named task ( 'process' ) that runs Grunt processes ( 'imagemin', 'concat' )
-    grunt.registerTask( 'process', [ 'sass' ] );
+    grunt.registerTask( 'process', [ 'sass:dev', 'sass:dist' ] );
 };

inc/enqueue.php

@@ -1,7 +1,7 @@
 <?php
 
 function understrap_scripts() {
-    wp_enqueue_style( 'understrap-theme', get_stylesheet_directory_uri() . '/css/theme.css', array(), '0.1', false );
+    wp_enqueue_style( 'understrap-theme', get_stylesheet_directory_uri() . '/css/theme.min.css', array(), '0.2.8', false );
 
     wp_enqueue_script('jquery');
 	wp_enqueue_script( 'understrap-navigation', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20120206', true );

sass/theme.scss

@@ -1,3 +1,15 @@
+/*****************************************************************
+Import all needed 3rd party sass files plus your own style and variables
+1. understrap_underscores.scss
+2. theme/theme_variables.scss // Overwriting Bootstrap variables and for own variables <-- ADD YOUR VARIABLES HERE
+3. bootstrap/understrap_bootstrap.scss // adding bootstrap <- Dont edit this files!
+4. understrap/understrap.scss // Some basic understrap styles. Helps to combine Bootsrap and _s theme and provides some basic styleing for additonal functions <- Dont edit this files!
+5. font-awesome/understrap_font-awesome.scss <- Dont edit this files! If you don´t need/want Font Awesome support comment out this line
+
+// Any additional imported files //
+6. theme/theme.scss"; // <-- ADD YOUR STYLES HERE
+***************************************************************** */
+
 @import "underscores/understrap_underscores"; // the _s starter theme basic styles <- Dont edit this files!
 @import "theme/theme_variables"; // Overwriting Bootstrap variables and for own variables <-- ADD YOUR VARIABLES HERE
 @import "bootstrap/understrap_bootstrap"; // adding bootstrap <- Dont edit this files!

sass/theme/_theme_variables.scss

@@ -1,8 +1,8 @@
 // Use this file to overwrite the basic Bootstrap variables and add your own variables
 // To overwrite a Bootstrap variable you don´t have to touch the Bootstrap folder. 
-//Just copy a variable from /sass/bootstrap/_variables.scss, paste it here and edit the value. 
+// Just copy a variable from /sass/bootstrap/_variables.scss, paste it here and edit the value.
-//As example you find one of the most important Bootstrap variable below: $brand-primary. 
+// As example you find one of the most important Bootstrap variable below: $brand-primary.
-//Thats the ugly Bootstrap blue used for all the links, primary buttons etc. 
+// Thats the ugly Bootstrap blue used for all the links, primary buttons etc.
-//Just add your color code here, compile the SCSS to change this color everywhere
+// Just add your color code here, compile the theme.scss file to change this color everywhere
 
 $brand-primary:         #ff6d5a; //#ff6d5a

sass/understrap/understrap.scss

@@ -15,6 +15,7 @@ font-size:inherit;
   left: auto !important;
 }
 
+
 //Jasny Off-Canvas menu fixed right problems workaround
  .navmenu-fixed-right {
   left: auto !important;