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'
h5bp · Sep 28, 2020 · 7e67f88 · 7e67f88
1 parent 323b497
commit 7e67f88
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 33 deletions.
diff --git a/dist/css/main.css → dist/css/style.css b/dist/css/main.css → dist/css/style.css
diff --git a/dist/doc/TOC.md b/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
diff --git a/dist/doc/css.md b/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.
diff --git a/dist/doc/usage.md b/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

diff --git a/dist/index.html b/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>

diff --git a/dist/package-lock.json b/dist/package-lock.json
diff --git a/dist/package.json b/dist/package.json
@@ -2,7 +2,7 @@
   "name": " ",
   "version": "0.0.1",
   "description": "",
-  "keywords": "",
+  "keywords": [""],
   "license": "",
   "author": "",
   "scripts": {

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -93,14 +93,17 @@ 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')
     .pipe(plugins().header(banner))
     .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'
   )

diff --git a/src/doc/TOC.md b/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
diff --git a/src/doc/css.md b/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.
diff --git a/src/doc/usage.md b/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

diff --git a/src/index.html b/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>

diff --git a/test/file_content.js b/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);
     });
 
   });

diff --git a/test/file_existence.js b/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',