refactor project structure, begin design

css/style.css

@@ -1,70 +0,0 @@
-/* -------------------------------------------------
-    Reset
-   ------------------------------------------------- */
-applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
-blockquote, pre, a, abbr, acronym, address, big,
-cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, sub, sup, tt, var, u, i, center, dl,
-dt, dd, ol, ul, li, fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, figure, figcaption,
-footer, header, menu, nav, output, ruby, section,
-summary, time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline; }
-
-body {
-  margin: 0; }
-
-html, body {
-  width: 100%;
-  height: 100%; }
-
-* {
-  box-sizing: border-box; }
-
-*:after, *:before {
-  box-sizing: border-box; }
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block; }
-
-b, strong {
-  font-weight: bold; }
-
-i {
-  font-style: italic; }
-
-a {
-  outline: none; }
-
-textarea {
-  overflow: auto; }
-
-/* -------------------------------------------------
-    Page styles
-   ------------------------------------------------- */
-html {
-  font-family: Tahoma, sans-serif;
-  font-size: 13px; }
-
-.contents {
-  width: 960px;
-  margin: 0 auto;
-  padding: 1px 0; }
-  .contents article {
-    margin: 60px 0 30px; }

dist/css/datepicker.css

@@ -8,6 +8,107 @@
     background: none;
     border: none; }
 
+/* -------------------------------------------------
+    Datepicker cells
+   ------------------------------------------------- */
+.datepicker--cells {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap; }
+
+.datepicker--cell {
+  border-radius: 2px;
+  cursor: pointer;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  height: 32px;
+  z-index: 1; }
+  .datepicker--cell:hover {
+    background: #eee; }
+  .datepicker--cell.-current- {
+    color: #60C4F5; }
+    .datepicker--cell.-current-:hover {
+      background: rgba(96, 196, 245, 0.05); }
+  .datepicker--cell.-disabled- {
+    cursor: default;
+    color: #ddd;
+    background: none; }
+  .datepicker--cell.-selected- {
+    color: #fff;
+    background: skyblue; }
+    .datepicker--cell.-selected-.-current- {
+      color: #fff;
+      background: skyblue; }
+
+.datepicker--days-names {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap; }
+
+.datepicker--day-name {
+  color: #f5a33a;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 32px;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 13px; }
+
+.datepicker--cell-day {
+  border-radius: 50%;
+  width: 14.28571%; }
+
+.datepicker--cells-months {
+  height: 170px; }
+
+.datepicker--cell-month {
+  width: 33.33%;
+  height: 25%; }
+
+.datepicker--years {
+  height: 170px; }
+
+.datepicker--cells-years {
+  height: 170px; }
+
+.datepicker--cell-year {
+  width: 25%;
+  height: 33.33%; }
+
+.datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
+  color: #ddd;
+  font-size: .9em; }
+  .-selected-.datepicker--cell-day.-other-month-, .-selected-.datepicker--cell-year.-other-decade- {
+    color: #fff;
+    background: #def2fa; }
+  .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
+    background: none;
+    border: none; }
+
 /* -------------------------------------------------
     Datepicker
    ------------------------------------------------- */
@@ -21,30 +122,46 @@
   border: 1px solid #ddd;
   border-radius: 2px;
   box-sizing: content-box;
-  width: 224px;
+  font-family: Tahoma, sans-serif;
+  font-size: 14px;
+  color: #4a4a4a;
+  width: 232px;
   position: absolute;
   left: -100000px;
   opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s; }
+  transition: opacity 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease;
+  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s;
+  transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0.3s, -webkit-transform 0.3s ease; }
   .datepicker.-from-top- {
-    transform: translateY(-8px); }
+    -webkit-transform: translateY(-8px);
+            transform: translateY(-8px); }
   .datepicker.-from-right- {
-    transform: translateX(8px); }
+    -webkit-transform: translateX(8px);
+            transform: translateX(8px); }
   .datepicker.-from-bottom- {
-    transform: translateY(8px); }
+    -webkit-transform: translateY(8px);
+            transform: translateY(8px); }
   .datepicker.-from-left- {
-    transform: translateX(-8px); }
+    -webkit-transform: translateX(-8px);
+            transform: translateX(-8px); }
   .datepicker.active {
     opacity: 1;
-    transform: translate(0);
+    -webkit-transform: translate(0);
-    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s; }
+            transform: translate(0);
+    transition: opacity 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease;
+    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s;
+    transition: opacity 0.3s ease, transform 0.3s ease, left 0s 0s, -webkit-transform 0.3s ease; }
 
 .datepicker-inline .datepicker {
   position: static;
   left: auto;
   right: auto;
   opacity: 1;
-  transform: none; }
+  -webkit-transform: none;
+          transform: none; }
+
+.datepicker-inline .datepicker--pointer {
+  display: none; }
 
 .datepicker--content {
   padding: 2px; }
@@ -58,16 +175,20 @@
   height: 10px; }
   .-top-left- .datepicker--pointer, .-top-center- .datepicker--pointer, .-top-right- .datepicker--pointer {
     top: calc(100% - 4px);
-    transform: rotate(135deg); }
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg); }
   .-right-top- .datepicker--pointer, .-right-center- .datepicker--pointer, .-right-bottom- .datepicker--pointer {
     right: calc(100% - 4px);
-    transform: rotate(225deg); }
+    -webkit-transform: rotate(225deg);
+            transform: rotate(225deg); }
   .-bottom-left- .datepicker--pointer, .-bottom-center- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
     bottom: calc(100% - 4px);
-    transform: rotate(315deg); }
+    -webkit-transform: rotate(315deg);
+            transform: rotate(315deg); }
   .-left-top- .datepicker--pointer, .-left-center- .datepicker--pointer, .-left-bottom- .datepicker--pointer {
     left: calc(100% - 4px);
-    transform: rotate(45deg); }
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg); }
   .-top-left- .datepicker--pointer, .-bottom-left- .datepicker--pointer {
     left: 8px; }
   .-top-right- .datepicker--pointer, .-bottom-right- .datepicker--pointer {
@@ -86,19 +207,6 @@
   .datepicker--body.active {
     display: block; }
 
-.datepicker--days-names {
-  display: flex;
-  flex-wrap: wrap; }
-
-.datepicker--day-name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  width: 32px;
-  height: 32px;
-  text-align: center; }
-
 .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
   color: #ddd;
   font-size: .9em; }
@@ -113,18 +221,27 @@
     Navigation
    ------------------------------------------------- */
 .datepicker--nav {
-  border-bottom: 1px solid #ddd;
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: space-between;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   padding: 2px;
   height: 32px; }
 
 .datepicker--nav-title,
 .datepicker--nav-action {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   cursor: pointer;
-  align-items: center;
+  -webkit-align-items: center;
-  justify-content: center; }
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center; }
 
 .datepicker--nav-action {
   width: 32px;
@@ -144,6 +261,8 @@
     background: none; }
 
 .datepicker--buttons {
+  display: -webkit-flex;
+  display: -ms-flexbox;
   display: flex;
   margin: 0 1px 2px; }
 
@@ -152,10 +271,18 @@
   cursor: pointer;
   border-radius: 2px;
   margin: 0 1px;
-  flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
   display: inline-flex;
-  justify-content: center;
+  -webkit-justify-content: center;
-  align-items: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   height: 24px; }
   .datepicker--button:hover {
     background: #eaeaea; }
@@ -169,50 +296,3 @@
   .datepicker--cell-day.-other-month-:empty, .datepicker--cell-year.-other-decade-:empty {
     background: none;
     border: none; }
-
-/* -------------------------------------------------
-    Datepicker cells
-   ------------------------------------------------- */
-.datepicker--cells {
-  display: flex;
-  flex-wrap: wrap; }
-
-.datepicker--cell {
-  border-radius: 2px;
-  color: #333;
-  cursor: pointer;
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  z-index: 1; }
-  .datepicker--cell:hover {
-    background: #eee; }
-  .datepicker--cell.-current- {
-    color: #60C4F5; }
-    .datepicker--cell.-current-:hover {
-      background: rgba(96, 196, 245, 0.05); }
-  .datepicker--cell.-disabled- {
-    cursor: default;
-    color: #ddd;
-    background: none; }
-  .datepicker--cell.-selected- {
-    color: #fff;
-    background: skyblue; }
-    .datepicker--cell.-selected-.-current- {
-      color: #fff;
-      background: skyblue; }
-
-.datepicker--cell-day {
-  border-radius: 50%;
-  width: 14.28571%; }
-
-.datepicker--cell-month {
-  width: 33.33%;
-  height: 40px; }
-
-.datepicker--cell-year {
-  width: 25%;
-  height: 40px; }

dist/js/datepicker.js

@@ -711,147 +711,6 @@ var Datepicker;
     };
 
 })(window, jQuery);
-;(function () {
-    var template = '' +
-        '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
-        '<div class="datepicker--nav-title">#{title}</div>' +
-        '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
-        buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
-        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
-
-    Datepicker.Navigation = function (d, opts) {
-        this.d = d;
-        this.opts = opts;
-
-        this.$buttonsContainer = '';
-
-        this.init();
-    };
-
-    Datepicker.Navigation.prototype = {
-        init: function () {
-            this._buildBaseHtml();
-            this._bindEvents();
-        },
-
-        _bindEvents: function () {
-            this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
-            this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
-            this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this));
-        },
-
-        _buildBaseHtml: function () {
-            this._render();
-            this._addButtonsIfNeed();
-        },
-
-        _addButtonsIfNeed: function () {
-            if (this.opts.todayButton) {
-                this._addButton('today')
-            }
-            if (this.opts.clearButton) {
-                this._addButton('clear')
-            }
-        },
-
-        _render: function () {
-            var title = this._getTitle(this.d.currentDate),
-                html = Datepicker.template(template, $.extend({title: title}, this.opts));
-
-            this.d.$nav.html(html);
-            if (this.d.view == 'years') {
-                $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
-            }
-            this.setNavStatus();
-        },
-
-        _getTitle: function (date) {
-            return this.d.formatDate(this.opts.navTitles[this.d.view], date)
-        },
-
-        _addButton: function (type) {
-            if (!this.$buttonsContainer.length) {
-                this._addButtonsContainer();
-            }
-
-            var data = {
-                    action: type,
-                    label: this.d.loc[type]
-                },
-                html = Datepicker.template(button, data);
-
-            this.$buttonsContainer.append(html);
-        },
-
-        _addButtonsContainer: function () {
-            this.d.$datepicker.append(buttonsContainerTemplate);
-            this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker);
-        },
-
-        setNavStatus: function () {
-            if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
-
-            var date = this.d.parsedDate,
-                m = date.month,
-                y = date.year,
-                d = date.date;
-
-            switch (this.d.view) {
-                case 'days':
-                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
-                        this._disableNav('prev')
-                    }
-                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
-                        this._disableNav('next')
-                    }
-                    break;
-                case 'months':
-                    if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
-                        this._disableNav('prev')
-                    }
-                    if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
-                        this._disableNav('next')
-                    }
-                    break;
-                case 'years':
-                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
-                        this._disableNav('prev')
-                    }
-                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
-                        this._disableNav('next')
-                    }
-                    break;
-            }
-        },
-
-        _disableNav: function (nav) {
-            $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
-        },
-
-        _activateNav: function (nav) {
-            $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
-        },
-
-        _onClickNavButton: function (e) {
-            var $el = $(e.target),
-                action = $el.data('action');
-
-            this.d[action]();
-        },
-
-        _onClickNavTitle: function (e) {
-            if ($(e.target).hasClass('-disabled-')) return;
-
-            if (this.d.view == 'days') {
-                return this.d.view = 'months'
-            }
-
-            this.d.view = 'years';
-        }
-    }
-
-})();
-
 ;(function () {
     var templates = {
         days:'' +
@@ -1131,3 +990,144 @@ var Datepicker;
         }
     };
 })();
+
+;(function () {
+    var template = '' +
+        '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
+        '<div class="datepicker--nav-title">#{title}</div>' +
+        '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>',
+        buttonsContainerTemplate = '<div class="datepicker--buttons"></div>',
+        button = '<span class="datepicker--button" data-action="#{action}">#{label}</span>';
+
+    Datepicker.Navigation = function (d, opts) {
+        this.d = d;
+        this.opts = opts;
+
+        this.$buttonsContainer = '';
+
+        this.init();
+    };
+
+    Datepicker.Navigation.prototype = {
+        init: function () {
+            this._buildBaseHtml();
+            this._bindEvents();
+        },
+
+        _bindEvents: function () {
+            this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
+            this.d.$nav.on('click', '.datepicker--nav-title', $.proxy(this._onClickNavTitle, this));
+            this.d.$datepicker.on('click', '.datepicker--button', $.proxy(this._onClickNavButton, this));
+        },
+
+        _buildBaseHtml: function () {
+            this._render();
+            this._addButtonsIfNeed();
+        },
+
+        _addButtonsIfNeed: function () {
+            if (this.opts.todayButton) {
+                this._addButton('today')
+            }
+            if (this.opts.clearButton) {
+                this._addButton('clear')
+            }
+        },
+
+        _render: function () {
+            var title = this._getTitle(this.d.currentDate),
+                html = Datepicker.template(template, $.extend({title: title}, this.opts));
+
+            this.d.$nav.html(html);
+            if (this.d.view == 'years') {
+                $('.datepicker--nav-title', this.d.$nav).addClass('-disabled-');
+            }
+            this.setNavStatus();
+        },
+
+        _getTitle: function (date) {
+            return this.d.formatDate(this.opts.navTitles[this.d.view], date)
+        },
+
+        _addButton: function (type) {
+            if (!this.$buttonsContainer.length) {
+                this._addButtonsContainer();
+            }
+
+            var data = {
+                    action: type,
+                    label: this.d.loc[type]
+                },
+                html = Datepicker.template(button, data);
+
+            this.$buttonsContainer.append(html);
+        },
+
+        _addButtonsContainer: function () {
+            this.d.$datepicker.append(buttonsContainerTemplate);
+            this.$buttonsContainer = $('.datepicker--buttons', this.d.$datepicker);
+        },
+
+        setNavStatus: function () {
+            if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
+
+            var date = this.d.parsedDate,
+                m = date.month,
+                y = date.year,
+                d = date.date;
+
+            switch (this.d.view) {
+                case 'days':
+                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'months':
+                    if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'years':
+                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+            }
+        },
+
+        _disableNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
+        },
+
+        _activateNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
+        },
+
+        _onClickNavButton: function (e) {
+            var $el = $(e.target),
+                action = $el.data('action');
+
+            this.d[action]();
+        },
+
+        _onClickNavTitle: function (e) {
+            if ($(e.target).hasClass('-disabled-')) return;
+
+            if (this.d.view == 'days') {
+                return this.d.view = 'months'
+            }
+
+            this.d.view = 'years';
+        }
+    }
+
+})();

gulpfile.js

@@ -1,56 +1,30 @@
 var gulp = require('gulp'),
     watch = require('gulp-watch'),
-    rename = require('gulp-rename'),
+    livereload = require('gulp-livereload');
-    sass = require('gulp-sass'),
-    uglify = require('gulp-uglify'),
-    livereload = require('gulp-livereload'),
-    concat = require('gulp-concat');
 
-gulp.task('js', function () {
+gulp.task('css', require('./tasks/css'));
-    gulp.src(['js/datepicker/datepicker.js',
+gulp.task('js', require('./tasks/js'));
-        'js/datepicker/navigation.js',
+gulp.task('i18n', require('./tasks/i18n'));
-        'js/datepicker/body.js'])
+gulp.task('cssPage', require('./tasks/cssPage'));
-        .pipe(concat('datepicker.js'))
-        .pipe(gulp.dest('dist/js/'))
-        .pipe(livereload())
-});
 
-gulp.task('sass', function () {
-    gulp.src('sass/datepicker.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(rename('datepicker.css'))
-        .pipe(gulp.dest('dist/css/'))
-        .pipe(livereload())
-});
 
-gulp.task('locale', function () {
-    gulp.src('js/datepicker/i18n/*.js')
-        .pipe(gulp.dest('dist/js/i18n'))
-});
-
-gulp.task('build', ['js', 'sass', 'locale']);
-
-gulp.task('pageSass', function () {
-    gulp.src('sass/page-init.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(rename('style.css'))
-        .pipe(gulp.dest('css/'))
-        .pipe(livereload())
-});
 
 gulp.task('watch', function () {
     livereload.listen();
 
-    gulp.watch('sass/**/*.scss', ['pageSass', 'sass']).on('change', function (file) {
+    gulp.watch('src/sass/*.scss', ['css']).on('change', function (file) {
         livereload.changed(file)
     });
 
-    gulp.watch('js/**/*.js', ['js']).on('change', function (file) {
+    gulp.watch('src/js/**/*.js', ['js']).on('change', function (file) {
+        livereload.changed(file)
+    });
+
+    gulp.watch('page/sass/*.scss', ['cssPage']).on('change', function (file) {
         livereload.changed(file)
     });
 });
 
-gulp.task('default', ['build', 'pageSass', 'watch']);
 
 
 

index.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8">
         <title>Datepicker</title>
-        <link rel="stylesheet" href="css/style.css"/>
+        <link rel="stylesheet" href="page/css/style.css"/>
         <link rel="stylesheet" href="dist/css/datepicker.css"/>
         <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
     </head>
@@ -40,14 +40,15 @@
         <script type="text/javascript" src="dist/js/i18n/datepicker.en.js"></script>
         <script type="text/javascript">
             var $start = $('[name="start"]'),
-                    $end = $('[name="end"]');
+                    $end = $('[name="end"]').hide();
 
             $start.datepicker({
+                inline: true,
                 onSelect: function (format, date) {
                     $end.data('datepicker')
                             .update('minDate', date)
                 }
-            })
+            }).data('datepicker').show()
             $end.datepicker({
                 position: 'right top',
                 onSelect: function (format, date) {

package.json

@@ -2,9 +2,13 @@
   "name": "datepicker",
   "version": "0.0.1",
   "devDependencies": {
+    "autoprefixer": "^6.1.0",
     "gulp": "^3.9.0",
+    "gulp-clone": "^1.0.0",
     "gulp-concat": "^2.6.0",
     "gulp-livereload": "^3.8.0",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-postcss": "^6.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4",
     "gulp-uglify": "^1.2.0",

page/css/style.css

@@ -0,0 +1 @@
+html{font-family:Tahoma,sans-serif;font-size:13px}.contents{width:960px;margin:0 auto;padding:1px 0}.contents article{margin:60px 0 30px}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}body{margin:0}body,html{width:100%;height:100%}*,:after,:before{box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}b,strong{font-weight:700}i{font-style:italic}a{outline:0}textarea{overflow:auto}

sass/datepicker.scss

@@ -1,3 +0,0 @@
-@import "datepicker/datepicker";
-@import "datepicker/navigation";
-@import "datepicker/cell";

sass/page-init.scss

@@ -1,2 +0,0 @@
-@import "reset";
-@import "page";

src/js/i18n/datepicker.en.js

@@ -0,0 +1,11 @@
+Datepicker.language['en'] = {
+    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    months: ['January','February','March','April','May','June', 'July','August','September','October','November','December'],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    today: 'Today',
+    clear: 'Clear',
+    dateFormat: 'mm/dd/yy',
+    firstDay: 0
+};

src/sass/_datepicker-config.scss

@@ -1,9 +1,17 @@
 $dayCellSize: 32px;
-$datepickerWidth: 7 * $dayCellSize;
+$datepickerWidth: 232px;
+$datepickerMinBodyHeight: 170px;
 $datepickerBorderRadius: 2px;
 $datepickerPadding: 2px;
+
+$fontFamily: Tahoma;
+$fontSize: 14px;
+
 $yearsPerRow: 4;
-$textColor: #333;
+$textColor: (
+  common: #4a4a4a,
+  dayNames: #f5a33a,
+);
 
 $navigationHeight: 32px;
 $navigationButtonsOffset: 1px;

src/sass/cell.scss

@@ -11,13 +11,11 @@
 
 .datepicker--cell {
   border-radius: $datepickerBorderRadius;
-  color: $textColor;
   cursor: pointer;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
-  width: $dayCellSize;
   height: $dayCellSize;
   z-index: 1;
 
@@ -50,6 +48,26 @@
   }
 }
 
+//  Day names
+// -------------------------------------------------
+
+.datepicker--days-names {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.datepicker--day-name {
+  color: map_get($textColor, dayNames);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: $dayCellSize;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 13px;
+}
+
 //  Day cell
 // -------------------------------------------------
 
@@ -68,25 +86,34 @@
 
 .datepicker--months {}
 
-//  Month cells
+.datepicker--cells-months {
+  height: $datepickerMinBodyHeight;
+}
+
+//  Month cell
 // -------------------------
 
 .datepicker--cell-month {
   width: 33.33%;
-  height: 40px;
+  height: 25%;
 }
 
 //  Years
 // -------------------------------------------------
 
-.datepicker--years {}
+.datepicker--years {
+  height: $datepickerMinBodyHeight;
+}
 
-//  Month cells
+.datepicker--cells-years {
+  height: $datepickerMinBodyHeight;
+}
+//  Year cell
 // -------------------------
 
 .datepicker--cell-year {
   width: 100% / $yearsPerRow;
-  height: 40px;
+  height: 33.33%;
 
   &.-other-decade- {
     @extend %otherMonth;

src/sass/datepicker.scss

@@ -15,6 +15,9 @@
   border: 1px solid $borderColor;
   border-radius: $datepickerBorderRadius;
   box-sizing: content-box;
+  font-family: $fontFamily, sans-serif;
+  font-size: $fontSize;
+  color: map_get($textColor, common);
   width: $datepickerWidth;
   position: absolute;
   left: -100000px;
@@ -50,6 +53,10 @@
     opacity: 1;
     transform: none;
   }
+
+  .datepicker--pointer {
+    display: none;
+  }
 }
 
 .datepicker--content {
@@ -125,24 +132,4 @@ $pointerHalfSize: $pointerSize / 2 - 1;
   &.active {
     display: block;
   }
-}
+}
-
-
-//  Day names
-// -------------------------
-
-.datepicker--days-names {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.datepicker--day-name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  width: $dayCellSize;
-  height: $dayCellSize;
-  text-align: center;
-}
-

src/sass/navigation.scss

@@ -5,7 +5,6 @@
    ------------------------------------------------- */
 
 .datepicker--nav {
-  border-bottom: 1px solid $colorGrey;
   display: flex;
   justify-content: space-between;
   padding: $datepickerPadding;

tasks/css.js

@@ -0,0 +1,24 @@
+var gulp = require('gulp'),
+    rename = require('gulp-rename'),
+    sass = require('gulp-sass'),
+    postcss = require('gulp-postcss'),
+    autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions'] }),
+    clone = require('gulp-clone'),
+    minify = require('gulp-minify-css'),
+    concat = require('gulp-concat');
+
+module.exports = function () {
+    var stream = gulp.src('src/sass/*.scss')
+        .pipe(concat('datepicker.scss'))
+        .pipe(sass().on('error', sass.logError))
+        .pipe(postcss([autoprefixer]));
+
+    stream.pipe(clone())
+        .pipe(minify())
+        .pipe(rename('datepicker.min.css'))
+        .pipe(gulp.dest('dist/css'));
+
+    stream.pipe(clone())
+        .pipe(rename('datepicker.css'))
+        .pipe(gulp.dest('dist/css'))
+};

tasks/cssPage.js

@@ -0,0 +1,17 @@
+var gulp = require('gulp'),
+    rename = require('gulp-rename'),
+    sass = require('gulp-sass'),
+    postcss = require('gulp-postcss'),
+    autoprefixer = require('autoprefixer')({ browsers: ['last 2 versions'] }),
+    clone = require('gulp-clone'),
+    minify = require('gulp-minify-css'),
+    concat = require('gulp-concat');
+
+module.exports = function () {
+    gulp.src('page/sass/*.scss')
+        .pipe(concat('style.css'))
+        .pipe(sass().on('error', sass.logError))
+        .pipe(postcss([autoprefixer]))
+        .pipe(minify())
+        .pipe(gulp.dest('page/css'))
+};

tasks/i18n.js

@@ -0,0 +1,11 @@
+var gulp = require('gulp'),
+    rename = require('gulp-rename'),
+    uglify = require('gulp-uglify'),
+    sass = require('gulp-sass'),
+    clone = require('gulp-clone'),
+    concat = require('gulp-concat');
+
+module.exports = function () {
+    gulp.src('src/js/i18n/*.js')
+        .pipe(gulp.dest('dist/js/i18n'))
+};

tasks/js.js

@@ -0,0 +1,24 @@
+var gulp = require('gulp'),
+    rename = require('gulp-rename'),
+    uglify = require('gulp-uglify'),
+    sass = require('gulp-sass'),
+    clone = require('gulp-clone'),
+    concat = require('gulp-concat');
+
+module.exports = function () {
+    var stream = gulp.src([
+        'src/js/datepicker.js',
+        'src/js/body.js',
+        'src/js/navigation.js'
+    ])
+        .pipe(concat('datepicker.js'));
+
+    stream.pipe(clone())
+        .pipe(gulp.dest('dist/js'));
+
+    stream.pipe(clone())
+        .pipe(uglify())
+        .pipe(rename('datepicker.min.js'))
+        .pipe(gulp.dest('dist/js'))
+
+};