Rename main.css to style.css in build process (#2342)

* Change CSS output file name to style.css

* Fix test against CSS file

* Update documentation after output file rename

* Bump 'package.json' after running build

* Documents change in 'CHANGELOG.md'

dist/doc/TOC.md

@@ -34,4 +34,4 @@ aspects of your website/web app (e.g.: the performance, security, etc.).
   * [Node.js](https://github.com/h5bp/server-configs-node)
 * [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
 * [create-html5-boilerplate](https://github.com/h5bp/create-html5-boilerplate) — Quick start HTML5 Boilerplate development
-* [main.css](https://github.com/h5bp/main.css) — the main.css file included with HTML5 Boilerplate
+* [main.css](https://github.com/h5bp/main.css) — the main.css file included (as style.css) with HTML5 Boilerplate

dist/doc/css.md

@@ -6,7 +6,7 @@ table of contents](TOC.md)
 HTML5 Boilerplate's CSS includes:
 
 * [Normalize.css](#normalizecss)
-* [main.css](#maincss)
+* [style.css](#stylecss)
 
 ## Normalize.css
 
@@ -26,7 +26,7 @@ As opposed to CSS resets, Normalize.css:
 For more information about Normalize.css, please refer to its [project
 page](https://necolas.github.io/normalize.css/).
 
-## main.css
+## style.css
 
 Several base styles are included that build upon `Normalize.css`. These styles:
 
@@ -38,7 +38,7 @@ Several base styles are included that build upon `Normalize.css`. These styles:
 * and more...
 
 These styles are included in
-[main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css).
-See the [main.css](https://github.com/h5bp/main.css) project
-[documentation](https://github.com/h5bp/main.css/blob/master/README.md#features)
+[style.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css)
+using [main.css](https://github.com/h5bp/main.css) project.
+See the main.css [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features)
 for a full discussion of these styles.

dist/doc/usage.md

@@ -30,8 +30,8 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ```
 .
 ├── css
-│   ├── main.css
-│   └── normalize.css
+│   ├── normalize.css
+│   └── style.css
 ├── doc
 ├── img
 ├── js

dist/index.html

@@ -17,7 +17,7 @@
   <!-- Place favicon.ico in the root directory -->
 
   <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/style.css">
 
   <meta name="theme-color" content="#fafafa">
 </head>

dist/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-boilerplate",
-  "version": "1.0.0",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2640,9 +2640,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -4540,9 +4540,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "version": "4.17.19",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
       "dev": true
     },
     "lodash.clone": {

dist/package.json

@@ -2,7 +2,7 @@
   "name": " ",
   "version": "0.0.1",
   "description": "",
-  "keywords": "",
+  "keywords": [""],
   "license": "",
   "author": "",
   "scripts": {

gulpfile.babel.js

@@ -93,7 +93,7 @@ gulp.task('copy:license', () =>
     .pipe(gulp.dest(dirs.dist))
 );
 
-gulp.task('copy:main.css', () => {
+gulp.task('copy:style', () => {
   const banner = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n`;
 
   return gulp.src('node_modules/main.css/dist/main.css')
@@ -101,6 +101,9 @@ gulp.task('copy:main.css', () => {
     .pipe(plugins().autoprefixer({
       cascade: false
     }))
+    .pipe(plugins().rename({
+      basename: 'style'
+    }))
     .pipe(gulp.dest(`${dirs.dist}/css`));
 });
 
@@ -128,8 +131,8 @@ gulp.task('modernizr', (done) => {
   // TODO: rework this flow instead of just reacting to the fact that the jQuery step is gone
   if (!fs.existsSync(`${dirs.dist}/js/vendor/`)){
     fs.mkdirSync(`${dirs.dist}/js/vendor/`);
-  } 
-  
+  }
+
   modernizr.build(modernizrConfig, (code) => {
     fs.writeFile(`${dirs.dist}/js/vendor/modernizr-${pkg.devDependencies.modernizr}.min.js`, code, done);
   });
@@ -152,7 +155,7 @@ gulp.task(
     'copy:.htaccess',
     'copy:index.html',
     'copy:license',
-    'copy:main.css',
+    'copy:style',
     'copy:misc',
     'copy:normalize'
   )

src/doc/TOC.md

@@ -34,4 +34,4 @@ aspects of your website/web app (e.g.: the performance, security, etc.).
   * [Node.js](https://github.com/h5bp/server-configs-node)
 * [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
 * [create-html5-boilerplate](https://github.com/h5bp/create-html5-boilerplate) — Quick start HTML5 Boilerplate development
-* [main.css](https://github.com/h5bp/main.css) — the main.css file included with HTML5 Boilerplate
+* [main.css](https://github.com/h5bp/main.css) — the main.css file included (as style.css) with HTML5 Boilerplate

src/doc/css.md

@@ -6,7 +6,7 @@ table of contents](TOC.md)
 HTML5 Boilerplate's CSS includes:
 
 * [Normalize.css](#normalizecss)
-* [main.css](#maincss)
+* [style.css](#stylecss)
 
 ## Normalize.css
 
@@ -26,7 +26,7 @@ As opposed to CSS resets, Normalize.css:
 For more information about Normalize.css, please refer to its [project
 page](https://necolas.github.io/normalize.css/).
 
-## main.css
+## style.css
 
 Several base styles are included that build upon `Normalize.css`. These styles:
 
@@ -38,7 +38,7 @@ Several base styles are included that build upon `Normalize.css`. These styles:
 * and more...
 
 These styles are included in
-[main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css).
-See the [main.css](https://github.com/h5bp/main.css) project
-[documentation](https://github.com/h5bp/main.css/blob/master/README.md#features)
+[style.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/style.css)
+using [main.css](https://github.com/h5bp/main.css) project.
+See the main.css [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features)
 for a full discussion of these styles.

src/doc/usage.md

@@ -30,8 +30,8 @@ A basic HTML5 Boilerplate site initially looks something like this:
 ```
 .
 ├── css
-│   ├── main.css
-│   └── normalize.css
+│   ├── normalize.css
+│   └── style.css
 ├── doc
 ├── img
 ├── js

src/index.html

@@ -17,7 +17,7 @@
   <!-- Place favicon.ico in the root directory -->
 
   <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/style.css">
 
   <meta name="theme-color" content="#fafafa">
 </head>

test/file_content.js

@@ -61,9 +61,9 @@ function runTests() {
       checkString(path.resolve(dir, 'index.html'), string, done);
     });
 
-    it('"main.css" should contain a custom banner', function (done) {
+    it('"style.css" should contain a custom banner', function (done) {
       const string = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n`;
-      checkString(path.resolve(dir, 'css/main.css'), string, done);
+      checkString(path.resolve(dir, 'css/style.css'), string, done);
     });
 
   });

test/file_existence.js

@@ -23,8 +23,8 @@ const expectedFilesInDistDir = [
 
   'css/', // for directories, a `/` character
   // should be included at the end
-  'css/main.css',
   'css/normalize.css',
+  'css/style.css',
 
   'doc/',
   'doc/TOC.md',