Issue 4607 - Default content styles

scss/_content.scss

+/*!
+ * 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/>.
+ */
+
+/*!
+ * This file contains parts of:
+ * - normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
+ */
+
+/* UDL content styles
+ *******************************************************************************
+ * - Global
+ * - Headings
+ * - Body content
+ * - Alignment
+ * - Media queries
+ ******************************************************************************/
+
+/* Global
+ ******************************************************************************/
+
+html
+{
+  font-family: $sans-font;
+  font-size: $medium-font;
+  line-height: 1.15;
+}
+
+/**
+ * Center content within a (responsive) fixed width
+ */
+.container
+{
+  max-width: 100%;
+  margin: 0px auto;
+  padding: 0px $small-space;
+}
+
+.container:after

[saroyanm, 2016/11/15 14:28:56]

Why are we clearing the container ? It's not float as far as I can see.

[juliandoucette, 2016/11/16 14:58:51]

Acknowledged.

[juliandoucette, 2016/11/17 16:09:34]

Done.

+{
+  display: block;
+  clear: both;
+  content: "";
+}
+
+/**
+ * Clear all floating elements
+ */
+.clearfix

[juliandoucette, 2016/11/16 14:58:48]

NOTE: We will drop this class and re-add if needed.

[juliandoucette, 2016/11/17 16:09:38]

Done.

+{
+  display: block;
+  clear: both;
+}
+
+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);
+}
+
+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;
+  cursor: help;
+}
+
+b,
+strong
+{
+  font-weight: $bold-weight;
+}
+
+small
+{
+  font-size: $small-font;
+}
+
+sup
+{
+  position: relative;
+  top: -0.5em;

[saroyanm, 2016/11/15 14:28:55]

Why are we using EMs here ?
I assume this change is for "Normalization" reasons ?

[juliandoucette, 2016/11/16 14:58:50]

Acknowledged.

We will remove this in favor of vertical-align: super.

[juliandoucette, 2016/11/17 16:09:38]

Done.

+  font-size: 75%;
+  /* Prevent `sub` and `sup` elements from affecting the line height */

[saroyanm, 2016/11/15 14:28:57]

Detail: It's only sup in this case, you can override both in reset CSS maybe ?

[juliandoucette, 2016/11/16 14:58:50]

Acknowledged.

We probably don't need line-height here.

[juliandoucette, 2016/11/17 16:09:35]

Done.

+  line-height: 0px;
+  vertical-align: baseline;

[saroyanm, 2016/11/15 14:28:56]

Why are we aligning to the baseline ? Doesn't looks like it provides any value.

[juliandoucette, 2016/11/16 14:58:48]

Acknowledged.

We will change this to vertical-align: super.

[juliandoucette, 2016/11/17 16:09:36]

Done.

+}
+
+a,
+a:visited
+{
+  /* Set default color and decoration (opinionated) */
+  color: $accent;
+  /* Remove the gray background on active links in IE 10. */
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover,
+a:active,
+a:focus
+{
+  /* Set default color and decoration (opinionated) */

[saroyanm, 2016/11/15 14:28:55]

* I can't see default color being set.
* I'm not sure if we need this comment at all/
* I think we can align with designers to style hover state to at least make it
obvious that users are hovering a link (can be done separately from this review)

[juliandoucette, 2016/11/16 14:58:50]

Acknowledged.

I will remove and/or adjust the comment.

[juliandoucette, 2016/11/17 16:09:38]

Done.

+  text-decoration: underline;
+}
+
+img
+{
+  margin: 0px $small-space / 2;
+  /* Remove the border on images inside links in IE 10-. */
+  border-style: none;
+}
+
+hr
+{
+  border-top: 0px;
+  border-bottom: 2px solid $gray;
+}
+
+[dir="ltr"] blockquote
+{
+  padding-left: $small-space;
+  border-left: 5px solid $gray;
+}
+
+[dir="rtl"] blockquote
+{
+  padding-right: $small-space;
+  border-right: 5px solid $gray;
+}
+
+pre
+{
+  overflow: auto;
+  padding: 0px $small-space;
+}
+
+code
+{
+  padding: 0px $small-space / 4;
+}
+
+pre,
+code
+{
+  background-color: $gray-light;
+  font-family: $monospace-font;
+  font-size: $medium-font;
+}
+
+pre code
+{
+  padding: 0px;
+}
+
+[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
+ */
+.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;
+}
+
+audio,

[saroyanm, 2016/11/15 14:28:57]

I think we only need this styles in case we will host videos/audios on our side,
but whhile we are using 3-rd party websites that ex. youtube which we are
loading in the Iframe this styles do not have an effect.

[juliandoucette, 2016/11/16 14:58:49]

Acknowledged.

Agreed.

[juliandoucette, 2016/11/17 16:09:34]

Done.

+video
+{
+  /* undo browser default (opinionated) */
+  display: block;
+}
+
+/**
+ * Embed 16x9 iframe video
+ */
+.embed
+{
+  display: block;
+  position: relative;
+  overflow: hidden;
+  padding: 0% 0% 56.25% 0%;
+}
+
+.embed iframe
+{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  /* undo browser default */
+  border: 0px;
+}
+
+/* Alignment
+ ******************************************************************************/
+
+/**
+ * Clear and stretch element full-width
+ */
+.full-width
+{
+  display: block;
+  clear: both;

[saroyanm, 2016/11/15 14:28:56]

Why are we clearing the full width elements ? 
I thought we are planing to control the clearing behavior on the floating
elements ex. setting up :after element, so I can't see a reason of using the
clear on the elements that suppose to be just a full width elements, or am I
missing smth ?

[juliandoucette, 2016/11/16 14:58:49]

Acknowledged.

We can handle this edge case with inline CSS or clearfix depending on how often
we run into it.

[juliandoucette, 2016/11/17 16:09:36]

Done.

+  overflow: auto;

[saroyanm, 2016/11/15 14:28:55]

Why do we need to set the overflow value here ?
I can't see a reason why the default value is not enough for this element ?

[juliandoucette, 2016/11/16 14:58:49]

Acknowledged.

This addresses an edge case where we put floating elements inside of a
full-width container. We will address this edge case individually instead of in
UDL.

[juliandoucette, 2016/11/17 16:09:35]

Done.

+  width: 100%;
+  margin: $small-space 0px;
+}
+
+.float-start,
+.float-end
+{
+  display: block;
+  margin: 0px 0px $small-space 0px;
+}
+
+/**
+ * Float to start-of-line
+ */
+[dir="ltr"] .float-start
+{
+  float: left;
+  margin-right: $small-space;
+}
+
+[dir="rtl"] .float-start
+{
+  float: right;
+  margin-left: $small-space;
+}
+
+/**
+ * Float to end-of-line
+ */
+[dir="ltr"] .float-end
+{
+  float: right;
+  margin-left: $small-space;
+}
+
+[dir="rtl"] .float-end
+{
+  float: left;
+  margin-right: $small-space;
+}
+
+/* Media queries
+ ******************************************************************************/
+
+@media(min-width: $mobile-breakpoint)

[saroyanm, 2016/11/15 14:28:56]

Seems like we started to support 4 different screen sizes in comparison to old
3:
1. Is this change intentional ?
2. I think if we support 4 sizes we need to change the naming, because
$mobile-breakpoint and $desktop-breakpoint behave inconsistently IMO.

[juliandoucette, 2016/11/16 14:58:50]

Acknowledged.

We will remove mobile-breakpoint and keep mobile-width.

[juliandoucette, 2016/11/17 16:09:35]

Done.

+{
+  .container
+  {
+    width: $mobile-width;
+  }
+}
+
+@media(min-width: $tablet-breakpoint)
+{
+  .container
+  {
+    width: $tablet-width;
+  }
+}
+
+@media(min-width: $desktop-breakpoint)
+{
+  .container
+  {
+    width: $desktop-width;
+  }
+}