breakup css files and build

bustle · Jul 14, 2014 · 518ad4d · 518ad4d
1 parent 2c4c1d4
commit 518ad4d
Show file tree

Hide file tree

Showing 9 changed files with 800 additions and 368 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -3,8 +3,13 @@
 <head>
   <meta charset="utf-8">
   <title>ContentKit Editor</title>
-  <link href="../src/css/editor.css" rel="stylesheet">
+
+  <!-- Include Editor CSS (editor.css) -->
+  <link href="../dist/content-kit-editor.css" rel="stylesheet">
+
+  <!-- CSS just for the demo page -->
   <link href="demo.css" rel="stylesheet">
+
 </head>
 <body>
 
@@ -61,10 +66,14 @@ <h3>Keyboard shortcuts:</h3>
     </div>
   </div>
 
+  <!-- Include Editor JS (content-kit-editor.js) -->
   <script src="../dist/content-kit-editor.js"></script>
-  <script src="content-kit-compiler.js"></script>
 
+  <!-- JS just for the demo page -->
   <script src="content-kit-demo.js"></script>
+  <script src="content-kit-compiler.js"></script>
+
+  <!-- This initializes a new Editor -->
   <script>
     var editor = new ContentKit.Editor('.editor', { 
       parser: new ContentKit.HTMLParser({ includeTypeNames: true }) // shows type names for easier debugging

diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css
diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
@@ -3,7 +3,7 @@
  * @version  0.1.0
  * @author   Garth Poitras <garth22@gmail.com> (http://garthpoitras.com/)
  * @license  MIT
- * Last modified: Jul 13, 2014
+ * Last modified: Jul 14, 2014
  */
 
 (function(exports, document) {

diff --git a/gulpfile.js b/gulpfile.js
@@ -11,7 +11,7 @@ var open   = require('gulp-open');
 
 var pkg = require('./package.json');
 
-var src = [
+var jsSrc = [
   './src/js/index.js',
   './src/js/constants.js',
   './src/js/utils/object-utils.js',
@@ -25,9 +25,19 @@ var src = [
   './src/js/tooltip.js'
 ];
 
-var distName = 'content-kit-editor.js';
+var cssSrc = [
+  './src/css/editor.css',
+  './src/css/toolbar.css',
+  './src/css/tooltip.css',
+  './src/css/icons.css',
+  './src/css/animations.css'
+];
+
 var distDest = './dist/';
-var distPath = distDest + distName;
+var jsDistName = 'content-kit-editor.js';
+var jsDistPath = distDest + jsDistName;
+var cssDistName = 'content-kit-editor.css';
+var cssDistPath = distDest + cssDistName;
 
 var testRunner = './tests/index.html';
 
@@ -51,24 +61,28 @@ var iifeFooter = ['',
                   ''].join('\n'); 
 
 gulp.task('lint', function() {
-  gulp.src(src)
+  gulp.src(jsSrc)
       .pipe(jshint('.jshintrc'))
       .pipe(jshint.reporter('default'));
 });
 
 gulp.task('lint-built', function() {
-  return gulp.src(distPath)
+  return gulp.src(jsDistPath)
              .pipe(jshint('.jshintrc'))
              .pipe(jshint.reporter('default'));
 });
 
 gulp.task('build', function() {
-  gulp.src(src)
-      .pipe(concat(distName))
+  gulp.src(jsSrc)
+      .pipe(concat(jsDistName))
       .pipe(header(iifeHeader))
       .pipe(header(banner, { pkg : pkg } ))
       .pipe(footer(iifeFooter))
       .pipe(gulp.dest(distDest));
+
+  gulp.src(cssSrc)
+      .pipe(concat(cssDistName))
+      .pipe(gulp.dest(distDest));
 });
 
 gulp.task('test', function() {
@@ -82,7 +96,7 @@ gulp.task('test-browser', function(){
 });
 
 gulp.task('watch', function() {
-  gulp.watch(src, ['build']);
+  gulp.watch(jsSrc.concat(cssSrc), ['build']);
 });
 
 

diff --git a/src/css/animations.css b/src/css/animations.css
diff --git a/src/css/editor.css b/src/css/editor.css
diff --git a/src/css/icons.css b/src/css/icons.css
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
@@ -0,0 +1,113 @@
+/**
+ * Toolbar
+ */
+
+.ck-toolbar {
+  text-align: center;
+  position: absolute;
+  z-index: 1;
+  background: -moz-linear-gradient(top,  rgba(74,74,74,0.97) 0%, rgba(43,43,43,1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(74,74,74,0.97)), color-stop(100%,rgba(43,43,43,1)));
+  background: -webkit-linear-gradient(top,  rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%);
+  background: -o-linear-gradient(top,  rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%);
+  background: -ms-linear-gradient(top,  rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%);
+  background: linear-gradient(to bottom,  rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%);
+  box-shadow: 0 1px 3px -1px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.12), inset 0 1px 0 rgba(0,0,0,0.65);
+  border-radius: 5px;
+  transition: left 0.1s, top 0.1s;
+  margin-bottom: 0.5em; /* space for arrow */
+}
+@media \\0 screen {
+  /* Safari fix: always transitions from 0,0 */
+  .ck-toolbar {
+    transition: none;
+  }
+}
+
+.ck-toolbar:after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 0; 
+  height: 0; 
+  border-left: 0.5em solid transparent;
+  border-right: 0.5em solid transparent;
+  border-top: 0.5em solid rgba(43,43,43,1);
+  bottom: -0.5em;
+  margin-left: -0.5em;
+}
+
+.ck-toolbar,
+.ck-toolbar-prompt {
+  -webkit-animation: toolbarPop 0.5s linear both;
+          animation: toolbarPop 0.5s linear both;
+}
+
+.ck-toolbar-btn {
+  background-color: transparent;
+  border: none;
+  outline: none;
+  color: #FFF;
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  width: 48px;
+  height: 44px;
+  line-height: 44px;
+  cursor: pointer;
+  transition: background-color 0.15s;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+.ck-toolbar-btn:hover {
+  background-color: rgba(43,43,43,0.5);
+}
+.ck-toolbar-btn:active {
+  background-color: rgba(43,43,43,0.75);
+}
+.ck-toolbar-btn:active,
+.ck-toolbar-btn.active {
+  color: #4CD964;
+}
+.ck-toolbar-btn:first-child {
+  border-radius: 5px 0 0 5px;
+}
+.ck-toolbar-btn:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+.ck-toolbar-prompt {
+  display: none;
+}
+.ck-toolbar-prompt input {
+  background: none;
+  border: none;
+  color: #f5f5f5;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 15px;
+  padding: 0 16px;
+  width: 288px;
+  height: 44px;
+}
+.ck-toolbar-prompt input:focus {
+  outline: none;
+}
+.ck-toolbar-prompt input::-ms-clear {
+  display: none;
+}
+.ck-toolbar-prompt ::-webkit-input-placeholder {
+  background-color: #a2a2a2;
+  background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #a2a2a2),color-stop(0.4, #a2a2a2),color-stop(0.5, white),color-stop(0.6, #a2a2a2),color-stop(1, #a2a2a2)); 
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-animation: textGlimmer 4s infinite;
+}
+
+.ck-editor-hilite {
+  position: absolute;
+  z-index: -1;
+  background-color: rgba(76,217,100,0.08);
+  border-bottom: 2px dotted #4CD964;
+}
diff --git a/src/css/tooltip.css b/src/css/tooltip.css
@@ -0,0 +1,51 @@
+/**
+ * Tooltip
+ */
+
+.ck-tooltip {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.7em;
+  white-space: nowrap;
+  position: absolute;
+  background-color: rgba(43,43,43,0.9);
+  border-radius: 3px;
+  line-height: 1em;
+  padding: 0.7em 0.9em;
+  color: #FFF;
+  -webkit-animation: fadeIn 0.2s;
+          animation: fadeIn 0.2s;
+}
+.ck-tooltip:before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 0; 
+  height: 0; 
+  border-left: 0.4em solid transparent;
+  border-right: 0.4em solid transparent;
+  border-bottom: 0.4em solid rgba(43,43,43,0.9);
+  top: -0.4em;
+  margin-left: -0.4em;
+}
+.ck-tooltip:after { /* help keeps mouseover state when moving from link to tooltip */
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -0.4em;
+  height: 0.4em; 
+}
+.ck-tooltip a {
+  color: #FFF;
+  text-decoration: none;
+}
+.ck-tooltip a:hover {
+  text-decoration: underline;
+}
+@media \\0 screen {
+  /* Safari fix: text rendering when animating opacity */
+  .ck-tooltip {
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+  }
+}