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/>.
+ */
+
+/* HTML Content
+ *******************************************************************************
+ * 1. Headings
+ * 2. Blockquotes
+ * 3. Links
+ * 4. Code Blocks
+ * 5. Unstyled Lists
+ * 6. Image Alignment
+ * 7. Tables
+ * 8. Embeds
+ ******************************************************************************/
+
+/* Headings
+ ******************************************************************************/
+
+h1
+{
+  font-size: 42px;
+  margin-top: $large-space;
+}
+
+h2
+{
+  font-size: 36px;
+  margin-top: $large-space;
+}
+
+h3
+{
+  font-size: 24px;
+  margin-top: $medium-space;
+}
+
+h4
+{
+  font-size: 20px;
+  margin-top: $medium-space;
+}
+
+h5
+{
+  font-size: 16px;
+  margin-top: $small-space;
+}
+
+h6
+{
+  font-size: 14px;
+  margin-top: $small-space;
+}
+
+/* Blockquotes
+ ******************************************************************************/
+
+[dir="ltr"] blockquote
+{
+  padding-left: $small-space;
+  border-left: 5px solid $gray;
+}
+
+[dir="rtl"] blockquote
+{
+  padding-right: $small-space;
+  border-right: 5px solid $gray;
+}
+
+/* Links
+ ******************************************************************************/
+
+a,
+a:visited
+{
+  color: $blue-dark;

[juliandoucette, 2016/11/03 23:16:47]

Note: This should be $accent.

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

Acknowledged.

[juliandoucette, 2016/11/08 15:51:58]

Done.

+  text-decoration: none;
+}
+
+a:hover,
+a:active,
+a:focus
+{
+  text-decoration: underline;
+}
+
+/* Code Blocks
+ ******************************************************************************/
+
+pre,
+code
+{
+  padding: $small-space / 4;
+  background-color: $gray-light;
+}
+
+pre
+{
+  display: block;
+  padding: 0 $small-space;
+}
+
+pre > code
+{
+  padding: 0;
+  background-color: transparent;

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

Detail: we do set background-color for both of them to the same value, I think
this is redundant.

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

Acknowledged.

Good catch.

[juliandoucette, 2016/11/08 15:51:59]

Done.

+}
+
+/* Unstyled Lists
+ ******************************************************************************/
+
+.unstyled-list,
+.unstyled-list ul
+{
+  list-style-type: none;
+}
+
+[dir="ltr"] .unstyled-list
+{
+  padding-left: 0;
+}
+
+[dir="rtl"] .unstyled-list
+{
+  padding-right: 0;
+}
+
+[dir="ltr"] .unstyled-list ul
+{
+  padding-left: $medium-space;
+}
+
+[dir="rtl"] .unstyled-list ul
+{
+  padding-right: $small-space;
+}
+
+/* Image Alignment
+ ******************************************************************************/
+
+img
+{
+  margin: 0 $small-space / 2;
+}
+
+.block,
+.sol,

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

We need to document what short classnames mean

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

My mistake.

"SOL": "Start Of Line",
"EOL": "End Of Line"

You are right. I should expand these to "start-of-line", "end-of-line" or
document theme somewhere. Do you have a preference about how I do this?

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

I think if we use expanded version it will be in align with out style guide and
self explanatory. I'd vote for expanded version.

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

Use:

- float-start
- float-end

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

Done.

+.eol
+{
+  display: block;
+  margin: 0;
+}
+
+.block
+{
+  display: block;
+  width: 100%;
+  height: auto;

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

Nit: "auto" is default value we probably can skip it

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

See comment below.

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

My comment below is wrong, but setting heigh to auto I think still actual and
shouldn't be required I guess, while the initial value of height is auto
https://developer.mozilla.org/en/docs/Web/CSS/height 

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

Acknowledged.

[juliandoucette, 2016/11/08 15:51:59]

Done.

+  clear: both;
+  overflow: auto;

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

Nit: "auto" is default value we probably can skip it

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

I'm not sure about this. I will investigate further. The purpose of this .block
class is to clear and full width anything regardless of what is before or
inside. I don't remember why I made height and overflow auto ATM.

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

Scratch that - my mistake, the initial value of the overflow is "visible".

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

Acknowledged.

[juliandoucette, 2016/11/08 15:51:58]

Done.

+  margin: $small-space 0;
+}
+
+[dir="ltr"] .sol
+{
+  margin-right: $small-space;
+  float: left;

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

Regarding using floats would be great to ask for third opinion. I'm not sure
what was final decision regarding using floats.
Maybe if you can provide context we can ask @Thomas to comment under it.

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

I'm sorry. You were probably confused by the naming here. These classes are
intended to be used to float images to the start-of-line or end-of-line (which
is the actual purpose of floats).

I could alternatively call them .float-sol and .float-eol or something to avoid
confusion with text-align.

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

Acknowledged.

[juliandoucette, 2016/11/08 15:51:58]

Done.

+}
+
+[dir="rtl"] .sol
+{
+  margin-left: $small-space;
+  float: right;
+}
+
+[dir="ltr"] .eol
+{
+  margin-left: $small-space;
+  float: right;
+}
+
+[dir="rtl"] .eol
+{
+  margin-right: $small-space;
+  float: left;
+}
+
+/* Tables

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

Note: If we are planing to use tables for tabular datas we need to be sure that
we will fix responsiveness issues. I'm not sure if the table is a right element
to go.

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

I would suggest we use simple tables for simple tabular data and address
advanced features like table responsiveness, scrolling, nesting, etc, in a
separate component when/if they come up.

I included minimal table styles because we do have some simple tables in our
websites and they are supported by markdown.

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

Fine with me while we are planing to make them responsive.

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

We will leave out tables.

[juliandoucette, 2016/11/08 15:51:59]

Done.

+ ******************************************************************************/
+
+table
+{
+  border-collapse: collapse;
+  width: 100%;
+}
+
+td,
+th
+{
+  padding: $small-space / 4 $small-space / 2;
+}
+
+th

[juliandoucette, 2016/11/03 23:16:47]

NOTE: These th, tr:nth-child(even) should be combined.

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

Acknowledged.

[juliandoucette, 2016/11/08 15:51:59]

Done.

+{
+  background-color: $white;
+}
+
+tr:nth-child(even)
+{
+  background-color: $white;
+}
+
+tr:nth-child(odd)
+{
+  background-color: $gray-light;
+}
+
+/* Embeds
+ ******************************************************************************/
+
+.embed

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

Why are we using this wrapper for iframe ?

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

See comment below.

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

Done.

+{
+  position: relative;
+  display: block;
+  height: 0;

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

Detail: This property looks to be redundant

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

See comment below.

[juliandoucette, 2016/11/08 15:51:59]

Done.

+  padding: 0 0 56.25% 0;
+  overflow: hidden;
+}
+
+.embed iframe
+{
+  position: absolute;
+  top: 0;
+  bottom: 0;

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

Deatail: this property looks to be redundant 

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

Sorry for the confusion. These are the same styles that were in Acceptable Ads
for responsive videos. I adapted these styles from Bootstrap 4:

"embed-responsive embed-responsive-16by9" -> ".embed",
"embed-responsive-item" -> ".embed iframe"

I trust that they crafted these styles intentionally and tested them
extensively.

If you are OK with using these styles then we should at least put a comment
about this in the source code.

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

- We can remove bottom
- Add comment about how it works

[juliandoucette, 2016/11/08 15:51:59]

Done.

+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}