Pattern Lab

Pattern Lab

This is a test styleguide based on Brad Frost's Pattern Lab.
To learn more about StyleTester read the documentation or go directly to downloads.

Raw View

Atoms

In chemistry, atoms are the basic building blocks of matter. They have distinct properties and can't be broken down further without losing their meaning.

Translated to interfaces, atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.

Atoms are abstract and aren't often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles laid out at a glance.

Raw View

Text

Place your text here

Raw View

Headers

Title tags from h1 to h6

Raw View
<h1>Level 01 Heading</h1>

 <h2>Level 02 Heading</h2>

<h3>Level 03 Heading</h3>

<h4>Level 04 Heading</h4>

<h5>Level 05 Heading</h5>

 <h6>Level 06 Heading</h6>

Level 01 Heading

Level 02 Heading

Level 03 Heading

Level 04 Heading

Level 05 Heading
Level 06 Heading

Paragraphs

One paragraph tag.

Raw View
<p>Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

Inline elements

All inline markup tags for text.

Raw View
I am <a href="http://cuboctaedro.eu">the a tag</a> example<br>

I am <abbr title="test">the abbr tag</abbr> example<br>

I am <acronym title="test">the acronym tag</acronym> example<br>

I am <b>the b tag</b> example<br>

I am <big>the big tag</big> example<br>

I am <cite>the cite tag</cite> example<br>

I am <code>the code tag</code> example<br>

I am <del>the del tag</del> example<br>

I am <dfn>the dfn tag</dfn> example<br>

I am <em>the em tag</em> example<br>

I am <i>the i tag</i> example<br>

I am <ins>the ins tag</ins> example<br>

I am <del>the del tag</del> <ins>the ins tag</ins> example<br>

I am <kbd>the kbd tag</kbd> example<br>

I am <mark>the mark tag</mark> example<br>

I am <q>the q tag <q>inside</q> a q tag</q> example<br>

I am <s>the s tag</s> example<br>

I am <samp>the samp tag</samp> example<br>

I am <small>the small tag</small> example<br>

I am <span>the span tag</span> example<br>

I am <strong>the strong tag</strong> example<br>

I am <sub>the sub tag</sub> example<br>

I am <sup>the sup tag</sup> example<br>

I am <time datetime="1973-02-23 06:00">the time tag</time> example<br>

I am <tt>the tt tag</tt> example<br>

I am <u>the u tag</u> example<br>

I am <var>the var tag</var> example<br>
I am the a tag example
I am the abbr tag example
I am the acronym tag example
I am the b tag example
I am the big tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the del tag the ins tag example
I am the kbd tag example
I am the mark tag example
I am the q tag inside a q tag example
I am the s tag example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
I am example
I am the tt tag example
I am the u tag example
I am the var tag example

Time

Place your text here

Raw View
<time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

Blockquote

A blockquote with a cite tag for attribution.

Raw View
<blockquote>
            <p>This is a very important bloquote among normal paragraphs. The text is placed inside a p tag. Check the margins.</p>
            <p>And this is the second paragraph of the famous quotation.</p>
</blockquote>
<p><cite><a href="/">And this is the cite.</a></cite> (in a p tag)</p>

This is a very important bloquote among normal paragraphs. The text is placed inside a p tag. Check the margins.

And this is the second paragraph of the famous quotation.

And this is the cite. (in a p tag)

Preformated Text

Place your text here

Raw View
<pre>  	
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 
</pre>
  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [  ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Lists

Raw View

Unordered list

Nested lists with long and short list items.

Raw View
<ul>
    <li>An unordered list. List item 01</li>
    <li>List item 02</li>
    <li>List item 03 with sublist
        <ul>
		<li>List item level 2</li>
		<li>List item level 2 with subsublist
			<ul>
				<li>List item level 3</li>
				<li>List item level 3. A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
			</ul>
		</li>
                <li>List item level 2</li>
	</ul>
    </li>
    <li>A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
     <li>List item</li>
</ul>
  • An unordered list. List item 01
  • List item 02
  • List item 03 with sublist
    • List item level 2
    • List item level 2 with subsublist
      • List item level 3
      • List item level 3. A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • List item level 2
  • A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • List item

Ordered list

Nested ordered lists.

Raw View
<ol>
	<li>An ordered list. List item 01</li>
	<li>List item 02</li>
	<li>List item 03 with sublist
		<ol>
			<li>List item level 2</li>
			<li>List item level 2 with subsublist
				<ol>
					<li>List item level 3</li>
					<li>List item level 3</li>
				</ol>
			</li>
                        <li>List item level 2</li>
		</ol>
	</li>
	<li>A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
	<li>List item</li>
</ol>
  1. An ordered list. List item 01
  2. List item 02
  3. List item 03 with sublist
    1. List item level 2
    2. List item level 2 with subsublist
      1. List item level 3
      2. List item level 3
    3. List item level 2
  4. A long list item. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  5. List item

Definition List

Raw View
<dl>
    <dt>Definition List</dt>
    <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>
Definition List
A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.
This is the definition of that term, which both live in a dl.
Here is another term.
And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
And it gets a definition too, which is this line.

Tables

Raw View

Table

Place your text here

Raw View
<table>
	<thead>
		<tr>
			<th>Table Heading 1</th>
			<th>Table Heading 2</th>
			<th>Table Heading 3</th>
			<th>Table Heading 4</th>
			<th>Table Heading 5</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Table Footer 1</th>
			<th>Table Footer 2</th>
			<th>Table Footer 3</th>
			<th>Table Footer 4</th>
			<th>Table Footer 5</th>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	<tr>
		<td>Table Cell 1</td>
		<td>Table Cell 2</td>
		<td>Table Cell 3</td>
		<td>Table Cell 4</td>
		<td>Table Cell 5</td>
	</tr>
	</tbody>
</table>
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4 Table Footer 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Forms

Place your text here

Raw View

Text Fields

Place your text here

Raw View
<fieldset>
    <div class="field-container">
        <label for="text">Text Input <abbr title="Required">*</abbr></label>
        <input id="text" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Type your Password">
    </div>
    <div class="field-container">
        <label for="webaddress">Web Address</label>
        <input id="webaddress" type="url" placeholder="http://yoursite.com">
    </div>
    <div class="field-container">
        <label for="emailaddress">Email Address</label>
        <input id="emailaddress" type="email" placeholder="name@email.com">
    </div>
    <div class="field-container">
        <label for="search">Search</label>
        <input id="search" type="search" placeholder="Enter Search Term">
    </div>
    <div class="field-container">
        <label for="text">Number Input <abbr title="Required">*</abbr></label>
        <input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
    </div>
    <div class="field-container">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
    </div>
    <div class="field-container">
        <label class="error">Error Input</label>
        <input class="is-error" type="text" placeholder="Text Input">
    </div>
    <div class="field-container">
        <label  class="valid">Valid</label>
        <input  class="is-valid" type="text" placeholder="Text Input">
    </div>
</fieldset>

Checkbox

Place your text here

Raw View
<form action="#">
    <fieldset class="options">
        <legend>Checkbox <abbr title="Required">*</abbr></legend>
        <ul>
            <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
            <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
            <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
        </ul>
    </fieldset>
</form>
Checkbox *

Radio Buttons

Place your text here

Raw View
<form action="#">
    <fieldset class="options">
        <legend>Radio</legend>
        <ul>
            <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
            <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
            <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
        </ul>
    </fieldset>
</form>
Radio

Select Menu

Place your text here

Raw View
<fieldset>
    <div class="field-container">
        <label for="select">Select</label>
        <select id="select">
            <optgroup label="Option Group">
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </optgroup>
        </select>
    </div>
</fieldset>

Molecules

In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Building up from atoms to molecules encourages a “do one thing and do it well” mentality, and encourages creating reusable interface patterns

Raw View

Text

Place your text here

Raw View

Inline elements in use

Inline tags used inside a

tag. (use to check line-height consistency).

Raw View
<p>Lorem ipsum dolor sit amet, natum tibique accusam sed ex, eos electram imperdiet et. Maiorum contentiones <a href="http://cuboctaedro.eu">the a tag</a> no ius, vim suas impetus in, <abbr title="test">the abbr tag</abbr> usu te debet error viris. Putent <acronym title="test">the acronym tag</acronym> reprimique ne usu. Cum <b>the b tag</b> eu copiosae disputando, ut <big>the big tag</big> duo eleifend <cite>the cite tag</cite> accommodare. Ex cum elit <code>the code tag</code> veritus, an qui <dfn>the dfn tag</dfn> munere iriure. Eam <em>the em tag</em> tibique repudiare <i>the i tag</i> sadipscing id. Lorem <ins>the ins tag</ins> ipsum dolor sit amet, <del>the del tag</del> <ins>the ins tag</ins> natum tibique <kbd>the kbd tag</kbd> accusam <mark>the mark tag</mark> sed <q>the q tag <q>inside</q> a q tag</q> ex, <s>the s tag</s> eos electram imperdiet et. Maiorum <samp>the samp tag</samp> contentiones no <small>the small tag</small> ius, vim <strong>the strong tag</strong> suas impetus <sub>the sub tag</sub> in, usu te debet error viris. <sup>the sup tag</sup> Putent reprimique ne usu. <tt>the tt tag</tt> Cum eu copiosae disputando, ut <u>the u tag</u> duo eleifend accommodare. <var>the var tag</var> Ex cum elit veritus, an qui munere iriure. Eam tibique repudiare sadipscing id.</p>

Lorem ipsum dolor sit amet, natum tibique accusam sed ex, eos electram imperdiet et. Maiorum contentiones the a tag no ius, vim suas impetus in, the abbr tag usu te debet error viris. Putent the acronym tag reprimique ne usu. Cum the b tag eu copiosae disputando, ut the big tag duo eleifend the cite tag accommodare. Ex cum elit the code tag veritus, an qui the dfn tag munere iriure. Eam the em tag tibique repudiare the i tag sadipscing id. Lorem the ins tag ipsum dolor sit amet, the del tag the ins tag natum tibique the kbd tag accusam the mark tag sed the q tag inside a q tag ex, the s tag eos electram imperdiet et. Maiorum the samp tag contentiones no the small tag ius, vim the strong tag suas impetus the sub tag in, usu te debet error viris. the sup tag Putent reprimique ne usu. the tt tag Cum eu copiosae disputando, ut the u tag duo eleifend accommodare. the var tag Ex cum elit veritus, an qui munere iriure. Eam tibique repudiare sadipscing id.

Paragraphs in article

Three paragraphs inside an article.

Raw View
<article>
    <p>Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>
    <p>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</p>
    <p>Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?</p>
</article>

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.

Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?

Organisms

Organisms are groups of molecules (and possibly atoms) joined together to form distinct section of an interface.

Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Raw View
Top
clicking on "#styletester-show-sizesoprtions" toggles class "visible" on "#styletester-menu-sizes" clicking on "#styletester-sizes-xs" toggles class "styletester-xs" on "#styletester-content-wrapper" clicking on "#styletester-sizes-s, styletester-sizes-m, styletester-sizes-l, styletester-sizes-xl, styletester-sizes-f" removes class "styletester-xs" on "#styletester-content-wrapper" clicking on "#styletester-sizes-s" toggles class "styletester-s" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xs, styletester-sizes-m, styletester-sizes-l, styletester-sizes-xl, styletester-sizes-f" removes class "styletester-s" on "#styletester-content-wrapper" clicking on "#styletester-sizes-m" toggles class "styletester-m" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xs, styletester-sizes-s, styletester-sizes-l, styletester-sizes-xl, styletester-sizes-f" removes class "styletester-m" on "#styletester-content-wrapper" clicking on "#styletester-sizes-l" toggles class "styletester-l" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xs, styletester-sizes-s, styletester-sizes-m, styletester-sizes-xl, styletester-sizes-f" removes class "styletester-l" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xl" toggles class "styletester-xl" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xs, styletester-sizes-s, styletester-sizes-m, styletester-sizes-l, styletester-sizes-f" removes class "styletester-xl" on "#styletester-content-wrapper" clicking on "#styletester-sizes-f" toggles class "styletester-f" on "#styletester-content-wrapper" clicking on "#styletester-sizes-xs, styletester-sizes-s, styletester-sizes-m, styletester-sizes-l, styletester-sizes-xl" removes class "styletester-f" on "#styletester-content-wrapper" clicking on "#styletester-show" toggles class "showmenu" on "#styletester-site-wrapper" clicking on ".styletester-code-button" toggles class "visible" on "target"