init

Author: Bunlong

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+demo.html

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 codefacebook
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

css/demo.css

@@ -0,0 +1,104 @@
+/* main styles */
+
+*, *:before, *:after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-size: 100%;
+  color: #444;
+  background-color: #fff;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+article {
+  max-width: 40em;
+  padding: 0 4em;
+  margin: 0 auto;
+}
+
+h1, h2 {
+  font-weight: normal;
+  margin-top: 1em;
+}
+
+p, a {
+  margin-top: 1em;
+}
+
+h2 + p {
+  margin-top: 0;
+}
+
+ul, ol {
+  margin: 1em 0 0 2em;
+}
+
+li {
+  margin-top: 0.5em;
+}
+
+pre {
+  white-space: pre;
+  padding: 2px 6px;
+  margin-top: 1em;
+  background-color: #ddd;
+  border-radius: 3px;
+  overflow: auto;
+}
+
+code {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+img {
+  max-width: 100%;
+}
+
+.bgimg {
+  background: url(https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/500x/man.jpg) 50% 50% no-repeat;
+  background-size: cover;
+  height: 300px;
+  margin-top: 0.5em;
+  font-size: 2em;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0 0 2px #000;
+}
+
+.bgimg.replace {
+  background-image: url(https://ucarecdn.com/718f79c5-2868-41c8-b56e-c87237674adb/-/resize/32x/man.jpg);
+}
+
+.primary {
+  width: 100vw;
+  left: 50%;
+  margin-left: -50vw;
+}
+
+.full, .boxout1, .boxout2 {
+  clear: both;
+  width: 100%;
+  box-shadow: 0 3px 4px #000;
+}
+
+@media (min-width: 40em) {
+
+  .boxout1, .boxout2 {
+    clear: both;
+    float: left;
+    width: 22em;
+    margin: 1em 1em 1em -4em;
+  }
+
+  .boxout2 {
+    float: right;
+    margin: 1em -4em 1em 1em;
+  }
+
+}

css/lazy-load-images.css

@@ -0,0 +1,33 @@
+/* progressive image CSS */
+.lazy-load {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  outline: none;
+}
+
+.lazy-load img {
+  display: block;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  border: 0 none;
+}
+
+.lazy-load img.preview {
+  filter: blur(2vw);
+  transform: scale(1.05);
+}
+
+.lazy-load img.reveal {
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform, opacity;
+  animation: lazyLoadReveal 1s ease-out;
+}
+
+@keyframes lazyLoadReveal {
+	0% { transform: scale(1.05); opacity: 0; }
+	100% { transform: scale(1); opacity: 1; }
+}

gulpfile.js

@@ -0,0 +1,30 @@
+var gulp = require('gulp');
+var concat = require('gulp-concat');
+var clean = require('gulp-rimraf');
+var cssmin = require("gulp-minify-css");
+var uglify = require('gulp-uglify');
+
+gulp.task('clean', [], function() {
+  console.log("Clean all files in lib folder");
+
+  return gulp.src("lib/*", { read: false }).pipe(clean());
+});
+
+gulp.task('css', [], function() {
+  console.log("Concat, move, and minify all the css files in styles folder");
+  return gulp.src("css/**.css")
+    .pipe(concat('lazy-load-images.min.css'))
+    .pipe(cssmin())
+    .pipe(gulp.dest('lib/css'));
+});
+
+gulp.task('javascript', function () {
+  console.log("Validate, Concat, Uglify, and Move all the javascript files");
+
+  return gulp.src("src/**.js")
+    .pipe(uglify())
+    .pipe(concat('lazy-load-images.min.js'))
+    .pipe(gulp.dest('lib/js'));
+});
+
+gulp.task('default', ['clean', 'css', 'javascript']);