Issue 4607 - Default content styles

scss/_content.scss

Index: scss/_content.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/scss/_content.scss
@@ -0,0 +1,264 @@
+/*!
+ * 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/>.
+ */
+
+/* UDL content styles
+ *******************************************************************************
+ * - Global
+ * - Headings
+ * - Body content
+ * - Alignment
+ ******************************************************************************/
+
+/* Global

[juliandoucette, 2016/11/22 00:54:04]

@Manvel can you also acknowledge and review the requirements to verify that I am
not forgetting something that should / shouldn't be in this component?

[saroyanm, 2016/11/24 13:26:51]

I've noticed that the ticket is out of sync, ex. we removed pre and code blocks,
considering to implement them in future. 
For the initial push I think this file looks good, we can add more styles as
soon we will align with designers, I think they also will review it as soon we
will have this ready.
Long story short: Let's move forward and add components as soon we will need
them in current file.

[saroyanm, 2016/11/24 15:18:42]

Acknowledged.

We will move forward and add more component by need.

[juliandoucette, 2016/11/25 16:28:43]

Done.

+ ******************************************************************************/
+
+html
+{
+  font-family: $primary-font;
+  font-size: $medium-font;
+  line-height: 1.15;

[juliandoucette, 2016/11/22 00:54:02]

Note: I think I should set the primary foreground and background colors here.

Thoughts @Manvel?

[saroyanm, 2016/11/24 13:26:52]

Agree.

[juliandoucette, 2016/11/25 16:28:42]

Done.

+}
+
+/**
+ * Center content within a (responsive) fixed width
+ */
+.container

[juliandoucette, 2016/11/22 00:54:04]

I'm considering moving this to _reset.scss and renaming _reset.scss to
_base.scss because there are few things being "reset" in _reset.scss and a
"container" is not "content".

Thoughts @Manvel?

[saroyanm, 2016/11/24 13:26:50]

I think we might need in future separate file for reset and normalization, but
I'm fine with it, make sense to separate them in the file. I'll be fine also
having reset and base separately. 
Don't feel strong regarding both solutions.
Also make sense to move ".full-width" class I think and "html" selector.

[saroyanm, 2016/11/24 15:18:44]

Acknowledged.

We will leave here only "markdown" related rules and move reset/normalization
related general and base rules to the _base.scss.

[juliandoucette, 2016/11/25 16:28:41]

Done.

+{
+  width: $mobile-width;
+  max-width: 100%;
+  margin: 0px auto;
+  padding: 0px $small-space;
+}
+
+@media(min-width: $tablet-breakpoint)

[saroyanm, 2016/11/21 18:44:39]

I thought we decided to move this rules to the bottom:
https://codereview.adblockplus.org/29361647/diff2/29362186:29363507/scss/_con...

[juliandoucette, 2016/11/22 00:54:04]

Acknowledged.

I shouldn't have moved this back.

[juliandoucette, 2016/11/25 16:28:43]

Done.

+{
+  .container
+  {
+    width: $tablet-width;

[saroyanm, 2016/11/21 18:44:40]

What about calculating container width according to the breakpoint value ? I
thought we agreed to do so. 

[juliandoucette, 2016/11/22 00:54:03]

No. 

I said before that:

- The breakpoints are exact numbers based on common device sizes
- The widths are rounded numbers that fit comfortably within the breakpoint
sizes

How would we calculate the widths without using SCSS methods like round (which
we are trying to avoid?) or subtracting very specific numbers (which are
invalidated if we change the breakpoints)?

[saroyanm, 2016/11/24 13:26:50]

I was suggestion something like -> "$tablet-breakpoint - 48px"

[saroyanm, 2016/11/24 15:18:43]

Acknowledged.

We will keep variables and not calculate according to breakpoints [designers
need to be on charge of changing them]

[juliandoucette, 2016/11/25 16:28:42]

Done.

+  }
+}
+
+@media(min-width: $desktop-breakpoint)
+{
+  .container
+  {
+    width: $desktop-width;
+  }
+}
+
+p,
+ol,
+ul,
+dl,
+pre,
+blockquote
+{
+  /* Set consistent margins (opinionated) */
+  margin: $small-space 0px;
+}
+
+/* Headings
+ ******************************************************************************/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+{
+  margin: $medium-space 0 $small-space 0;
+}
+
+h1
+{
+  font-size: round($large-font * 1.6);

[saroyanm, 2016/11/21 18:44:36]

I would avoid using SASS methods(like round) until it's really needed.

[saroyanm, 2016/11/21 18:44:40]

Thought: I think you already mentioned that and I want to stress that topic
again, what you think if we will start using more accessible measures (like ems)
for the fonts-sizes as you suggested while ago ?
That I assume may also solve the problem of multiplying and using round methods
here I think.

[juliandoucette, 2016/11/22 00:54:03]

The idea here was to base the larger font sizes on $large-font size. This is not
possible if we want to avoid using round().

I recommend using rem and a polyfill (for IE8 only, like we do already for media
queries, HTML5 tags, and other JavaScript features on some websites): 
https://github.com/chuckcarpenter/REM-unit-polyfill

[saroyanm, 2016/11/24 13:26:49]

What about having the floating pixel values ? Anyway if we will use relative
approach we will not need the rounding anymore.
* REMs are not completely supported till IE11 and apparently some limitation for
Chrome for Android.
* It mostly depends on the approach why you think we need REMs ? They act
differently and mostly depends on the approach we are trying to propose.
* With rems you can't change the font-size of child elements relatively by
assigning font-size to the parent.
* I think EMs provide more flexibility in this case

My suggestion was about improving accessibility and for that reason Even if we
will use 1 of two approaches we need to remove fixed font-size from HTML
element.

[saroyanm, 2016/11/24 15:18:43]

Acknowledged.
We will use Ems for everything content related, but keep away from the
components.

[juliandoucette, 2016/11/25 16:28:44]

Done.

Except for line-height because of
https://developer.mozilla.org/en/docs/Web/CSS/line-height#Prefer_unitless_num...

+}
+
+h2
+{
+  font-size: round($large-font * 1.4);
+}
+
+h3
+{
+  font-size: round($large-font * 1.2);
+}
+
+h4
+{
+  font-size: $large-font;
+}
+
+h5
+{
+  font-size: $medium-font;
+}
+
+h6
+{
+  font-size: $small-font;
+}
+
+/* Body content
+ ******************************************************************************/
+
+abbr
+{
+  text-decoration: underline dotted;

[saroyanm, 2016/11/21 18:44:36]

Apparently shorthand properties are only supported in Firefox and Safari ->
https://developer.mozilla.org/en/docs/Web/CSS/text-decoration 

[juliandoucette, 2016/11/22 00:54:03]

Acknowledged.

[juliandoucette, 2016/11/25 16:28:43]

Done.

+  cursor: help;
+}
+
+b,
+strong
+{
+  font-weight: $bold-weight;
+}
+
+small
+{
+  font-size: $small-font;
+}
+
+sup
+{
+  position: relative;
+  font-size: 75%;
+  vertical-align: super;
+}
+
+a,
+a:visited
+{
+  color: $accent;
+  /* Remove the gray background on active links in IE 10. */
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover,
+a:active,
+a:focus
+{
+  text-decoration: underline;
+}
+
+img
+{
+  /* Make fixed width images responsive */
+  max-width: 100%;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
+}
+
+hr
+{
+  border: 1px solid $secondary-light;
+}
+
+[dir="ltr"] blockquote
+{
+  padding-left: $small-space;
+  border-left: 5px solid $secondary-light;
+}
+
+[dir="rtl"] blockquote
+{
+  padding-right: $small-space;
+  border-right: 5px solid $secondary-light;
+}
+
+[dir="ltr"] ol,
+[dir="ltr"] ul
+{
+  padding-left: $small-space * 1.5;
+}
+
+[dir="rtl"] ol,
+[dir="rtl"] ul
+{
+  padding-right: $small-space * 1.5;
+}
+
+li
+{
+  margin: $small-space / 2 0px;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol
+{
+  /* prevent double spacing lists */
+  margin: 0px;
+}
+
+ol ol
+{
+  list-style-type: lower-alpha;
+}
+
+dt
+{
+  /* undo browser default (opinionated)*/
+  font-weight: $bold-weight;
+}
+
+dd
+{
+  margin: $small-space / 2 0px $small-space 0px;
+}
+
+/**
+ * Remove list style from vertical lists

[juliandoucette, 2016/11/27 21:45:36]

Note.

Removed .unstyled-list because it cannot be applied via Markdown with markdown
extensions.

EG:

- 1
- 2
- 3
{: .test }

Applies .test to the last list item, not the list.

I think we should implement this in a separate component like .embed.

+ */
+.unstyled-list,
+{
+  list-style-type: none;
+}
+
+[dir="ltr"] .unstyled-list
+{
+  padding-left: 0px;
+}
+
+[dir="rtl"] .unstyled-list
+{
+  padding-right: 0px;
+}
+
+[dir="ltr"] .unstyled-list .unstyled-list
+{
+  padding-left: $medium-space;
+}
+
+[dir="rtl"] .unstyled-list .unstyled-list
+{
+  padding-right: $small-space;
+}
+
+/* Alignment
+ ******************************************************************************/
+
+.full-width
+{
+  display: block;
+  width: 100%;
+  margin: $small-space 0px;
+}