Feature/css coding standards

.gitignore

@@ -1,2 +1,6 @@
 assets/
-node_modules
+node_modules
+/interface/.DS_Store
+/.DS_Store
+/.sass-cache
+/sftp-config.json

class-bu-slide.php

@@ -121,7 +121,7 @@ public function get($args = array()){
 				$this->image_html = $this->get_image_html();
 				$this->caption['html'] = $this->get_caption_html();
 
-				$html = sprintf('<li id="%s" class="slide %s">', $slide_id, $additional_styles);
+				$html = sprintf('<li id="%s" class="bu-slideshow-slide slide %s">', $slide_id, $additional_styles);
 				$html .= sprintf('<div class="bu-slide-container %s">', $caption_class);
 
 				$slide_inner = $this->image_html . $this->caption['html'];

gruntfile.js

@@ -23,22 +23,29 @@ module.exports = function( grunt ) {
 			}
 		},
 
-		less: {
-			slideshow:{
-				src: 'interface/css/bu-slideshow.less',
-				dest: 'interface/css/bu-slideshow.css',
-				// options:{   compress: true  }
-			}
-		},
-
-		cssmin: {
-			core: {
-				expand: true,
-				cwd: 'interface/css',
-				src: [ '*.css', '!*.min.css' ],
-				dest: 'interface/css',
-				ext: '.min.css'
-			}
+		sass: {
+			dev: {
+				options: {
+					style: 'expanded',
+					loadPath: 'css-dev',
+				},
+				files: {
+					'interface/css/bu-slideshow-admin.css': 'interface/css-dev/bu-slideshow-admin.scss',
+					'interface/css/bu-slideshow-selector.css': 'interface/css-dev/bu-slideshow-selector.scss',
+					'interface/css/bu-slideshow.css': 'interface/css-dev/bu-slideshow.scss',
+				}
+			},
+			prod: {
+				options: {
+					style: 'compressed',
+					loadPath: 'css-dev',
+				},
+				files: {
+					'interface/css/bu-slideshow-admin.min.css': 'interface/css-dev/bu-slideshow-admin.scss',
+					'interface/css/bu-slideshow-selector.min.css': 'interface/css-dev/bu-slideshow-selector.scss',
+					'interface/css/bu-slideshow.min.css': 'interface/css-dev/bu-slideshow.scss',
+				}
+			},
 		},
 
 		phplint: {
@@ -61,22 +68,13 @@ module.exports = function( grunt ) {
 				tasks: ['uglify'],
 				options: {  spawn: false, },
 			},
-			less: {
+			sass: {
 				files: [
-					'interface/css/bu-slideshow.less',
+					'interface/css-dev/*.scss',
 				],
 				tasks: ['styles'],
 				options: {  spawn: false, },
 			},
-			styles: {
-				files: [
-					'interface/css/*.css',
-					'!interface/css/*.min.css',
-					'!interface/css/bu-slideshow.css'
-				],
-				tasks: ['cssmin'],
-				options: {  spawn: false, },
-			},
 			phplint : {
 				files : [ '**/*.php' ],
 				tasks : [ 'phplint' ],
@@ -89,10 +87,10 @@ module.exports = function( grunt ) {
 
 	// Build task.
 	grunt.registerTask( 'scripts', [ 'uglify' ] );
-	grunt.registerTask( 'styles', [ 'less', 'cssmin' ] );
+	grunt.registerTask( 'styles', [ 'sass' ] );
 	grunt.registerTask( 'build', [ 'styles', 'scripts', 'phplint' ] );
 
 	// Default task.
-	grunt.registerTask( 'default', [ 'build' ] );
+	grunt.registerTask( 'default', [ 'watch' ] );
 
 };

interface/css-dev/_bu-slideshow-library.scss

@@ -0,0 +1,134 @@
+$semi-opaque-fallback:		#464646;
+$semi-opaque:				rgba(0,0,0,0.75);
+$semi-opaque-fallback-fade:	#686868;
+$semi-opaque-fade:			rgba(0,0,0,0.35);
+$white-fallback:			#ffffff;
+$white:						rgba(255,255,255,1);
+$white-fallback-fade:		#cdcdcd;
+$white-fade:				rgba(255,255,255,0.7);
+
+
+// animation
+// Usage: @include animation(spin .8s linear infinite)
+@mixin animation ($animations...) {
+	-webkit-animation: $animations;
+	-moz-animation: $animations;
+	-ms-animation: $animations;
+	-o-animation: $animations;
+	animation: $animations;
+}
+// transition
+// Usage: @include transition(all 250ms ease-in-out 0s)
+@mixin transition ($transitions...) {
+	-webkit-transition: $transitions;
+	-moz-transition: $transitions;
+	-ms-transition: $transitions;
+	-o-transition: $transitions;
+	transition: $transitions;
+}
+// transition-duration
+// Usage: @include transition-duration(0.3s)
+@mixin transition-duration ($transitions...) {
+	-webkit-transition-duration: $transitions;
+	-moz-transition-duration: $transitions;
+	-ms-transition-duration: $transitions;
+	-o-transition-duration: $transitions;
+	transition-duration: $transitions;
+}
+
+// keyframes
+// Usage: @include keyframes(animation-name) {
+		// your animation rules here
+// }
+@mixin keyframes($animation-name) {
+	@-webkit-keyframes #{$animation-name} {
+		@content;
+	}
+	@-moz-keyframes #{$animation-name} {
+		@content;
+	}
+	@-ms-keyframes #{$animation-name} {
+		@content;
+	}
+	@-o-keyframes #{$animation-name} {
+		@content;
+	}
+	@keyframes #{$animation-name} {
+		@content;
+	}
+}
+
+%mediumTransition {
+	@include transition-duration(0.3s);
+}
+%slowTransition {
+	@include transition-duration(0.6s);
+}
+%arrowBgStyles {
+	background-color:transparent;
+	cursor:pointer;
+	display:block;
+	height: 4em;
+	line-height:normal;
+	min-width:2.2em;
+	position: absolute;
+	top:50%;
+	width: 5%;
+	z-index:1000;
+	@extend %slowTransition;
+
+	&:hover,
+	&:active {
+		@extend %slowTransition;
+
+		background-color:$semi-opaque-fallback;
+		background-color:$semi-opaque;
+		-moz-transition-property:background-color;
+		-webkit-transition-property:background-color;
+		transition-property:background-color;
+	}
+}
+
+%arrowStyles {
+	border-style: solid;
+	border-width: 0.75em;
+	border-top-color:transparent;
+	border-bottom-color:transparent;
+	content: "";
+	height: 0;
+	position: absolute;
+	top: 1.4em;
+	width: 0;
+}
+
+%animate-slide-default {
+	left:100%;
+	position:absolute;
+	@include transition-duration(1s);
+}
+
+%animate-slide-in {
+	left:0;
+	@include transition-duration(1s);
+}
+
+%animate-slide-out {
+	left:-100%;
+	@include transition-duration(1s);
+}
+
+%animate-fade-default {
+	opacity:0;
+	position:absolute;
+	@include transition-duration(1.5s);
+}
+
+%animate-fade-in {
+	opacity:1.0;
+	@include transition-duration(1.5s);
+}
+
+%animate-fade-out {
+	opacity:0;
+	@include transition-duration(1.5s);
+}