+
+
+
+
+
+
+
+
+
Magazine Two Columns
+
+
+
+
+
+ Example
+
+
+
+
+
Column 1 text
Column 2 text
+
+
+
+
+
+ Markup
+
+ <div class="text-cols"><p><strong>Column 1</strong> text</p><p><strong>Column 2</strong> text</p></div>
+
+
+
+ Source: _typography.scss, line 346
+
+
+
+
+
+
+
+
+
+
Heading with border
+
+
+
+
+
+ Markup
+
+ <p class="text-context">Why WebSlides?</p>
+
+
+
+ Source: _typography.scss, line 376
+
+
+
+
+
+
+
+
+
+
Numbers (results, sales... )-
+
+
+
+
+
+ Markup
+
+ <p class="text-data">23,478,289</p>
+
+
+
+ Source: _typography.scss, line 314
+
+
+
+
+
+
+
+
+
+
+
+ Markup
+
+ <p class="text-emoji">😀😁😂😅😉😋😎😍</p>
+
+
+
+ Source: _typography.scss, line 296
+
+
+
+
+
+
+
+
+
+
Error, warning, success...
+
+
+
+
+
+ Example
+
+
+
+
+
Psychiatrists have long debated whether it really exists.
+
+
+
+
+
+ Markup
+
+ <p class="text-info">Psychiatrists have long debated whether it really exists.</p>
+
+
+
+ Source: _typography.scss, line 546
+
+
+
+
+
+
+
+
+
+
Questions & Answers
+
+
+
+
+
+ Example
+
+
+
+
+
+ - Driftwood
+ -
+
It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?
+
+ - Fiorello
+ -
+
No. It's no good.
+
+ - Driftwood
+ -
+
What's the matter with it?
+
+ - Fiorello
+ -
+
I don't know, let's hear it again.
+
+
+
+
+
+
+
+ Markup
+
+ <dl class="text-interview">
+ <dt>Driftwood</dt>
+ <dd>
+ <p>It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?</p>
+ </dd>
+ <dt>Fiorello</dt>
+ <dd>
+ <p>No. It's no good.</p>
+ </dd>
+ <dt>Driftwood</dt>
+ <dd>
+ <p>What's the matter with it?</p>
+ </dd>
+ <dt>Fiorello</dt>
+ <dd>
+ <p>I don't know, let's hear it again.</p>
+ </dd>
+</dl>
+
+
+
+ Source: _typography.scss, line 504
+
+
+
+
+
+
+
+
+
+
Typography Classes = .text-
+
+
+
+
+
+ Example
+
+
+
+
+
Create a simple web presence.
+
+
+
+
+
+ Markup
+
+ <p class="text-intro">Create a simple web presence.</p>
+
+
+
+ Source: _typography.scss, line 206
+
+
+
+
+
+
+
+
+
+
+
+ Markup
+
+ <p><span class="text-label">Website:</span> <a href="#">http://webslides.tv</a></p>
+
+
+
+ Source: _typography.scss, line 333
+
+
+
+
+
+
+
+
+
+
h1,h2... Promo/Landings
+
+
+
+
+
+ Example
+
+
+
+
+
Landings
+
+
+
+
+
+ Markup
+
+ <h1 class="text-landing">Landings</h1>
+
+
+
+ Source: _typography.scss, line 233
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+
+
Create a simple web presence.
+
+
+
+
+
+ Markup
+
+ <p class="text-lowercase">Create a simple web presence.</p>
+
+
+
+ Source: _typography.scss, line 286
+
+
+
+
+
+
+
+
+
+
Pull Quote Right/Left
+
+
+
+
+
+ Example
+
+
+
+
+
Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.
+
Psychiatrists have long debated whether it really exists.
+
Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.
+
Psychiatrists have long debated whether it really exists.
+
+
+
+
+
+ Markup
+
+ <p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-right">Psychiatrists have long debated whether it really exists.</p>
+<p>Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.</p>
+<p class="text-pull-left">Psychiatrists have long debated whether it really exists.</p>
+
+
+
+ Source: _typography.scss, line 449
+
+
+
+
+
+
+
+
+
+
+
+ Markup
+
+ <p class="text-separator">Separator</p>
+
+
+
+ Source: _typography.scss, line 418
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+
+
Create a simple web presence.
+
+
+
+
+
+ Markup
+
+ <p class="text-serif">Create a simple web presence.</p>
+
+
+
+ Source: _typography.scss, line 220
+
+
+
+
+
+
+
+
+
+
Subtitle (Before h1, h2)
+
+
+
+
+
+ Markup
+
+ <p class="text-subtitle">Powered by <a href="#">#WebSlides</a> <code>.text-subtitle</code></p>
+
+
+
+ Source: _typography.scss, line 250
+
+
+
+
+
+
+
+
+
+
+
+ Markup
+
+ <p class="text-symbols">* * *</p>
+
+
+
+ Source: _typography.scss, line 404
+
+
+
+
+
+
+
+
+
+ Example
+
+
+
+
+
Create a simple web presence.
+
+
+
+
+
+ Markup
+
+ <p class="text-uppercase">Create a simple web presence.</p>
+
+
+
+ Source: _typography.scss, line 276
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
index e1626ab..f682720 100644
--- a/src/scss/_typography.scss
+++ b/src/scss/_typography.scss
@@ -203,20 +203,41 @@ h3 [class*='bg-'] {
padding: .4rem .8rem;
}
-/*== 2.2. Typography Classes = .text- == */
+// Intro
+//
+// Typography Classes = .text-
+//
+// Markup:
+// Create a simple web presence.
+//
+// Styleguide Typography.Intro
.text-intro,
[class*='content-'] p {
font-size: 2.4rem;
line-height: 4rem;
}
-/* -- Serif -- */
+// Serif
+//
+// Maitree font
+//
+// Markup:
+// Create a simple web presence.
+//
+// Styleguide Typography.Serif
.text-serif,
h1 span {
font-family: 'Maitree', times, serif;
}
-/* -- h1,h2... Promo/Landings -- */
+// Landings
+//
+// h1,h2... Promo/Landings
+//
+// Markup:
+// Create a simple web presence.
+//
+// Styleguide Typography.Uppercase
.text-uppercase {
text-transform: uppercase;
}
+// Lowercase
+//
+// Markup:
+// Create a simple web presence.
+//
+// Styleguide Typography.Lowercase
.text-lowercase {
text-transform: lowercase;
}
-/* -- Emoji (you'll love this) -- */
+// Emoji
+//
+// You'll love this
+//
+// Markup:
+// Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.
+// Psychiatrists have long debated whether it really exists.
+// Imagine that you are in Florence. If you suddenly start to feel that you literally cannot breathe, you may be experiencing Stendhal Syndrome.
+// Psychiatrists have long debated whether it really exists.
+//
+// Styleguide Typography.Pull_Quote
[class*='text-pull'] {
font-size: 2.4rem;
font-weight: 400;
@@ -402,12 +501,31 @@ figure[class*='text-pull-'] {
padding-top: 0;
}
-/* -- Interviews (Questions & Answers) --- */
-/* --
-- name
-question or answer
-
+// - Driftwood
+// -
+//
It says, "The party of the first part shall be known in this contract as the party of the first part." How do you like that? That's pretty neat, eh?
+//
+// - Fiorello
+// -
+//
No. It's no good.
+//
+// - Driftwood
+// -
+//
What's the matter with it?
+//
+// - Fiorello
+// -
+//
I don't know, let's hear it again.
+//
+//
+//
+// Styleguide Typography.Interviews
.text-interview dt {
font-weight: 600;
margin-bottom: 0;
@@ -425,7 +543,14 @@ figure[class*='text-pull-'] {
}
-/* -- Info Messages (error, warning, success... -- */
+// Info Messages
+//
+// Error, warning, success...
+//
+// Markup:
+// Psychiatrists have long debated whether it really exists.
+//
+// Styleguide Typography.Info
.text-info {
font-size: 1.6rem;
line-height: 2.4rem;
diff --git a/src/scss/modules/_avatars.scss b/src/scss/modules/_avatars.scss
index adf1899..49dd9b4 100644
--- a/src/scss/modules/_avatars.scss
+++ b/src/scss/modules/_avatars.scss
@@ -2,6 +2,19 @@
12. Avatars - uifaces.com
=========================================== */
+// Avatars
+//
+// You'll love this
+//
+// Markup:
+// 
+//
+//
+//
+//
+//
+//
+// Styleguide Avatars
cite img,
img[class*='avatar-'] {
display: inline-block;