Split styles into a less opinionated base stylesheet and a theme styl…

…esheet and merge with Gulp (LeaVerou#16940) * add slash to explicitly ignore directories (https://git-scm.com/docs/gitignore) * Split the stylesheet into a base and theme file * Add gulp-concat which is used to merge the base and theme styles to create awesomplete.css * Add resulting awesomplete.css file * Correct gulp-dest target to match minify target * Update docs to reflect awesomplete.css is a generated file.
Matthias-Hermsdorf · Sep 8, 2016 · 58b0004 · 58b0004
1 parent 92ddc9d
commit 58b0004
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 36 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-node_modules
-coverage
+node_modules/
+coverage/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -45,8 +45,15 @@ describe("A fact", function(){
 
 See existing tests in ```test``` directory as an example. More expectations and examples on how to use Jasmine can be found on the official [documentation](http://jasmine.github.io/2.2/introduction.html).
 
-**Build minified version**
+**Build**
+
+Run the build with the following command:
 
 ```
 gulp
 ```
+
+The build will:
+
+1. Minify `awesomplete.js` and generate `awesomplete.min.js`.
+2. Merge `awesomplete.base.css` and `awesomplete.theme.css` and generate `awesomplete.css`.
diff --git a/awesomplete.base.css b/awesomplete.base.css
@@ -0,0 +1,33 @@
+.awesomplete [hidden] {
+    display: none;
+}
+
+.awesomplete .visually-hidden {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
+
+.awesomplete {
+    display: inline-block;
+    position: relative;
+}
+
+.awesomplete > input {
+    display: block;
+}
+
+.awesomplete > ul {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    min-width: 100%;
+    box-sizing: border-box;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: #fff;
+}
+
+.awesomplete > ul:empty {
+    display: none;
+}
diff --git a/awesomplete.css b/awesomplete.css
@@ -1,27 +1,38 @@
-[hidden] { display: none; }
+.awesomplete [hidden] {
+    display: none;
+}
+
+.awesomplete .visually-hidden {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+}
 
-.visually-hidden {
-	position: absolute;
-	clip: rect(0, 0, 0, 0);
+.awesomplete {
+    display: inline-block;
+    position: relative;
 }
 
-div.awesomplete {
-	display: inline-block;
-	position: relative;
+.awesomplete > input {
+    display: block;
 }
 
-div.awesomplete > input {
-	display: block;
+.awesomplete > ul {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    min-width: 100%;
+    box-sizing: border-box;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background: #fff;
 }
 
-div.awesomplete > ul {
-	position: absolute;
-	left: 0;
-	z-index: 1;
-	min-width: 100%;
-	box-sizing: border-box;
-	list-style: none;
-	padding: 0;
+.awesomplete > ul:empty {
+    display: none;
+}
+
+.awesomplete > ul {
 	border-radius: .3em;
 	margin: .2em 0 0;
 	background: hsla(0,0%,100%,.9);
@@ -31,19 +42,14 @@ div.awesomplete > ul {
 	text-shadow: none;
 }
 
-div.awesomplete > ul[hidden],
-div.awesomplete > ul:empty {
-	display: none;
-}
-
 @supports (transform: scale(0)) {
-	div.awesomplete > ul {
+	.awesomplete > ul {
 		transition: .3s cubic-bezier(.4,.2,.5,1.4);
 		transform-origin: 1.43em -.43em;
 	}
 
-	div.awesomplete > ul[hidden],
-	div.awesomplete > ul:empty {
+	.awesomplete > ul[hidden],
+	.awesomplete > ul:empty {
 		opacity: 0;
 		transform: scale(0);
 		display: block;
@@ -52,7 +58,7 @@ div.awesomplete > ul:empty {
 }
 
 	/* Pointer */
-	div.awesomplete > ul:before {
+	.awesomplete > ul:before {
 		content: "";
 		position: absolute;
 		top: -.43em;
@@ -67,31 +73,31 @@ div.awesomplete > ul:empty {
 		transform: rotate(45deg);
 	}
 
-	div.awesomplete > ul > li {
+	.awesomplete > ul > li {
 		position: relative;
 		padding: .2em .5em;
 		cursor: pointer;
 	}
 
-	div.awesomplete > ul > li:hover {
+	.awesomplete > ul > li:hover {
 		background: hsl(200, 40%, 80%);
 		color: black;
 	}
 
-	div.awesomplete > ul > li[aria-selected="true"] {
+	.awesomplete > ul > li[aria-selected="true"] {
 		background: hsl(205, 40%, 40%);
 		color: white;
 	}
 
-		div.awesomplete mark {
+		.awesomplete mark {
 			background: hsl(65, 100%, 50%);
 		}
 
-		div.awesomplete li:hover mark {
+		.awesomplete li:hover mark {
 			background: hsl(68, 100%, 41%);
 		}
 
-		div.awesomplete li[aria-selected="true"] mark {
+		.awesomplete li[aria-selected="true"] mark {
 			background: hsl(86, 100%, 21%);
 			color: inherit;
 		}
diff --git a/awesomplete.theme.css b/awesomplete.theme.css
@@ -0,0 +1,69 @@
+.awesomplete > ul {
+	border-radius: .3em;
+	margin: .2em 0 0;
+	background: hsla(0,0%,100%,.9);
+	background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
+	border: 1px solid rgba(0,0,0,.3);
+	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+	text-shadow: none;
+}
+
+@supports (transform: scale(0)) {
+	.awesomplete > ul {
+		transition: .3s cubic-bezier(.4,.2,.5,1.4);
+		transform-origin: 1.43em -.43em;
+	}
+
+	.awesomplete > ul[hidden],
+	.awesomplete > ul:empty {
+		opacity: 0;
+		transform: scale(0);
+		display: block;
+		transition-timing-function: ease;
+	}
+}
+
+	/* Pointer */
+	.awesomplete > ul:before {
+		content: "";
+		position: absolute;
+		top: -.43em;
+		left: 1em;
+		width: 0; height: 0;
+		padding: .4em;
+		background: white;
+		border: inherit;
+		border-right: 0;
+		border-bottom: 0;
+		-webkit-transform: rotate(45deg);
+		transform: rotate(45deg);
+	}
+
+	.awesomplete > ul > li {
+		position: relative;
+		padding: .2em .5em;
+		cursor: pointer;
+	}
+
+	.awesomplete > ul > li:hover {
+		background: hsl(200, 40%, 80%);
+		color: black;
+	}
+
+	.awesomplete > ul > li[aria-selected="true"] {
+		background: hsl(205, 40%, 40%);
+		color: white;
+	}
+
+		.awesomplete mark {
+			background: hsl(65, 100%, 50%);
+		}
+
+		.awesomplete li:hover mark {
+			background: hsl(68, 100%, 41%);
+		}
+
+		.awesomplete li[aria-selected="true"] mark {
+			background: hsl(86, 100%, 21%);
+			color: inherit;
+		}
diff --git a/gulpfile.js b/gulpfile.js
@@ -2,6 +2,7 @@ var gulp = require('gulp');
 var closure = require('gulp-closure-compiler-service');
 var rename = require('gulp-rename');
 var header = require('gulp-header');
+var concat = require('gulp-concat');
 
 var banner = "// Awesomplete - Lea Verou - MIT license\n";
 
@@ -16,4 +17,13 @@ gulp.task('minify', function() {
 		.pipe(gulp.dest('.'));
 });
 
-gulp.task('default', ['minify']);
+gulp.task('concat', function() {
+
+	return gulp.src(['awesomplete.base.css', 'awesomplete.theme.css'])
+		.pipe(concat('awesomplete.css'))
+		.pipe(gulp.dest('.'));
+
+
+});
+
+gulp.task('default', ['minify', 'concat']);
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "gulp": "^3.9.0",
     "gulp-closure-compiler-service": "^0.5.0",
+    "gulp-concat": "^2.6.0",
     "gulp-header": "^1.7.1",
     "gulp-rename": "^1.2.2",
     "jasmine-core": "^2.4.1",