From 020d528955302d35efe7f5f465159f193ac012f8 Mon Sep 17 00:00:00 2001 From: Rob Larsen Date: Mon, 24 Sep 2018 11:18:05 -0400 Subject: [PATCH 1/3] copies main.css from main.css project --- dist/css/main.css | 110 +++++++++--------- gulpfile.babel.js | 3 +- package.json | 1 + src/css/main.css | 278 ---------------------------------------------- 4 files changed, 61 insertions(+), 331 deletions(-) delete mode 100644 src/css/main.css diff --git a/dist/css/main.css b/dist/css/main.css index 86293f5910..7ae4a44ee3 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1,16 +1,18 @@ /*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */ +/* main.css 0.0.1 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ + /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ -html { + html { color: #222; font-size: 1em; line-height: 1.4; @@ -93,7 +95,10 @@ textarea { padding: 0.2em 0; } -/* ========================================================================== + + + + /* ========================================================================== Author's custom styles ========================================================================== */ @@ -112,8 +117,7 @@ textarea { - -/* ========================================================================== + /* ========================================================================== Helper classes ========================================================================== */ @@ -121,85 +125,86 @@ textarea { * Hide visually and from screen readers */ -.hidden { - display: none !important; + .hidden { + display: none !important; } /* - * Hide only visually, but have it available for screen readers: - * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility - * - * 1. For long content, line feeds are not interpreted as spaces and small width - * causes content to wrap 1 word per line: - * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe - */ +* Hide only visually, but have it available for screen readers: +* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility +* +* 1. For long content, line feeds are not interpreted as spaces and small width +* causes content to wrap 1 word per line: +* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe +*/ .visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; /* 1 */ + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; /* 1 */ } /* - * Extends the .visuallyhidden class to allow the element - * to be focusable when navigated to via the keyboard: - * https://www.drupal.org/node/897638 - */ +* Extends the .visuallyhidden class to allow the element +* to be focusable when navigated to via the keyboard: +* https://www.drupal.org/node/897638 +*/ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; - white-space: inherit; + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; + white-space: inherit; } /* - * Hide visually and from screen readers, but maintain layout - */ +* Hide visually and from screen readers, but maintain layout +*/ .invisible { - visibility: hidden; + visibility: hidden; } /* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ +* Clearfix: contain floats +* +* For modern browsers +* 1. The space content is one way to avoid an Opera bug when the +* `contenteditable` attribute is included anywhere else in the document. +* Otherwise it causes space to appear at the top and bottom of elements +* that receive the `clearfix` class. +* 2. The use of `table` rather than `block` is only necessary if using +* `:before` to contain the top-margins of child elements. +*/ .clearfix:before, .clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ + content: " "; /* 1 */ + display: table; /* 2 */ } .clearfix:after { - clear: both; + clear: both; } + /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ -@media only screen and (min-width: 35em) { + @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @@ -210,13 +215,14 @@ textarea { /* Style adjustments for high resolution devices */ } + /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ -@media print { + @media print { *, *:before, *:after { @@ -285,3 +291,5 @@ textarea { page-break-after: avoid; } } + + diff --git a/gulpfile.babel.js b/gulpfile.babel.js index d401a4631d..4912fc6a5f 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -118,10 +118,9 @@ gulp.task('copy:license', () => ); gulp.task('copy:main.css', () => { - const banner = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n`; - gulp.src(`${dirs.src}/css/main.css`) + gulp.src(`node_modules/main.css/dist/main.css`) .pipe(plugins().header(banner)) .pipe(plugins().autoprefixer({ browsers: ['last 2 versions', 'ie >= 9', '> 1%'], diff --git a/package.json b/package.json index 931b7e19a9..0e265ea4b0 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "gulp-rename": "^1.4.0", "gulp-replace": "^1.0.0", "jquery": "3.3.1", + "main.css": "file:../main.css/", "mocha": "^5.2.0", "modernizr": "3.6.0", "normalize.css": "8.0.0", diff --git a/src/css/main.css b/src/css/main.css deleted file mode 100644 index 0dab631493..0000000000 --- a/src/css/main.css +++ /dev/null @@ -1,278 +0,0 @@ -/* - * What follows is the result of much research on cross-browser styling. - * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, - * Kroc Camen, and the H5BP dev community and team. - */ - -/* ========================================================================== - Base styles: opinionated defaults - ========================================================================== */ - -html { - color: #222; - font-size: 1em; - line-height: 1.4; -} - -/* - * Remove text-shadow in selection highlight: - * https://twitter.com/miketaylr/status/12228805301 - * - * Vendor-prefixed and regular ::selection selectors cannot be combined: - * https://stackoverflow.com/a/16982510/7133471 - * - * Customize the background color to match your design. - */ - -::selection { - background: #b3d4fc; - text-shadow: none; -} - -/* - * A better looking default horizontal rule - */ - -hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #ccc; - margin: 1em 0; - padding: 0; -} - -/* - * Remove the gap between audio, canvas, iframes, - * images, videos and the bottom of their containers: - * https://github.com/h5bp/html5-boilerplate/issues/440 - */ - -audio, -canvas, -iframe, -img, -svg, -video { - vertical-align: middle; -} - -/* - * Remove default fieldset styles. - */ - -fieldset { - border: 0; - margin: 0; - padding: 0; -} - -/* - * Allow only vertical resizing of textareas. - */ - -textarea { - resize: vertical; -} - -/* ========================================================================== - Browser Upgrade Prompt - ========================================================================== */ - -.browserupgrade { - margin: 0.2em 0; - background: #ccc; - color: #000; - padding: 0.2em 0; -} - -/* ========================================================================== - Author's custom styles - ========================================================================== */ - - - - - - - - - - - - - - - - - -/* ========================================================================== - Helper classes - ========================================================================== */ - -/* - * Hide visually and from screen readers - */ - -.hidden { - display: none !important; -} - -/* - * Hide only visually, but have it available for screen readers: - * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility - * - * 1. For long content, line feeds are not interpreted as spaces and small width - * causes content to wrap 1 word per line: - * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe - */ - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - white-space: nowrap; /* 1 */ -} - -/* - * Extends the .visuallyhidden class to allow the element - * to be focusable when navigated to via the keyboard: - * https://www.drupal.org/node/897638 - */ - -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; - white-space: inherit; -} - -/* - * Hide visually and from screen readers, but maintain layout - */ - -.invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.clearfix:after { - clear: both; -} - -/* ========================================================================== - EXAMPLE Media Queries for Responsive Design. - These examples override the primary ('mobile first') styles. - Modify as content requires. - ========================================================================== */ - -@media only screen and (min-width: 35em) { - /* Style adjustments for viewports that meet the condition */ -} - -@media print, - (min-resolution: 1.25dppx), - (min-resolution: 120dpi) { - /* Style adjustments for high resolution devices */ -} - -/* ========================================================================== - Print styles. - Inlined to avoid the additional HTTP request: - https://www.phpied.com/delay-loading-your-print-css/ - ========================================================================== */ - -@media print { - *, - *:before, - *:after { - background: transparent !important; - color: #000 !important; /* Black prints faster */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - - a[href^="#"]:after, - a[href^="javascript:"]:after { - content: ""; - } - - pre { - white-space: pre-wrap !important; - } - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - /* - * Printing Tables: - * http://css-discuss.incutio.com/wiki/Printing_Tables - */ - - thead { - display: table-header-group; - } - - tr, - img { - page-break-inside: avoid; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} From 9b6f8b88073a4eb20e90d587da10cf29388ea304 Mon Sep 17 00:00:00 2001 From: Rob Larsen Date: Tue, 9 Oct 2018 10:05:23 -0400 Subject: [PATCH 2/3] Wiring up the proper dependency --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0e265ea4b0..c519566ca6 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "gulp-rename": "^1.4.0", "gulp-replace": "^1.0.0", "jquery": "3.3.1", - "main.css": "file:../main.css/", + "main.css": "1.0.0", "mocha": "^5.2.0", "modernizr": "3.6.0", "normalize.css": "8.0.0", From 2deb38003839e25972e524f775b6f4fc31d250e8 Mon Sep 17 00:00:00 2001 From: Rob Larsen Date: Tue, 9 Oct 2018 11:21:39 -0400 Subject: [PATCH 3/3] fixing a failing test --- dist/css/main.css | 2 +- test/file_content.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/css/main.css b/dist/css/main.css index 7ae4a44ee3..1f185287f1 100644 --- a/dist/css/main.css +++ b/dist/css/main.css @@ -1,6 +1,6 @@ /*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */ -/* main.css 0.0.1 | MIT License | https://github.com/h5bp/main.css#readme */ +/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, diff --git a/test/file_content.js b/test/file_content.js index 5eb4dfd47b..c7382249db 100644 --- a/test/file_content.js +++ b/test/file_content.js @@ -74,7 +74,7 @@ function runTests() { }); it('"main.css" should contain a custom banner', function (done) { - const string = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n\n/*\n`; + const string = `/*! HTML5 Boilerplate v${pkg.version} | ${pkg.license} License | ${pkg.homepage} */\n`; checkString(path.resolve(dir, 'css/main.css'), string, done); });