Issue 4607 - Default content styles

scss/_reset.scss

Index: scss/_reset.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_reset.scss
@@ -0,0 +1,162 @@
+/*!
+ * This file is part of universal-design-language
+ * Copyright (C) 2016 Eyeo GmbH
+ *
+ * universal-design-language 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.
+ *
+ * universal-design-language 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 web.starter-kit.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* set box-sizing to border-box
+ * @see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+
+html
+{
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after
+{
+  box-sizing: inherit;
+}
+
+/* set top level fonts and colors */
+
+body

[saroyanm, 2016/11/03 19:41:14]

I'm not sure if this style belongs to the reset.css

[juliandoucette, 2016/11/03 22:59:38]

Acknowledged.

Where do you think it belongs?

[saroyanm, 2016/11/04 16:01:17]

I think _content.scss

[juliandoucette, 2016/11/04 17:32:26]

Acknowledged.

[juliandoucette, 2016/11/08 15:52:00]

Done.

+{
+  font-size: $medium-font;
+  color: $primary-foreground;
+  background-color: $primary-background;
+}
+
+/* set consistent margins */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul,
+dl,
+figure,
+blockquote
+{
+  margin: $small-space 0;

[saroyanm, 2016/11/03 19:41:14]

Detail: please specify units on all number values.

[juliandoucette, 2016/11/03 22:59:38]

Acknowledged.

+}
+
+li
+{
+  margin: $small-space / 2 0;

[saroyanm, 2016/11/03 19:41:14]

I've noticed we are using calculated margins on a lot of styles, why not to add
additional variable for that reason ?

[juliandoucette, 2016/11/03 22:59:38]

1. For simplicity
2. For consistency

These are supposed to be **minimal** sensible defaults. The better question is
"How many sizes should we specify?" What do you think?

[saroyanm, 2016/11/04 16:01:17]

This makes the size dependent of the $small-space size, if we are going to use
that way, fine with me.

[juliandoucette, 2016/11/04 17:32:27]

3 for now. Extend it later if we need to.

+}
+
+dd
+{
+  margin: $small-space / 2 0 $small-space 0;
+}
+
+[dir="ltr"] ol,
+[dir="ltr"] ul
+{
+  padding-left: $medium-space;
+}
+
+[dir="rtl"] ol,
+[dir="rtl"] ul
+{
+  padding-right: $medium-space;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol
+{
+  /* prevent double spacing lists */
+  margin: 0;
+}
+
+dt
+{
+  /* undo browser default */
+  font-weight: $bold-weight;
+}
+
+dd
+{
+  /* undo browser default */
+  margin-bottom: $small-space;
+}
+
+small
+{
+  font-size: $small-font;
+}
+
+abbr[data-original-title]
+{
+  cursor: help;
+}
+
+input,
+button,
+select,
+textarea
+{
+  /* undo browser default */
+  line-height: inherit;
+}
+
+/* undo browser default */
+
+[dir="ltr"] th

[saroyanm, 2016/11/03 19:41:14]

Are we using/planing to use Tables in our new designs ?
Why do we reset only th ?

[juliandoucette, 2016/11/03 22:59:38]

Yes. We will use tables for tabular data. This is not a reset. th default
text-align is center. I am setting it to left here.

[juliandoucette, 2016/11/04 17:32:27]

Done.

+{
+  text-align: left;
+}
+
+[dir="rtl"] th
+{
+  text-align: right;
+}
+
+/* remove image borders lt IE 10 */

[saroyanm, 2016/11/03 19:41:14]

I wonder if similar changes should belong to the normalize CSS ? 

[juliandoucette, 2016/11/03 22:59:38]

Acknowledged.

This is a mistake actually. Normalize.css seems to handle this already.

[juliandoucette, 2016/11/08 15:52:00]

Done.

+
+a img
+{
+  border:none;
+  outline:none;
+}
+
+/* undo browser defaults */
+
+fieldset
+{
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend
+{
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: $small-space 0;
+  font-size: $medium-font;
+  line-height: inherit;
+}