Issue 5573 - Add a CSS reset to website-defaults

scss/_reset.scss

Index: scss/_reset.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_reset.scss
@@ -0,0 +1,134 @@
+/*!
+ * 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
+ ******************************************************************************/
+
+/* Reset margins, paddings, and font globally */
+
+// General
+html, body,
+
+// Typography
+h1, h2, h3, h4, h5, h6,

[juliandoucette, 2017/09/01 10:30:58]

NIT: I like how these are grouped, but it is inconsistent with the selectors
below. If our code style forces us to list each selector on a new line then I
propose that we propose conditions in which we can group them on the same line
e.g. I think blockquote, q should be able to go on the same line (near the
bottom of this file); at least.

[ire, 2017/09/05 06:55:52]

I considered this particular selector (since it's so large) to be the exception.
Perhaps the condition in which they can be grouped together is if the number of
selectors is greater than a specific number (maybe 10?)

For the other selectors like `blockquote, q`, I don't really see the argument
for them also being changed given the code style is that selectors should be on
a new line other than the existence of this mega selector. 

[juliandoucette, 2017/09/06 16:31:55]

Acknowledged.

+a, p, span,
+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
+{
+  margin: 0px;
+  padding: 0px;
+  border: 0px;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* Add the correct display in IE 9-. */
+
+article,
+aside,
+footer,
+header,
+nav,
+section,
+main
+{
+  display: block;
+}
+
+/* Set default box-sizing (opinionated) */
+
+html
+{
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after
+{
+  box-sizing: inherit;
+}
+
+/* Remove the margin in all browsers (opinionated). */

[juliandoucette, 2017/09/01 10:30:59]

NIT: I would prefer to order these in terms of specificity e.g. *, html, body,
...

[ire, 2017/09/05 06:55:51]

I think it makes more sense in terms of readability to have box-sizing:
border-box to come before box-sizing: inherit, particularly since the styles are
grouped by purpose, but I don't feel particularly strongly about it so changed.

[juliandoucette, 2017/09/06 16:31:55]

Acknowledged.

+
+body
+{
+  margin: 0px;
+}
+
+/* Remove list styles (opinionated) */
+
+ol,
+ul
+{
+  list-style: none;
+}
+
+/* Remove quotes ("") (opinionated) */
+
+blockquote,

[juliandoucette, 2017/09/01 10:30:58]

NIT: We could point out which browsers this is for

[ire, 2017/09/05 06:55:52]

Done.

+q
+{
+  quotes: none;
+}
+
+blockquote:before,

[juliandoucette, 2017/09/01 10:30:59]

NIT: We could point out which browsers this is for

[ire, 2017/09/05 06:55:52]

Done.

+blockquote:after,
+q:before,
+q:after
+{
+  content: "";
+  content: none;
+}
+
+/* Share borders between adjacent cells (opinionated) */
+
+table
+{
+  border-collapse: collapse;
+  border-spacing: 0;
+}