Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Portal content update #34

Merged
merged 15 commits into from
Dec 19, 2018
Merged

Portal content update #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
41c805c
Fixing line height issues h1 small and h3
kgmurphy Dec 10, 2018
c73138b
Fixing small tags and classes
kgmurphy Dec 10, 2018
190f191
QA font sizes from figma file
kgmurphy Dec 11, 2018
60d8981
Cleaning up typographic elements
kgmurphy Dec 11, 2018
a997c35
typography section updating
kgmurphy Dec 11, 2018
9ca8162
Adding content to the article pattern
kgmurphy Dec 11, 2018
4c05721
Added new images
kgmurphy Dec 12, 2018
151b3fb
Added article pattern content
kgmurphy Dec 13, 2018
35169d8
fix: define new sizes usage to the core styling
tujoworker Dec 19, 2018
ffdd7b6
fixup! fix: define new sizes usage to the core styling
tujoworker Dec 19, 2018
4f8269f
fix: cleanup article pattern
tujoworker Dec 19, 2018
70adb1e
Merge pull request #33 from dnbexperience/pattern-content
kgmurphy Dec 19, 2018
b2fbf1c
feat: some files where updated/added | version.lock, icons.lock
tujoworker Dec 19, 2018
22f167e
feat: some pages where updated/added | Article.txt
tujoworker Dec 19, 2018
78bac6c
define more clear what the last update date/time on the portal means
tujoworker Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions packages/dnb-design-system-portal/src/pages/quickguide-designer/font-families.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import React from 'react'

const Syntax = () => (
<>
<h5>Fedra Sans Book</h5>
<div className="typography-box">
<div className="typo-book">
<h2>This is the Fedra Sans Book</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -17,7 +17,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -28,9 +28,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Book Italic</h5>
<div className="typography-box">
<div className="typo-book-italic">
<h2>This is the Fedra Sans Book Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -39,7 +40,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -50,9 +51,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5 className="typo-medium">Fedra Sans Medium</h5>
<div className="typography-box">
<div className="typo-medium">
<h2 className="typo-medium">This is the Fedra Sans Medium</h2>
<p className="typo-medium">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -61,7 +63,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -72,9 +74,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Medium Italic</h5>
<div className="typography-box">
<div className="typo-medium-italic">
<h2>This is the Fedra Sans Medium Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -83,7 +86,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -94,9 +97,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Light</h5>
<div className="typography-box">
<div className="typo-light">
<h2>This is the Fedra Sans Light</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -105,7 +109,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -116,9 +120,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>Fedra Sans Light Italic</h5>
<div className="typography-box">
<div className="typo-light-italic">
<h2>This is the Fedra Sans Light Italic</h2>
<p>
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -127,7 +132,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -138,9 +143,10 @@ const Syntax = () => (
</div>
</div>
</div>

<h5>This is the Fedra Sans Bold</h5>
<div className="typography-box">
<div className="typo-bold">
<h2>This is the Fedra Sans Bold</h2>
<p className="typo-bold">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -149,7 +155,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand All @@ -160,9 +166,9 @@ const Syntax = () => (
</div>
</div>
</div>
<h5>Fedra Sans Bold Italic</h5>
<div className="typography-box">
<div className="typo-bold-italic">
<h2>This is the Fedra Sans Bold Italic</h2>
<p className="typo-bold-italic">
Here is a paragraph with some nonsense lipsum text. Contrary to
popular belief, Lorem Ipsum passage, and going through the cites
Expand All @@ -171,7 +177,7 @@ const Syntax = () => (
&quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good
and Evil) by Cicero, written in 45 BC.
</p>
<h4>Here are some numbers:</h4>
<h5>Here are some numbers:</h5>
<div className="dnb-font-family-demo__numbers">
<p className="typo-number--lining">
<b>Lining:</b> 123456789
Expand Down
32 changes: 14 additions & 18 deletions packages/dnb-design-system-portal/src/pages/quickguide-designer/line-height.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,29 @@ When line heights are multiples of 8px (0.5rem), they will cause the content blo
#### These break _*neatly*_ on the grid (line heights 1rem, 1.5rem and 2rem)

Because their line-height **is** evenly divisible by 8.
<br />

##### Line height = 1rem (16px)

<div class="typography-box">
<ul>
<li>Line height = 1rem (16px)</li>
</ul>
<p class="lh-16">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
</p>
</div>

##### Line height = 1.5rem (24px)

<div class="typography-box">
<ul>
<li>Line height = 1.5rem (24px)</li>
</ul>
<p class="lh-24">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
</p>
</div>

##### Line height = 2rem (32px)

<div class="typography-box">
<ul>
<li>Line height = 2rem (32px)</li>
</ul>
<p class="lh-32">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
Expand All @@ -45,31 +43,29 @@ ne primis intellegat. Dico purto nullam sea an.
#### These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem)

Because their line-height **is not** evenly divisible by 8.
<br />

##### Line height = 0.75rem (12px)

<div class="typography-box">
<ul>
<li>Line height = 0.75rem (12px)</li>
</ul>
<p class="lh-12">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
</p>
</div>

##### Line height = 1.25rem (20px)

<div class="typography-box">
<ul>
<li>Line height = 1.25rem (20px)</li>
</ul>
<p class="lh-20">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
</p>
</div>

##### Line height = 1.75rem (28px)

<div class="typography-box">
<ul>
<li>Line height = 1.75rem (28px)</li>
</ul>
<p class="lh-28">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus. Est mediocrem reprimique contentiones ei, mea
ne primis intellegat. Dico purto nullam sea an.
Expand Down
Loading