feat: add build files, add docs/ and .github/

Luckygomane · May 27, 2019 · 79ad695 · 79ad695
1 parent 21869af
commit 79ad695
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 47 deletions.
diff --git a/CODE_OF_CONDUCT.md → .github/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md → .github/CODE_OF_CONDUCT.md
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -0,0 +1 @@
+> 💡 TODO: Add contributing guide
diff --git a/index.html → docs/index.html b/index.html → docs/index.html
@@ -1,28 +1,36 @@
 <!DOCTYPE html>
 <html lang='en'>
+
   <head>
     <title>Water.css</title>
-    <link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
+    <link id='stylesheet' rel='stylesheet' href='../dist/dark.css'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 
     <script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
     <script>
       window.dataLayer = window.dataLayer || []
-      function gtag(){dataLayer.push(arguments)}
+      function gtag() { dataLayer.push(arguments) }
       gtag('js', new Date())
       gtag('config', 'UA-116663597-6')
     </script>
   </head>
+
   <body>
     <h1>Water.css</h1>
     <p>
-      Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
+      Water.css is a just-add-css collection of styles to make simple websites like this just a
+      little bit nicer.
       <a href='https://github.com/kognise/water.css'>Get it already!</a>
     </p>
     <p>
-      Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
+      Now you can write your simple static site with nice semantic html, and Water.css will manage
+      the styling for you.
     </p>
-    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
+    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css'
+      target='_blank'><img id='ph'
+        src='https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily'
+        alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed'
+        style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
 
     <h2>Goals</h2>
     <ul>
@@ -36,8 +44,10 @@ <h2>Goals</h2>
 
     <h2>Is it responsive?</h2>
     <p>
-      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
-      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
+      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
+      responsive.
+      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive
+        viewport tag</a> and you'll be good to go!
     </p>
     <p>
       In fact, try resizing this page. Everything flows super nicely as you'll see.
@@ -127,15 +137,23 @@ <h3>Other</h3>
 
     <h3>Typography</h3>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis
+      ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis
+      ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius
+      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu
+      felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui
+      aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora
+      torquent per conubia nostra, per inceptos himenaeos.
+      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
+        emphasized!</em> And heck, <a href='/'>here</a>'s a link.
     </p>
 
     <blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
       "The HTML blockquote Element (or HTML Block Quotation Element) indicates
       that the enclosed text is an extended quotation. Usually, this is
       rendered visually by indentation (see
-      <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
+      <a
+        href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes'>Notes</a>
       for how to change it). A URL for the source of the quotation may be given using the
       <code>cite</code> attribute, while a text representation of the source
       can be given using the <code>&ltcite&gt</code> cite element."
@@ -160,9 +178,9 @@ <h3>Typography</h3>
       Addresses are also styled to be <strong>awesome</strong>!
     </p>
     <address>
-      <a href='mailto:john.doe@example.com'>john.doe@example.com</a><br/>
-      <a href='tel:778-330-2389'>778-330-2389</a><br/>
-      <a href='sms:666-666-6666'>666-666-6666</a><br/>
+      <a href='mailto:john.doe@example.com'>john.doe@example.com</a><br />
+      <a href='tel:778-330-2389'>778-330-2389</a><br />
+      <a href='sms:666-666-6666'>666-666-6666</a><br />
     </address>
 
     <h1>Heading 1</h1>
@@ -174,4 +192,5 @@ <h6>Heading 6</h6>
 
     <script src='script.js'></script>
   </body>
-</html>
+
+</html>
diff --git a/logo.png → docs/logo.png b/logo.png → docs/logo.png
diff --git a/logo.svg → docs/logo.svg b/logo.svg → docs/logo.svg
diff --git a/screenshot.jpg → docs/screenshot.jpg b/screenshot.jpg → docs/screenshot.jpg
diff --git a/script.js → docs/script.js b/script.js → docs/script.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -5,33 +5,36 @@ const cssnano = require('cssnano')
 const sourcemaps = require('gulp-sourcemaps')
 const bytediff = require('gulp-bytediff')
 const browserSync = require('browser-sync').create()
-const chalk = require('chalk');
-const rename = require('gulp-rename');
-const filter = require('gulp-filter');
+const chalk = require('chalk')
+const rename = require('gulp-rename')
+const filter = require('gulp-filter')
 const flatten = require('gulp-flatten')
 const sizereport = require('gulp-sizereport')
 const postcssCssVariables = require('postcss-css-variables')
 const postcssImport = require('postcss-import')
-const postcssColorModFunction = require('postcss-color-mod-function')
+const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
+  /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
+  stringifier: color => color.toRGBLegacy(),
+})
 
 const paths = {
   srcDir: 'src/*',
+  docsDir: 'docs/*',
   styles: { src: 'src/builds/*.css', dest: 'dist' },
-  html: { src: 'index.html' },
 }
 
 // https://stackoverflow.com/a/20732091
 function humanFileSize(size) {
-  var i = Math.floor(Math.log(size) / Math.log(1024));
-  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-};
+  var i = Math.floor(Math.log(size) / Math.log(1024))
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+}
 
 function formatByteMessage(source, data) {
   const prettyStartSize = humanFileSize(data.startSize)
-  let message = '';
+  let message = ''
 
   if (data.startSize !== data.endSize) {
-    const change = (data.savings > 0 ? 'saved' : 'gained')
+    const change = data.savings > 0 ? 'saved' : 'gained'
     const prettySavings = humanFileSize(Math.abs(data.savings))
     let prettyEndSize = humanFileSize(data.endSize)
 
@@ -41,26 +44,24 @@ function formatByteMessage(source, data) {
     message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
   } else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
 
-  return chalk`{cyan ${(source.padStart(12, ' '))}}: {bold ${data.fileName}} ${message}`
+  return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
 }
 
 function style() {
-  const isLegacyOrStandalone = path => /standalone|legacy/.test(path)
-
-  const excludeModern = filter(file => isLegacyOrStandalone(file.path), { restore: true })
-  const excludeLegacy = filter(file => !isLegacyOrStandalone(file.path), { restore: true })
+  const isLegacy = path => /legacy/.test(path)
 
-  const postcssColorMod = postcssColorModFunction({ stringifier: color => color.toRGBLegacy() })
+  const excludeModern = filter(file => isLegacy(file.path), { restore: true })
+  const excludeLegacy = filter(file => !isLegacy(file.path), { restore: true })
 
   return (
     gulp
       .src(paths.styles.src)
       // Add sourcemaps
       .pipe(sourcemaps.init())
       // Resolve imports and calculated colors
-      .pipe(postcss([postcssImport(), postcssColorMod]))
+      .pipe(postcss([postcssImport(), postcssColorModFunction()]))
 
-      // * Process legacy & standalone builds *
+      // * Process legacy builds *
       .pipe(excludeModern)
       // Inline variable values so CSS works in legacy browsers
       .pipe(postcss([postcssCssVariables()]))
@@ -69,7 +70,7 @@ function style() {
       // autoprefix
       .pipe(postcss([autoprefixer()]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeModern.restore)
 
       // * Process modern builds *
@@ -80,7 +81,7 @@ function style() {
       // TODO: Use separate browserslist to only apply prefixes needed in *modern* browsers
       .pipe(postcss([autoprefixer()]))
       // Write the amount gained by autoprefixing
-      .pipe(bytediff.stop((data) => formatByteMessage('autoprefixer', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('autoprefixer', data)))
       .pipe(excludeLegacy.restore)
 
       // Write the sourcemaps after making pre-minified changes
@@ -96,7 +97,7 @@ function style() {
       // Minify using cssnano
       .pipe(postcss([cssnano()]))
       // Write the amount saved by minifying
-      .pipe(bytediff.stop((data) => formatByteMessage('cssnano', data)))
+      .pipe(bytediff.stop(data => formatByteMessage('cssnano', data)))
       // Rename the files have the .min suffix
       .pipe(rename({ suffix: '.min' }))
       // Write the sourcemaps after making all changes
@@ -109,23 +110,19 @@ function style() {
   )
 }
 
-function reload() {
-  browserSync.reload()
-}
-
 function watch() {
   style()
 
   browserSync.init({
     server: {
       baseDir: './',
     },
-    startPath: 'index.html'
+    startPath: 'docs/index.html',
   })
 
   gulp.watch(paths.srcDir, style)
-  gulp.watch([paths.srcDir, paths.html.src], reload)
+  gulp.watch([paths.srcDir, paths.docsDir], browserSync.reload)
 }
 
 module.exports.style = style
-module.exports.watch = watch
+module.exports.watch = watch
diff --git a/index.js b/index.js
@@ -1,2 +1,2 @@
 const gulpfile = require('./gulpfile')
-gulpfile.watch()
+gulpfile.watch()
diff --git a/src/builds/dark-legacy.standalone.css b/src/builds/dark-legacy.standalone.css
@@ -0,0 +1,8 @@
+/**
+ * Standalone dark-themed version for legacy browsers.
+ * Includes dark variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../variables-dark.css';
+@import '../parts/_core.css';
diff --git a/src/builds/dark.standalone.css b/src/builds/dark.standalone.css
@@ -1,7 +1,7 @@
 /**
  * Standalone dark-themed version.
- * Includes dark variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
+ * Includes dark variables and core, left as CSS variables
+ * so the theming can be adjusted at runtime.
  */
 
 @import '../variables-dark.css';

diff --git a/src/builds/light-legacy.standalone.css b/src/builds/light-legacy.standalone.css
@@ -0,0 +1,8 @@
+/**
+ * Standalone light-themed version for legacy browsers.
+ * Includes light variables and core, compiled at build time so the final output
+ * will only include regular CSS, no variables.
+ */
+
+@import '../variables-light.css';
+@import '../parts/_core.css';
diff --git a/src/builds/light.standalone.css b/src/builds/light.standalone.css
@@ -1,7 +1,7 @@
 /**
  * Standalone light-themed version.
- * Includes light variables and core, compiled at build time so the final output
- * will only include regular CSS, no variables.
+ * Includes light variables and core, left as CSS variables
+ * so the theming can be adjusted at runtime.
  */
 
 @import '../variables-light.css';