Skip to content

Commit 635586c

Browse files
madsrasmussenmadsrasmussen
authored
Merge pull request #82 from umbraco/feature/guidelines
Adding design guidelines
2 parents ccc98b4 + 9bb7a16 commit 635586c

27 files changed

+237
-594
lines changed

‎.storybook/preview-body.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script>
2+
document.body.classList.add('uui-root');
3+
document.body.classList.add('uui-text');
4+
</script>

‎.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { setCustomElements } from '@storybook/web-components';
22
import customElements from '../custom-elements.json';
3-
import '../packages/uui-css/lib/root.css';
3+
import '../packages/uui-css/lib/uui-css.css';
44
import 'https://cdn.skypack.dev/element-internals-polyfill';
55

66
const sort = (a, b) => {

‎package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uui-css/lib/custom-properties/sizes.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
--uui-size-space-1: 3px; /*--uui-size-1*/
3939
--uui-size-space-2: 6px; /*--uui-size-2*/
4040
--uui-size-space-3: 12px; /*--uui-size-4*/
41-
--uui-size-space-4: 15px; /*--uui-size-5*/
42-
--uui-size-space-5: 21px; /*--uui-size-7*/
41+
--uui-size-space-4: 18px; /*--uui-size-6*/
42+
--uui-size-space-5: 24px; /*--uui-size-8*/
4343

4444
--uui-size-layout-1: 24px; /*--uui-size-8*/
4545
--uui-size-layout-2: 30px; /*--uui-size-10*/
@@ -54,9 +54,10 @@
5454
/** Typography */
5555
--uui-type-default-size: var(--uui-size-5);
5656
--uui-type-small-size: var(--uui-size-4);
57-
--uui-type-h1-size: 66px; /*--uui-size-22*/
57+
--uui-type-h1-size: 60px; /*--uui-size-20*/
5858
--uui-type-h2-size: 42px; /*--uui-size-14*/
5959
--uui-type-h3-size: 30px; /*--uui-size-10*/
6060
--uui-type-h4-size: 21px;
6161
--uui-type-h5-size: var(--uui-type-default-size);
62+
--uui-type-h6-size: var(--uui-type-small-size);
6263
}

‎packages/uui-css/lib/guidelines.story.ts

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { html } from 'lit-html';
2+
3+
export default {
4+
title: 'Design/Style Guide',
5+
};
6+
7+
export const Layout = () => html`
8+
<article style="max-width:580px;">
9+
<div
10+
style="display:block; border-bottom: 1px solid var(--uui-color-cocoa-black); padding-top: var(--uui-size-layout-5); margin-bottom:var(--uui-size-layout-3); padding-bottom:var(--uui-size-layout-1);">
11+
<h1>Layout Style Guide</h1>
12+
<p class="uui-lead">
13+
Following predictable rhythms, will form harmonious arrangements<br />
14+
— ensuring a calm & friendly visual experience.
15+
</p>
16+
<p>
17+
The following guide will take you through the concepts of the Umbraco
18+
Layout System. The main purpose is to establish a common visual
19+
appearance by incorporating a common mathematical rhythm for spacing and
20+
sizing. This guide will suit you for contributing or implementing our
21+
design.
22+
</p>
23+
</div>
24+
25+
<h2>Baseline grid & base unit</h2>
26+
<p>
27+
Baseline grids is a classic layout method, the goal of it is to ensuring
28+
everything aligns vertically to a certain rhythm. This rhythm will be of
29+
same size as our base-unit, which almost everything in our design will be
30+
based upon.
31+
</p>
32+
<p>
33+
We have no technical ways to ensuring this in a web application, but we
34+
should try to follow this concept when we setup the layout of an
35+
application.
36+
</p>
37+
<blockquote>
38+
You can view the baseline grid at anytime by pressing CTRL + G on your
39+
keyboard.
40+
</blockquote>
41+
<p>
42+
Base-unit is 6px, providing sizing options of 6, 12, 18, 24, 30, 36, 42,
43+
... This provides a wide variety of sizes with noticeable difference.
44+
</p>
45+
46+
<h2>Spacing</h2>
47+
<p>
48+
The general rule of spacing is that the space between elements declares
49+
the relation of those. The more related elements should stay closer than
50+
ones that are less related. It's not a absolute rule as we can use other
51+
visual elements to indicate separation (ex.: a line or different
52+
background colors). When using pure space for separation we need to ensure
53+
the space divided is distinguishable for the eye.
54+
</p>
55+
<blockquote>
56+
The space between elements matters more than getting the size of the
57+
elements right.
58+
</blockquote>
59+
<p>
60+
The layout custom properties provides layout spacing options for most
61+
cases. using this system will ensure layout spacing will be coherent
62+
across different parts of the UI.
63+
</p>
64+
65+
<h2>Sizing</h2>
66+
<p>
67+
Sizing of visual elements is a very individual matter, consider the
68+
relations both internal and external of that context. Use the base-unit as
69+
the general unit but don't be scared to make minor adjustments if
70+
necessary, its common to make optical adjustments of a few pixels to make
71+
a space seem right.
72+
</p>
73+
</article>
74+
`;
75+
76+
export const Typography = () => html`
77+
<article style="max-width:580px;">
78+
<div
79+
style="display:block; border-bottom: 1px solid var(--uui-color-cocoa-black); padding-top: var(--uui-size-layout-5); margin-bottom:var(--uui-size-layout-3); padding-bottom:var(--uui-size-layout-1);">
80+
<h1>Typography Style Guide</h1>
81+
<p class="uui-lead">
82+
Typography should differentiate enough to establish a visual hierarchy,
83+
providing orientation points for a calm reading experience.
84+
</p>
85+
<p>
86+
The following guide will take you through the concepts of the Umbraco
87+
Typography Styles. This establishes a common textual layouts across
88+
parts and implementations.
89+
</p>
90+
</div>
91+
92+
<h2>Setup</h2>
93+
<p>
94+
The Umbraco Typography can be used on a full web application or on a
95+
dedicated spot. To set the font use the <b>uui-root</b> class on the root
96+
element or a element of interest. Additionally the <b>uui-text</b> class
97+
must be set to expose the Umbraco Typography Styles. See the UUI-CSS
98+
package for more.
99+
</p>
100+
101+
<h2>Paragraphs & other elements</h2>
102+
<p class="uui-lead">
103+
A lead paragraph can summarize the following text. Lead paragraphs does
104+
not have a corresponding native element, this is solved by applying the
105+
class 'uui-lead' to a &#60;p&#62; element.
106+
</p>
107+
<p>
108+
The default font-size is 15px, for a nice reading experience this conforms
109+
well with a line-height of 24px, (base-unit * 4).
110+
</p>
111+
112+
<blockquote>
113+
A blockquote can spice up the reading experience by highlighting a certain
114+
point.
115+
</blockquote>
116+
117+
<p>
118+
Each &#60;p&#62; tag is nicely separated, in this way its easier to
119+
identify and relocated after a distraction.
120+
</p>
121+
122+
<small>
123+
The &#60;small&#62; tag can be used for descriptions that cannot use too
124+
much space. The small descriptions use 12px, for a nice reading experience
125+
this conforms well with a line-height of 18px, (base-unit * 3).
126+
</small>
127+
128+
<h2>Headlines</h2>
129+
<p>
130+
The headlines can be used via the dedicated native tag or by one of the
131+
equivalent classes. This means that <b>Headline 1</b> can be used used via
132+
<b>&#60;h1&#62;</b> or the class <b>uui-h1</b>.
133+
</p>
134+
<h5>Headline H5</h5>
135+
<h4>Headline H4</h4>
136+
<h3>Headline H3</h3>
137+
<h2>Headline H2</h2>
138+
<h1>Headline H1</h1>
139+
<ul>
140+
<li>&#60;h5&#62; — .uui-h5</li>
141+
<li>&#60;h4&#62; — .uui-h4</li>
142+
<li>&#60;h3&#62; — .uui-h3</li>
143+
<li>&#60;h2&#62; — .uui-h2</li>
144+
<li>&#60;h1&#62; — .uui-h1</li>
145+
</ul>
146+
</article>
147+
`;

‎packages/uui-css/lib/local-typography.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/uui-css/lib/root.css

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/uui-css/lib/typography/root.css renamed to ‎packages/uui-css/lib/typography/uui-root.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
:root {
1+
.uui-root {
22
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
33
font-size: 15px;
4-
line-height: 1.6rem;
4+
line-height: calc(var(--uui-size-2) * 4);
55
-webkit-font-smoothing: antialiased;
66
font-smoothing: antialiased;
77
}

‎packages/uui-css/lib/typography/local.css renamed to ‎packages/uui-css/lib/typography/uui-text.css

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,81 @@
1-
h1 {
1+
.uui-text h1,
2+
.uui-text .uui-h1 {
23
font-size: var(--uui-type-h1-size);
34
line-height: var(--uui-size-layout-4);
45
font-weight: 300;
56
margin-left: -5px;
67
margin-top: var(--uui-size-layout-1);
78
margin-bottom: var(--uui-size-layout-1);
89
}
9-
h1:not(:first-child) {
10+
.uui-text p + h1,
11+
.uui-text p + .uui-h1 {
1012
margin-top: var(--uui-size-layout-4);
1113
}
1214

13-
h2 {
15+
.uui-text h2,
16+
.uui-text .uui-h2 {
1417
font-size: var(--uui-type-h2-size);
1518
line-height: var(--uui-size-layout-3);
1619
font-weight: 300;
17-
padding-top: 1px;
18-
padding-bottom: 5px;
1920
margin-left: -3px;
2021
margin-top: var(--uui-size-layout-1);
2122
margin-bottom: var(--uui-size-layout-1);
2223
}
23-
h2:not(:first-child) {
24+
.uui-text p + h2,
25+
.uui-text p + .uui-h2 {
2426
margin-top: var(--uui-size-layout-3);
2527
}
2628

27-
h3 {
29+
.uui-text h3,
30+
.uui-text .uui-h3 {
2831
font-size: var(--uui-type-h3-size);
2932
line-height: var(--uui-size-large);
3033
font-weight: 300;
31-
padding-top: var(--uui-size-1);
32-
padding-bottom: var(--uui-size-1);
3334
margin-left: -2px;
3435
margin-top: var(--uui-size-layout-1);
3536
margin-bottom: var(--uui-size-layout-1);
3637
}
37-
h3:not(:first-child) {
38-
margin-top: var(--uui-size-large);
39-
}
4038

41-
h4 {
39+
.uui-text h4,
40+
.uui-text .uui-h4 {
4241
font-size: var(--uui-type-h4-size);
4342
line-height: 21px;
4443
font-weight: 400;
4544
margin-left: -1px;
4645
margin-top: var(--uui-size-layout-1);
4746
margin-bottom: var(--uui-size-layout-1);
4847
}
49-
h4:not(:first-child) {
50-
margin-top: var(--uui-size-layout-1);
51-
}
5248

53-
h5 {
49+
.uui-text h5,
50+
.uui-text .uui-h5 {
5451
font-size: var(--uui-type-h5-size);
52+
line-height: inherit;
53+
font-weight: 700;
54+
margin-left: 0;
5555
margin-top: var(--uui-size-layout-1);
56-
margin-bottom: 0;
57-
}
58-
h5:not(:first-child) {
59-
margin-top: var(--uui-size-layout-1);
56+
margin-bottom: var(--uui-size-layout-1);
6057
}
6158

62-
p {
63-
padding-top: var(--uui-size-1);
64-
padding-bottom: var(--uui-size-1);
65-
margin-top: 0;
59+
.uui-text p {
60+
margin-top: var(--uui-size-layout-1);
6661
margin-bottom: var(--uui-size-layout-1);
6762
}
68-
p:last-child {
69-
margin-bottom: 0;
63+
.uui-text p.uui-lead {
64+
font-size: var(--uui-size-6);
7065
}
7166

72-
small {
67+
.uui-text small {
7368
display: inline-block;
74-
font-size: 12px;
75-
line-height: calc(var(--uui-size-base-unit) * 3);
69+
font-size: var(--uui-type-small-size);
70+
line-height: calc(var(--uui-size-2) * 3);
7671
margin-bottom: var(--uui-size-layout-1);
7772
}
7873

79-
blockquote {
74+
.uui-text blockquote {
8075
float: right;
8176
font-size: 15px;
8277
font-weight: 700;
8378
font-style: italic;
84-
padding-top: var(--uui-size-1);
85-
padding-bottom: var(--uui-size-1);
8679
margin-top: 0;
8780
margin-bottom: var(--uui-size-layout-1);
8881
margin-right: -0.035em;
@@ -91,22 +84,35 @@ blockquote {
9184
line-height: inherit;
9285
}
9386

94-
blockquote:before {
87+
.uui-text blockquote:before {
9588
content: open-quote;
96-
margin-left: -0.46em;
89+
margin-left: -0.4em;
9790
margin-right: 0.08em;
9891
vertical-align: bottom;
9992
font-weight: 400;
10093
font-size: 2em;
10194
}
10295

103-
blockquote:after {
96+
.uui-text blockquote:after {
10497
content: close-quote;
105-
margin-left: 0.08em;
106-
margin-right: -0.46em;
98+
margin-left: 0.04em;
99+
margin-right: -0.4em;
107100
vertical-align: bottom;
108101
font-weight: 400;
109102
font-size: 2em;
110103
margin-bottom: -2px;
111104
display: inline-block;
112105
}
106+
107+
.uui-text ul {
108+
list-style-type: square;
109+
padding-left: var(--uui-size-layout-1);
110+
margin-top: var(--uui-size-layout-1);
111+
margin-bottom: var(--uui-size-layout-1);
112+
}
113+
114+
.uui-text ol {
115+
padding-left: var(--uui-size-layout-1);
116+
margin-top: var(--uui-size-layout-1);
117+
margin-bottom: var(--uui-size-layout-1);
118+
}

‎packages/uui-css/lib/uui-css.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import './custom-properties.css';
2+
@import './typography/lato.css';
3+
@import './typography/uui-root.css';
4+
@import './typography/uui-text.css';

0 commit comments

Comments
 (0)