Skip to content

Commit

Permalink
Merge pull request #415 from buzzfeed/SOLID-360-update-typography-doc…
Browse files Browse the repository at this point in the history 
…s-sample-text

SOLID-360 Update Typography Docs Sample Text
  • Loading branch information
@niederme
niederme authored Aug 25, 2016
2 parents 9b1e0b5 + 0b50826 commit fdbeab4
Showing 1 changed file with 50 additions and 50 deletions.
100 changes: 50 additions & 50 deletions docs/typography.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,57 +18,57 @@ <h2 class="xs-mb2 bold">Headers and Sizing</h2>
<code class="js-highlight">h1</code>, .<code class="js-highlight">xs-text-1</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">1.75rem, 28px</span>
</p>
<h1>BuzzFeed is the social news and entertainment company</h1>
<h1>The quick brown fox jumps over the lazy dog.</h1>
</div>
<div class="xs-mb4">
<p class="xs-mb1">
<code class="js-highlight">h2</code>, .<code class="js-highlight">xs-text-2</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">1.375rem, 22px</span>
</p>
<h2>BuzzFeed is the social news and entertainment company</h2>
<h2>The quick brown fox jumps over the lazy dog.</h2>
</div>
<div class="xs-mb4">
<p class="xs-mb1">
<code class="js-highlight">h3</code>, .<code class="js-highlight">xs-text-3</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">1.125rem, 18px</span>
</p>
<h3>BuzzFeed is the social news and entertainment company</h3>
<h3>The quick brown fox jumps over the lazy dog.</h3>
</div>
<div class="xs-mb4">
<p class="xs-mb1">
<code class="js-highlight">h4</code>, .<code class="js-highlight">xs-text-4</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">1rem, 16px</span>
</p>
<h4>BuzzFeed is the social news and entertainment company</h4>
<h4>The quick brown fox jumps over the lazy dog.</h4>
</div>
<div class="xs-mb4">
<p class="xs-mb1">
<code class="js-highlight">h5</code>, .<code class="js-highlight">xs-text-5</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">0.875rem, 14px</span>
</p>
<h5>BuzzFeed is the social news and entertainment company.</h5>
<h5>The quick brown fox jumps over the lazy dog.</h5>
</div>
<div class="xs-mb4">
<p class="xs-mb1">
<code class="js-highlight">h6</code>, .<code class="js-highlight">xs-text-6</code>
<span class="xs-text-5 text-gray-lightest xs-ml1">0.75rem, 12px</span>
</p>
<h6>BuzzFeed is the social news and entertainment company.</h6>
<h6>The quick brown fox jumps over the lazy dog.</h6>
</div>
<div class="xs-mb4">
{% highlight html %}
<h1>BuzzFeed is the social news and entertainment company</h1>
<p class="xs-text-1">BuzzFeed is the social news and entertainment company</p>
<h2>BuzzFeed is the social news and entertainment company</h2>
<p class="xs-text-2">BuzzFeed is the social news and entertainment company</p>
<h3>BuzzFeed is the social news and entertainment company</h3>
<p class="xs-text-3">BuzzFeed is the social news and entertainment company</p>
<h4>BuzzFeed is the social news and entertainment company</h4>
<p class="xs-text-4">BuzzFeed is the social news and entertainment company</p>
<h5>BuzzFeed is the social news and entertainment company</h5>
<p class="xs-text-5">BuzzFeed is the social news and entertainment company</p>
<h6>BuzzFeed is the social news and entertainment company</h6>
<p class="xs-text-6">BuzzFeed is the social news and entertainment company</p>
<h1>The quick brown fox jumps over the lazy dog.</h1>
<p class="xs-text-1">The quick brown fox jumps over the lazy dog.</p>
<h2>The quick brown fox jumps over the lazy dog.</h2>
<p class="xs-text-2">The quick brown fox jumps over the lazy dog.</p>
<h3>The quick brown fox jumps over the lazy dog.</h3>
<p class="xs-text-3">The quick brown fox jumps over the lazy dog.</p>
<h4>The quick brown fox jumps over the lazy dog.</h4>
<p class="xs-text-4">The quick brown fox jumps over the lazy dog.</p>
<h5>The quick brown fox jumps over the lazy dog.</h5>
<p class="xs-text-5">The quick brown fox jumps over the lazy dog.</p>
<h6>The quick brown fox jumps over the lazy dog.</h6>
<p class="xs-text-6">The quick brown fox jumps over the lazy dog.</p>
{% endhighlight %}
</div>

Expand All @@ -90,19 +90,19 @@ <h2 class="xs-mb2 bold">Slab Headers</h2>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">slab</code></p>
<h1 class="slab xs-mb2">BuzzFeed is the social news and entertainment company</h1>
<h2 class="slab xs-mb2">BuzzFeed is the social news and entertainment company</h2>
<h3 class="slab xs-mb2">BuzzFeed is the social news and entertainment company</h3>
<h4 class="slab xs-mb2">BuzzFeed is the social news and entertainment company</h4>
<h5 class="slab">BuzzFeed is the social news and entertainment company</h5>
<h1 class="slab xs-mb2">The quick brown fox jumps over the lazy dog.</h1>
<h2 class="slab xs-mb2">The quick brown fox jumps over the lazy dog.</h2>
<h3 class="slab xs-mb2">The quick brown fox jumps over the lazy dog.</h3>
<h4 class="slab xs-mb2">The quick brown fox jumps over the lazy dog.</h4>
<h5 class="slab">The quick brown fox jumps over the lazy dog.</h5>
</div>

{% highlight html %}
<h1 class="slab">BuzzFeed is the social news and entertainment company</h1>
<h2 class="slab">BuzzFeed is the social news and entertainment company</h2>
<h3 class="slab">BuzzFeed is the social news and entertainment company</h3>
<h4 class="slab">BuzzFeed is the social news and entertainment company</h4>
<h5 class="slab">BuzzFeed is the social news and entertainment company</h5>
<h1 class="slab">The quick brown fox jumps over the lazy dog.</h1>
<h2 class="slab">The quick brown fox jumps over the lazy dog.</h2>
<h3 class="slab">The quick brown fox jumps over the lazy dog.</h3>
<h4 class="slab">The quick brown fox jumps over the lazy dog.</h4>
<h5 class="slab">The quick brown fox jumps over the lazy dog.</h5>
{% endhighlight %}

</section>
Expand All @@ -116,32 +116,32 @@ <h2 class="xs-mb2 bold">Emphasis</h2>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">regular</code></p>
<p class="bold xs-mb1"><span class="regular">BuzzFeed is the</span> social news and entertainment company</p>
{% highlight html %}<p class="bold"><span class="regular">BuzzFeed is the</span>social news and entertainment company</p>{% endhighlight %}
<p class="bold xs-mb1"><span class="regular">The quick brown fox</span> jumps over the lazy dog.
{% highlight html %}<p class="bold"><span class="regular">The quick brown fox</span>jumps over the lazy dog.</p>{% endhighlight %}
</div>

<div class="xs-mb4">
<p class="xs-mb1"><code class="js-highlight">strong</code>, .<code class="js-highlight">bold</code></p>
<p class="xs-mb1"><strong>BuzzFeed is the social news and entertainment company</strong></p>
<p class="xs-mb1"><strong>The quick brown fox jumps over the lazy dog.</strong></p>
{% highlight html %}
<strong>BuzzFeed is the social news and entertainment company</strong>
<p class="bold">BuzzFeed is the social news and entertainment company</p>
<strong>The quick brown fox jumps over the lazy dog.</strong>
<p class="bold">The quick brown fox jumps over the lazy dog.</p>
{% endhighlight %}
</div>

<div class="xs-mb4">
<p class="xs-mb1"><code class="js-highlight">em</code>, .<code class="js-highlight">italic</code></p>
<p class="xs-mb1"><em>BuzzFeed is the social news and entertainment company</em></p>
<p class="xs-mb1"><em>The quick brown fox jumps over the lazy dog.</em></p>
{% highlight html %}
<em>BuzzFeed is the social news and entertainment company</em>
<p class="italic">BuzzFeed is the social news and entertainment company</p>
<em>The quick brown fox jumps over the lazy dog.</em>
<p class="italic">The quick brown fox jumps over the lazy dog.</p>
{% endhighlight %}
</div>

<div>
<p class="xs-mb1">.<code class="js-highlight">caps</code></p>
<p class="caps xs-mb1">BuzzFeed is the social news and entertainment company</p>
{% highlight html %}<p class="caps">BuzzFeed is the social news and entertainment company</p>{% endhighlight %}
<p class="caps xs-mb1">The quick brown fox jumps over the lazy dog.</p>
{% highlight html %}<p class="caps">The quick brown fox jumps over the lazy dog.</p>{% endhighlight %}
</div>

</section>
Expand All @@ -155,15 +155,15 @@ <h2 class="xs-mb2 bold">Overflow</h2>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">nowrap</code></p>
<p class="nowrap xs-overflow-hidden xs-mb1">BuzzFeed is the social news and entertainment company. BuzzFeed is redefining online advertising with its social, content-driven publishing technology. BuzzFeed provides the most shareable breaking news, original reporting, entertainment, and video across the social web to its global audience of more than 200M.</p>
<p class="nowrap xs-overflow-hidden xs-mb1">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>

{% highlight html %}<p class="nowrap">BuzzFeed is the social news and entertainment company. BuzzFeed is redefining online advertising with its social, content-driven publishing technology. BuzzFeed provides the most shareable breaking news, original reporting, entertainment, and video across the social web to its global audience of more than 200M.</p>{% endhighlight %}
{% highlight html %}<p class="nowrap">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>{% endhighlight %}
</div>

<p class="xs-mb1">.<code class="js-highlight">truncate</code></p>
<p class="xs-half-width truncate overflow-hidden xs-mb1">BuzzFeed is the social news and entertainment company. BuzzFeed is redefining online advertising with its social, content-driven publishing technology. BuzzFeed provides the most shareable breaking news, original reporting, entertainment, and video across the social web to its global audience of more than 200M.</p>
<p class="xs-half-width truncate overflow-hidden xs-mb1">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>

{% highlight html %}<p class="truncate">BuzzFeed is the social news and entertainment company. BuzzFeed is redefining online advertising with its social, content-driven publishing technology. BuzzFeed provides the most shareable breaking news, original reporting, entertainment, and video across the social web to its global audience of more than 200M.</p>{% endhighlight %}
{% highlight html %}<p class="truncate">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>{% endhighlight %}

</section>

Expand All @@ -176,29 +176,29 @@ <h2 class="xs-mb2 bold">Alignment</h2>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">xs-text-left</code></p>
<p class="xs-mb1 xs-text-left xs-border xs-py2">BuzzFeed is the social news and entertainment company</p>
<p class="xs-mb1 xs-text-left xs-border xs-py2">The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">xs-text-right</code></p>
<p class="xs-mb1 xs-text-right xs-border xs-py2">BuzzFeed is the social news and entertainment company</p>
<p class="xs-mb1 xs-text-right xs-border xs-py2">The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">xs-text-center</code></p>
<p class="xs-text-center xs-border xs-py2">BuzzFeed is the social news and entertainment company</p>
<p class="xs-text-center xs-border xs-py2">The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="xs-mb4">
<p class="xs-mb1">.<code class="js-highlight">xs-text-justify</code></p>
<p class="xs-mb1 xs-text-justify xs-border xs-py2">BuzzFeed is the social news and entertainment company. BuzzFeed is redefining online advertising with its social, content-driven publishing technology. BuzzFeed provides the most shareable breaking news, original reporting, entertainment, and video across the social web to its global audience of more than 200M.</p>
<p class="xs-mb1 xs-text-justify xs-border xs-py2">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>
</div>

{% highlight html %}
<p class="xs-text-left">BuzzFeed is the social news and entertainment company</p>
<p class="xs-text-center">BuzzFeed is the social news and entertainment company</p>
<p class="xs-text-right">BuzzFeed is the social news and entertainment company</p>
<p class="xs-text-justify">BuzzFeed is the social news and entertainment company</p>
<p class="xs-text-left">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-center">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-right">The quick brown fox jumps over the lazy dog.</p>
<p class="xs-text-justify">The quick brown fox jumps over the lazy dog. Puppy kitty ipsum dolor sit good dog drool fish maine coon cat pet harness pet food aquatic critters aquatic birds. Tooth collar swimming pet gate kitten fish sit chow feathers lol catz harness running bark tooth maine coon cat ID tag. Park wagging fluffy swimming mouse bird food litter mouse pet food mouse bird seed hamster window.</p>
{% endhighlight %}

</section>
Expand Down

0 comments on commit fdbeab4

Please sign in to comment.