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,101 @@
+/*!
+ * 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,
+blockquote, q, cite,
+code, pre,
+
+// 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

+{
+  margin: 0;
+  padding: 0;
+  border: 0;
+  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.

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