Issue 5573 - Add a CSS reset to website-defaults

scss/_reset.scss

 /*!
  * This file is part of website-defaults
  * Copyright (C) 2016-present eyeo GmbH
  *
  * website-defaults is free software: you can redistribute it and/or
  * modify it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
  * website-defaults is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 /*******************************************************************************
  * CSS Reset

[ire, 2017/08/28 17:29:10]

I created a different file instead of adding this to _base.scss . I think some
of the styles from there should be moved here (mostly the styles of elements not
classes)

[juliandoucette, 2017/08/30 10:04:28]

Acknowledged.

(I don't mind if you do that in this issue or another)

[ire, 2017/09/01 08:57:06]

Done.

  ******************************************************************************/
 
 /* Reset margins, paddings, and font globally */

[ire, 2017/08/28 17:29:10]

Most of this is based on Eric Meyer's reset
(http://meyerweb.com/eric/tools/css/reset/). It's in the public domain which is
why I didn't add any attribution.

[juliandoucette, 2017/08/30 10:04:28]

I think that we should mention it in our README anyway.

[ire, 2017/09/01 08:57:06]

Done.

 
 // General

[ire, 2017/08/28 17:29:10]

This was my attempt to organise the selectors better. I don't know if the
comments are helpful?

[juliandoucette, 2017/08/30 10:04:28]

I like them.

[ire, 2017/09/01 08:57:06]

Great

 html, body,
 
 // Typography
 h1, h2, h3, h4, h5, h6,
 a, p, span,
-em, small, strong, strike, s,
-abbr, mark, sub, sup,
+em, small, strong, sub, sup,
+strike, s, mark, del, ins,
+abbr, dfn,
 blockquote, q, cite,
 code, pre,
+kbd, samp, var, output, ruby,
 
 // Lists
 ol, ul, li, dl, dt, dd,
 
 // Layout
 div, section, article,
 main, aside, nav,
 header, hgroup, footer,
 
 // Media
 img, figure, figcaption,
 address, time,
 audio, video,
 canvas, object, iframe, embed,
 details, summary,
 
 // Forms
 fieldset, form, label, legend,
 
 // Tables
 table, caption,
 tbody, tfoot, thead,
-tr, th, td,
-
-// Other
-del, dfn, ins, kbd, samp, var, output, ruby

[juliandoucette, 2017/08/30 10:04:28]

NIT: [del, ins, strike, mark] seem related (editing) and [code, pre] + arguably
[samp, var, output, ruby] seem related. + kbd, samp are also quite similar.

I don't mind if you leave this as-is (it's only important that they are
included). But I would consider grouping the items mentioned above differently.

[ire, 2017/09/01 08:57:06]

Done. I moved them to typography and ordered them together by line

+tr, th, td
 {
-  margin: 0;
-  padding: 0;
-  border: 0;
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }
 
-/* Remove list styles */

[ire, 2017/08/28 17:29:10]

I'm undecided if we want/need this

[juliandoucette, 2017/08/30 10:04:28]

Acknowledged.

+/* Add the correct display in IE 9-. */
+
+article,
+aside,
+footer,
+header,
+nav,
+section,
+main
+{
+  display: block;
+}
+
+/* Set default box-sizing (opinionated) */
+
+*,
+*:before,
+*:after
+{
+  box-sizing: inherit;
+}
+
+html
+{
+  box-sizing: border-box;
+}
+
+/* Remove the margin in all browsers (opinionated). */
+
+body
+{
+  margin: 0px;
+}
+
+/* Remove list styles (opinionated) */
 
 ol,
 ul
 {
   list-style: none;
 }
 
-/* Remove quotes ("") */
+/* Remove quotes ("") in most browsers (opinionated) */
 
 blockquote,
 q
 {
   quotes: none;
 }
+
+/* Remove quotes ("") in Safari (opinionated) */
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after
 {
   content: "";
   content: none;
 }
 
-/* Share borders between adjacent cells */
+/* Share borders between adjacent cells (opinionated) */
 
 table
 {
   border-collapse: collapse;
   border-spacing: 0;
 }