Website Style Guide
This is a collection of elements that can be used throughout your site. The build includes common elements (buttons, titles, and so on) as well as a grid system and some javascript-powered widgets.
Colors Back to top
Branding and Theming
AIAA Blue
Primary theme color
Hex: #1a3d6d
RGB: 26, 61, 109
AIAA Green
Accent color
Hex: #78af03
RGB: 120, 175, 3
Navy
Call-to-Action Color
Hex: #0b1119
RGB: 11, 17, 25
Tints and Shades
Primary theme color tint
Hex: #264f86
RGB: 38, 79, 134
Primary theme color shade
Hex: #14325b
RGB: 20, 50, 91
Accent color tint
Hex: #8cc513
RGB: 140, 197, 19
Accent color shade
Hex: #537a00
RGB: 83, 122, 0
Action-oriented color tint
Hex: #253a59
RGB: 37, 58, 89
Action-oriented color shade
Hex: #070b10
RGB: 7, 11, 16
Text
Body copy
Hex: #0b1119
RGB: 11, 17, 25
Titling
Hex: #1a3d6d
RGB: 26, 61, 109
Utility
Warning
Hex: #941
RGB: 0,0,0
Background Shades
Light
Hex: #253a59
RGB: 37, 58, 89
Mid-range
Hex: #151f2e
RGB: 21, 31, 46
Dark
Hex: #0b1119
RGB: 11, 17, 25
Typography Back to top
AIAA is set in Noto Sans. Various weights and styles of Noto Sans are utilized as webfonts on the site.
The following are the basic typographic elements that form the foundation of the site's text styling. Please note that Sitefinity's WYSIWYG editor will offer much of this functionality out of the box, and those functions should be used over manual HTML editing.
<h1>Heading 1</h1>
Heading 1
<h2>Heading 2</h2>
Heading 2
<h3>Heading 3</h3>
Heading 3
<h4>Heading 4</h4>
Heading 4
<h5>Heading 5</h5>
Heading 5
<h6>Heading 6</h6>
Heading 6
<p>This is a paragraph.</p>
<p>Multiple paragraphs are visually separated by a space.</p>
This is a paragraph.
Multiple paragraphs are visually separated by a space.
<p>Lines can be <br /> manually broken up <br /> e.g. for addresses</p>
Lines can be
manually broken up
e.g. for addresses
<p><a href="http://google.com">Links</a> come with <a href="http://google.com">their own style</a> by default</p>
Links come with their own style by default
<ol>
<li>This is a numbered ("ordered") list</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Nobis minima facilis magni</li>
</ol>
- This is a numbered ("ordered") list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Nobis minima facilis magni
<ul>
<li>This is a dotted ("unordered") list</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
<li>Nobis minima facilis magni</li>
</ul>
- This is a dotted ("unordered") list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Nobis minima facilis magni
<div class="align-left">This text has been left-aligned.</div>
<div class="align-right">This text has been right-aligned.</div>
<div class="align-center">This text has been centered.</div>
<pre><code class="language-html"><p>This is a snippet of <strong>HTML</strong></p></code></pre>
<pre><code class="language-css">.this-is { some: css; }</code></pre>
<pre><code class="language-javascript">this.is('a snippet of ' + js);</code></pre>
Note: don't forget to entitize your HTML!
<p>This is a snippet of <strong>HTML</strong></p>
.this-is { some: css; }
this.is('a snippet of ' + js);
<p class="note">Note: this is a small hint or elaboration</p>
Note: this is a small hint or elaboration
<h3 class="highlight">Highlighted Text</h3>
<p>Certain parts of sentences might be more <span class="highlight">important</span> than others. <strong class="highlight">Make sure</strong> they're not confused for links.</p>
Highlighted Text
Certain parts of sentences might be more important than others. Make sure they're not confused for links.
<h3 class="warn">Oh No!</h3>
<p><span class="warn">This is a warning.</span> It might mean that <strong class="warn">something's gone wrong</strong> or perhaps <em class="warn">something really needs to be seen.</em></p>
Oh No!
This is a warning. It might mean that something's gone wrong or perhaps something really needs to be seen.
Buttons Back to top
Button styles can be applied to most any element, though they make most sense on <a>
, <button>
, and <input type="submit" />
elements.
Note: the #0
that can be seen in href
attributes here is simply a placeholder that can be replaced by any url.
Note: modifier classes (e.g. button--highlight
) are added to their base classes (e.g. button
) in accordance with the BEM naming convention.
<a href="#0" class="button">Standard Button</a>
<a href="#0" class="button button--highlight">Highlighted button</a>
<a href="#0" class="button button--action">Action button</a>
<a href="#0" class="button button--hollow">Primary hollow button</a>
<a href="#0" class="button button--hollow--highlight">Highlighted hollow button</a>
<a href="#0" class="button button--warn">Warning button</a>
<a href="#0" class="button button--cancel">Cancel button</a>
<a href="#0" class="button button--small">Small Button</a>
<a href="#0" class="button button--large">Large button</a>
<div class="align-center">
<a href="#0" class="button">Combining Button and Alignment</a>
</div>
<a href="#0" class="button button--highlight button--large">Combining Style and Size</a>
<p><a href="#0" class="button">Confirm</a> or <a href="#0" class="button button--cancel">Cancel</a></p>
Buttons lay out in line with text by default
<div class="button-group">
<a href="#0" class="button button--highlight">Register</a>
<a href="#0" class="button button--cancel">Learn More</a>
</div>
Button groups will calculate an optimized responsive button layout that fills the given space.
Icons
Icons are brought in via Font Awesome, and any icon in the Font Awesome 5 free collection may be used. Simply select an icon from that directory and copy its markup anywhere in the site.
<i class="fas fa-arrow-right"></i>
<i class="fas fa-binoculars"></i>
<i class="fas fa-bath"></i>
<i class="far fa-calendar-alt"></i>
<i class="fab fa-dropbox"></i>
<i class="fab fa-firefox"></i>
<i class="fas fa-expand-arrows-alt"></i>
<i class="fas fa-folder-open"></i>
<i class="far fa-image"></i>
<h1><i class="fas fa-arrow-right"></i></h1>
<h2><i class="fas fa-arrow-right"></i></h2>
<h3><i class="fas fa-arrow-right"></i></h3>
Icons inherit surrounding text sizes
<div class="highlight">
<i class="fas fa-arrow-right"></i>
</div>
<div style="color: #bada55;">
<i class="fas fa-arrow-right"></i>
</div>
Icons inherit surrounding text color
<i class="fas fa-expand-arrows-alt"></i>
<i class="fas fa-expand-arrows-alt fa-2x"></i>
<i class="fas fa-expand-arrows-alt fa-3x"></i>
<i class="fas fa-expand-arrows-alt fa-5x"></i>
<i class="fas fa-expand-arrows-alt fa-7x"></i>
Font Awesome also includes built-in sizing classes. Any class from fa-2x
to fa-10x
may be used.
Content Back to top
Additional self-contained elements that can be used within content in order to enhance the look and feel.
<a href="#0" class="more">Learn More <i class="fas fa-arrow-right"></i></a>
<img src="https://placeimg.com/100/100" alt="" class="img-left" />
<p>This image has been pulled to the side. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut voluptates voluptate, vel, culpa similique unde sapiente doloribus repudiandae illo fugit atque explicabo quibusdam recusandae optio sint quisquam, quam animi, maxime. Veniam adipisci facere porro enim et dolor magnam est tenetur amet debitis.</p>
<img src="https://placeimg.com/100/100" alt="" class="img-right" />
<p>In quidem odit, ipsa sint fuga reprehenderit aut assumenda temporibus omnis repellendus! Temporibus dignissimos, magni, asperiores eaque, beatae perspiciatis ducimus dolorem sunt ad tenetur architecto at eligendi itaque maxime? Quibusdam!</p>
Note: the Sitefinity WYSIWYG editor includes options to float images manually. Both methods will work. The above classes have the benefit of including natural-feeling spacing and a maximum width by default.
These images have been pulled to the sides. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut voluptates voluptate, vel, culpa similique unde sapiente doloribus repudiandae illo fugit atque explicabo quibusdam recusandae optio sint quisquam, quam animi, maxime. Veniam adipisci facere porro enim et dolor magnam est tenetur amet debitis.
In quidem odit, ipsa sint fuga reprehenderit aut assumenda temporibus omnis repellendus! Temporibus dignissimos, magni, asperiores eaque, beatae perspiciatis ducimus dolorem sunt ad tenetur architecto at eligendi itaque maxime? Quibusdam!
<figure class="img-left">
<img src="https://placeimg.com/300/200" alt="" />
<figcaption>This is a small snippet about this image</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eveniet, sit quod quae aspernatur omnis molestias eligendi aperiam, architecto error debitis! Totam a doloremque, illo dolorum, aliquam iusto iste. Recusandae!</p>
<p>Minima libero dignissimos, temporibus! Minus sunt provident cumque temporibus hic recusandae consequuntur reprehenderit quis modi ratione, maiores minima. Possimus rerum, molestias officia.</p>
Note: img-left
may be replaced with img-right
or omitted altogether.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eveniet, sit quod quae aspernatur omnis molestias eligendi aperiam, architecto error debitis! Totam a doloremque, illo dolorum, aliquam iusto iste. Recusandae!
Minima libero dignissimos, temporibus! Minus sunt provident cumque temporibus hic recusandae consequuntur reprehenderit quis modi ratione, maiores minima. Possimus rerum, molestias officia.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.</p>
<blockquote class="pull-quote">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.
I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat
Firstname Lastname
Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?
<blockquote class="pull-quote pull-quote--left">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>I'll flow up and around the quote, just like it's an <code>img-left</code>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.</p>
<blockquote class="pull-quote pull-quote--right">
<p>I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat</p>
<cite class="pull-quote__attribution">Firstname Lastname</cite>
</blockquote>
<p>I'll flow up and around the second quote as though it's an <code>img-right</code>. Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?</p>
Note: these will revert to full-width pull quotes for small screens
I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat
Firstname Lastname
I'll flow up and around the quote, just like it's an img-left
. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores architecto iusto eum pariatur ut molestias eligendi laboriosam dignissimos sunt ea, facilis dolorum, vitae nisi ratione aliquid iure nostrum. Placeat, vero.
I'm a pull quote! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quod vero fugiat
Firstname Lastname
I'll flow up and around the second quote as though it's an img-right
. Officiis modi officia inventore nesciunt enim alias dignissimos iusto totam! Dolorem quibusdam placeat nam. Ipsum dolores vitae at sit impedit voluptatum. Possimus?
<ul class="item-list">
<li class="item-list__item">
<a href="#0" class="item-list__title">I'm a List of Content</a>
<p class="item-list__date">January 1, 2018</p>
<p class="item-list__description">Each item can have a date and a short description or abstract</p>
</li>
<li class="item-list__item">
<a href="#0" class="item-list__title">Lorem Ipsum Sit Dolor Amet</a>
<p class="item-list__date">January 1, 2018</p>
<p class="item-list__description">Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores</p>
</li>
</ul>
- I'm a List of Content
January 1, 2018
Each item can have a date and a short description or abstract
- Lorem Ipsum Sit Dolor Amet
January 1, 2018
Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores
<ul class="item-list">
<li class="item-list__item">
<a href="#0" class="item-list__thumbnail"><img src="[image url]" alt="" /></a>
<div class="item-list__content">
<a href="#0" class="item-list__title">I'm a List of Content with Thumbnails</a>
<p class="item-list__date">January 1, 2018</p>
<p class="item-list__description">Each item can have a date and a short description or abstract</p>
</div>
</li>
<li class="item-list__item">
<a href="#0" class="item-list__thumbnail"><img src="[image url]" alt="" /></a>
<div class="item-list__content">
<a href="#0" class="item-list__title">Lorem Ipsum Sit Dolor Amet</a>
<p class="item-list__date">January 1, 2018</p>
<p class="item-list__description">Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores</p>
</div>
</li>
</ul>
Note: 120px wide thumbnails are recommended here.
-
I'm a List of Content with Thumbnails
January 1, 2018
Each item can have a date and a short description or abstract
-
Lorem Ipsum Sit Dolor Amet
January 1, 2018
Consectetur adipisicing elit. Beatae iste maxime tempora dolores sed amet, excepturi, sit quam ducimus provident dolorem eum deserunt praesentium qui asperiores
<div class="content-box">
<h3>Content Box</h3>
<p>This is a boxed-off piece of content.</p>
<p>This box can contain any other content that's needed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.</p>
</div>
Note: the containing <div>s
will be provided in the Sitefinity page builder as layout widgets.
Content Box
This is a boxed-off piece of content.
This box can contain any other content that's needed. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.
<div class="content-box content-box--highlight">
<h3>Content Box</h3>
<p>This is a highlighted version of the content box.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, iste. Soluta illum nulla itaque veritatis nemo maxime quaerat, enim voluptate, error totam reprehenderit fugiat optio beatae molestiae reiciendis accusamus quidem.</p>
</div>
Content Box
This is a highlighted version of the content box.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, iste. Soluta illum nulla itaque veritatis nemo maxime quaerat, enim voluptate, error totam reprehenderit fugiat optio beatae molestiae reiciendis accusamus quidem.
<div class="content-box content-box--action">
<h3>Content Box</h3>
<p>This is an action-oriented bit of content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.</p>
</div>
Content Box
This is an action-oriented bit of content.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam itaque quis deserunt aliquid, maiores aperiam rem enim quia animi consequatur! Laboriosam, dolore, a! Doloribus inventore aperiam at, facilis ad, nisi.
Forms Back to top
Inputs and labels used to assemble HTML forms. For submit buttons, the above button classes may be used.
<input type="text" placeholder="Placeholder label" />
<textarea></textarea>
<textarea class="textarea-large"></textarea>
Alternatively, an inline min-height
style may be used.
<label for="id-1">Stacked Label</label>
<input id="id-1" type="text" />
<p class="note">Help text or elaboration</p>
Help text or elaboration
<div class="side-label">
<label for="id-2">Side Label</label>
<input id="id-2" type="text" />
<p class="note">Help text or elaboration</p>
</div>
Help text or elaboration
<select>
<option value="value">Option</option>
<option value="value">Option</option>
</select>
<div>
<input id="id-3" type="radio" />
<label for="id-3">Radio input</label>
</div>
<div>
<input id="id-4" type="checkbox" />
<label for="id-4">Checkbox input</label>
</div>
The <div>
s may be omitted if these should lay out inline with each other, or replaced with <p>
s if additional vertical spacing is needed.
<label for="id-5" class="required">Required Field</label>
<input id="id-5" type="text" required="required" />
<div class="grid__unit grid__unit--1-2-m">
<label for="id-6" class="input-validation-error">Stacked Label</label>
<input id="id-6" type="text" class="input-validation-error" />
<p class="field-validation-error">This field has an error!</p>
</div>
This field has an error!
Grids Back to top
This grid system is able to exist side-by-side with other grid systems such as Bootstrap or the Sitefinity page builder. If you're planning on using those, this section may be safely skipped.
The Sitefinity page builder offers the ability to replace the classes of its grids with our own custom classes. This should be considered for cases where precision or complex responsive behavior is called for.
Grids consist of a container (a div
with a class of grid
) and any number of grid units (div
s with varying grid__unit
classes). These units can be used to easily create small layouts by combining smaller pieces to form a row (or many rows). Here's a simple grid that puts two pieces of text side by side:
<div class="grid">
<div class="grid__unit grid__unit--1-2">
<div class="content-box content-box--highlight">This is the first bit of text</div>
</div>
<div class="grid__unit grid__unit--1-2">
<div class="content-box content-box--highlight">And this is the second</div>
</div>
</div>
Note how the classes are fractional: a grid__unit--1-2
will take up 1/2 (50%) of the available space. A grid__unit--1-3
will take up 1/3 (33.3%), grid__unit--1-4
will take up 1/4 (25%), and so on. A grid__unit
without any additional modifier classes will default to a width of 100%.
Sizes can be mixed and matched, and the grids will wrap to multiple rows:
<div class="grid__unit grid__unit--1-2"></div>
<div class="grid__unit grid__unit--1-4"></div>
<div class="grid__unit grid__unit--1-4"></div>
<div class="grid__unit grid__unit--2-5"></div>
<div class="grid__unit grid__unit--3-5"></div>
Grids can be made responsive by appending a breakpoint suffix (-s
(small), -m
(medium), and -l
(large)) to the fractional classes. Those fractions will be applied only at the specified breakpoint and above. Resize your browser window to see the change:
<div class="grid__unit grid__unit--1-2-m grid__unit--1-3-l"></div>
<div class="grid__unit grid__unit--1-2-m grid__unit--1-3-l"></div>
<div class="grid__unit grid__unit--1-3-l"></div>
Classes are provided all the way down to 1/12 size.
And, of course, these sizes can be composed to form unique rows. All fractions should be reduced (e.g. 4/12 should be converted to 1/3).
Spacing Back to top
The stylesheet provides several utility classes for spacing. These classes define a direction, a magnitude, and an optional breakpoint as follows:
space-[direction]-[amount]
or space-[direction]-[amount]-[breakpoint]
- direction
t
,r
,b
, orl
, meaning top, right, bottom, and left, respectively- amount
- A whole number from 0 to 6. A value of
0
will apply no spacing (useful for canceling out existing unwanted spacing) and1
through6
will apply spacing in values based on the site's baseline grid. For example,1
is a quarter of the body copy's line height and6
is triple said line height - breakpoint
- Currently supports only
m
, for spacing to be applied only at the medium breakpoint (traditional "mobile"/"not mobile" switchover) and up
<div class="space-b-1"></div>
<div class="space-b-2"></div>
<div class="space-b-3"></div>
<div></div>
Note: the blocks shown are illustrative and empty div
s do not have this default style. The height of these blocks is one unit of the site's baseline grid (1 * body line height) for visual reference
<div></div>
<div class="space-b-2 space-t-2 space-b-4-m space-t-4-m"></div>
<div></div>
<div class="space-r-3"></div>
<div></div>
Internal padding classes are also provided and can be accessed by using pad
instead of space
, such as pad-t-3
.
Widgets Back to top
Tabs
Tabs widgets can contain any number of tabs, so long as each has a corresponding pane (one tabs__tab
per one tabs__pane
). However, it's not recommended to go over a small number of these, as small screens will have trouble fitting all the tabs into a single row.
RD will build preconfigured tabs widgets that will be available in the Layout section of Sitefinity's page builder, but this section may provide a more technical understanding of what's going on under the hood.
<div class="tabs tabs--standard">
<a class="tabs__tab">Tab 1</a>
<a class="tabs__tab">Tab 2</a>
<a class="tabs__tab">Tab 3</a>
<div class="tabs__pane">
<p>Tab 1 content</p>
<p>Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!</p>
</div>
<div class="tabs__pane">
<p>Tab 2 content</p>
<p>Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.</p>
</div>
<div class="tabs__pane">
<p>Tab 3 content</p>
<p>Labore saepe, aut eveniet incidunt reprehenderit. Iure vel molestiae dignissimos laboriosam quam nostrum explicabo expedita dolor tempore fuga odio odit placeat quo ipsum rerum unde ex tenetur, harum eius cupiditate libero quos! Accusamus mollitia eum, in aperiam veritatis alias eius ipsum dignissimos eligendi totam, atque impedit minima, ipsa enim.</p>
</div>
</div>
Tab 1 content
Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!
Tab 2 content
Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.
Tab 3 content
Labore saepe, aut eveniet incidunt reprehenderit. Iure vel molestiae dignissimos laboriosam quam nostrum explicabo expedita dolor tempore fuga odio odit placeat quo ipsum rerum unde ex tenetur, harum eius cupiditate libero quos! Accusamus mollitia eum, in aperiam veritatis alias eius ipsum dignissimos eligendi totam, atque impedit minima, ipsa enim.
Tabs can be automated, which means they'll switch to the next tab automatically after a small interval. This can be helpful for building custom slideshows in the future.
<div class="tabs tabs--standard tabs--automated">
...
</div>
Tabs can also generate fragment identifiers based on the tab label, allowing users to link directly to a specific tab:
<div class="tabs tabs--standard tabs--use-fragments">
...
</div>
A vertical tabs style is also available. This is recommended over the horizontal style in cases where many tabs are needed.
<div class="tabs tabs--vertical">
<a class="tabs__tab">Tab 1</a>
<a class="tabs__tab">Tab 2</a>
<a class="tabs__tab">Tab 3</a>
<div class="tabs__pane">
<p>Tab 1 content</p>
<p>Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!</p>
</div>
<div class="tabs__pane">
<p>Tab 2 content</p>
<p>Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.</p>
</div>
<div class="tabs__pane">
<p>Short panes should extend past all tabs</p>
</div>
</div>
Tab 1 content
Architecto eum eius illum obcaecati consectetur ratione, harum, vitae, neque perspiciatis ipsam inventore consequuntur odio dicta. Amet tempora quod, obcaecati, rem voluptate doloribus maxime, officiis accusantium consectetur adipisci dolore odio!
Tab 2 content
Excepturi doloribus rerum libero necessitatibus quae eveniet voluptatibus cumque, praesentium natus vero eum consequatur cupiditate pariatur porro odio incidunt, eius culpa earum.
Short panes should extend past all tabs
Toggles
A toggle is a simple class switcher that adds or removes the state class is-active
to/from itself and any number of target elements. Elements with the class toggle-target
will be hidden unless toggled on, making it easy to add a simple show/hide behavior to elements.
Anything with a data-toggle-target
attribute will be made into a toggle. This can include links, buttons, plain text, images, and more. Note that the default behavior of this element will be suppressed; for example, a link will no longer take the user to that link's href
value.
The value of the data-toggle-target
attribute will determine the element or elements to be toggled. This value may be a keyword (next
, parentnext
) or a CSS selector (#some-id
, .some-class
, .complex > li + li
).
<button type="button" class="button space-b-2" data-toggle-target="next">Toggle next element</button>
<p class="toggle-target">I'm hidden until the toggle is clicked!</p>
I'm hidden until the toggle is clicked!
Like tabs, we can use url fragments to link to a specific toggle and make sure it's open on page load
<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-fragment="true">Toggle with fragments</button>
<p class="toggle-target">Check out your browser address bar now that you can see me. You can also reload the page and this toggle will still be active!</p>
Check out your browser address bar now that you can see me. You can also reload the page and this toggle will still be active!
Toggles may also be set to automatically deactivate based on external factors. We can deactivate a toggle if the esc
key is pressed or if the user clicks somewhere outside the toggle's elements.
<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-exit="esc">Close me with the esc key</button>
<p class="toggle-target">If you can see me, press escape to hide me</p>
<button type="button" class="button space-b-2" data-toggle-target="next" data-toggle-exit="esc outside">Close me with esc or by clicking outside</button>
<p class="toggle-target">If you can see me, press escape or click anywhere else on the page to hide me</p>
If you can see me, press escape to hide me
If you can see me, press escape or click anywhere else on the page to hide me
Accordions
This is a stylized usage of the above toggles (therefore, any of the above toggle enhancements are available for use here). In an accordion, content is laid out in long 'tabs' that can be shown or hidden.
As with the tabs, RD will build an accordion widget that will be available in the Layout section of the Sitefinity page builder.
<div class="accordion">
<div class="accordion__label" data-toggle-target="next">Accordion Label 1</i></div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.</p>
</div>
<div class="accordion__label" data-toggle-target="next">Accordion Label 2</i></div>
<div class="accordion__content">
<p>Veritatis totam eum hic distinctio ex ut, culpa, suscipit dignissimos aliquam amet voluptates quas, non assumenda maxime eligendi mollitia. Repellat vel, ipsam.</p>
</div>
<div class="accordion__label" data-toggle-target="next">Accordion Label 3</i></div>
<div class="accordion__content">
<p>Doloremque modi, veritatis obcaecati natus iure expedita adipisci error, a iusto aspernatur quia! Deserunt illum adipisci cumque necessitatibus et, vel, maxime quae consectetur, ut vitae, officia doloribus quaerat. Voluptas repellendus pariatur, culpa ipsum modi accusamus aliquid, ut unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus doloremque, tempore, excepturi blanditiis id tempora praesentium nam, quasi molestias unde tenetur! Architecto error, voluptates totam dolorum illo culpa omnis dolorem doloribus odio laboriosam, aspernatur, suscipit tenetur eum modi, alias voluptatem debitis reprehenderit. Illo voluptates impedit asperiores quia qui, expedita architecto adipisci doloribus neque, numquam soluta sint exercitationem repellat culpa veniam repellendus blanditiis eos at laudantium. Blanditiis ad neque, nam, nulla voluptatem voluptatum porro iure ipsa ducimus quibusdam recusandae vero nobis asperiores possimus ex dolore rerum earum, error itaque omnis architecto. Ex itaque quibusdam, nesciunt voluptatem ullam. Corporis minus placeat natus!</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum qui sit quo est deserunt, quae, eveniet itaque doloribus possimus, quia fugit dolores voluptate autem unde cum error eaque voluptatem dolorem.
Veritatis totam eum hic distinctio ex ut, culpa, suscipit dignissimos aliquam amet voluptates quas, non assumenda maxime eligendi mollitia. Repellat vel, ipsam.
Doloremque modi, veritatis obcaecati natus iure expedita adipisci error, a iusto aspernatur quia! Deserunt illum adipisci cumque necessitatibus et, vel, maxime quae consectetur, ut vitae, officia doloribus quaerat. Voluptas repellendus pariatur, culpa ipsum modi accusamus aliquid, ut unde.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus doloremque, tempore, excepturi blanditiis id tempora praesentium nam, quasi molestias unde tenetur! Architecto error, voluptates totam dolorum illo culpa omnis dolorem doloribus odio laboriosam, aspernatur, suscipit tenetur eum modi, alias voluptatem debitis reprehenderit. Illo voluptates impedit asperiores quia qui, expedita architecto adipisci doloribus neque, numquam soluta sint exercitationem repellat culpa veniam repellendus blanditiis eos at laudantium. Blanditiis ad neque, nam, nulla voluptatem voluptatum porro iure ipsa ducimus quibusdam recusandae vero nobis asperiores possimus ex dolore rerum earum, error itaque omnis architecto. Ex itaque quibusdam, nesciunt voluptatem ullam. Corporis minus placeat natus!
Truncators
Provides the ability to limit the visual height of a container or to limit a container to a certain number of shown items. A button is then generated so that the user can view the rest of the items.
<div data-truncate-to="3 lines">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam pariatur architecto cum adipisci voluptatum id, odio ipsum. Quos corporis nostrum earum atque consequuntur ducimus inventore eius tempore impedit, consequatur in, officiis, sapiente, deleniti veniam aliquam? Rerum enim saepe hic officia minus facilis eum repellat! Fugiat, eius eum dignissimos veniam aliquid, iste asperiores quaerat quibusdam praesentium, perferendis, itaque quis minus rem!</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam pariatur architecto cum adipisci voluptatum id, odio ipsum. Quos corporis nostrum earum atque consequuntur ducimus inventore eius tempore impedit, consequatur in, officiis, sapiente, deleniti veniam aliquam? Rerum enim saepe hic officia minus facilis eum repellat! Fugiat, eius eum dignissimos veniam aliquid, iste asperiores quaerat quibusdam praesentium, perferendis, itaque quis minus rem!
<div data-truncate-to="127px">
<img src="http://placeimg.com/200/200" alt="" />
</div>
<ul class="item-list" data-truncate-to="2 items">
<li class="item-list__item">
<a href="#0" class="item-list__title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, deleniti!</a>
<div class="item-list__description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt repellendus quibusdam suscipit impedit debitis a. Nemo odio sed, rem est.</p>
</div>
</li>
…
</ul>
Note: an "item" is any immediate child element of the container.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, deleniti!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt repellendus quibusdam suscipit impedit debitis a. Nemo odio sed, rem est.
- Repellat veritatis, velit quos in laboriosam quis? Neque, ducimus.
Suscipit nemo asperiores, quasi mollitia ducimus hic, itaque maxime at, ullam accusantium, voluptatem id. Amet incidunt tempora rerum velit odio.
- Facilis impedit quidem quia ad, officia totam officiis, animi vel.
Iusto pariatur optio quo, deleniti incidunt. Sed voluptatem consequuntur, repellendus qui! Totam repellendus explicabo, facere ab cumque quis voluptatem!
- Ullam, nam, id. Sint, voluptatum aperiam at ex dolore iure!
A ipsum impedit similique excepturi optio, aut sequi rem suscipit voluptas voluptate odit maiores expedita voluptatem consequuntur, tempore quos! Itaque.
- Reprehenderit voluptatum assumenda animi nulla sequi earum maxime. Ab, voluptas.
Consequatur sit, exercitationem architecto recusandae ullam perspiciatis quia maiores eum deleniti dolor. Magnam officia quis, nemo porro numquam veritatis ratione.
Controlling Frontend JavaScript Back to top
While the necessary JavaScript is automatically applied to the above widgets, sometimes the developer must manipulate them after-the-fact through code. The site JavaScript exposes a number of options through the global RDJS
object.
Tabs
RDJS.tabs.list();
Returns an array of objects, or an empty array if no such objects exist yet. Each object represents one insular collection of tabs on the page.
RDJS.tabs.get(selector);
Returns a single object whose container (the wrapper around the tabs that in the example above has the tabs
class) first matches a given CSS selector. Returns null
if no such object is found.
selector
: a string containing any valid CSS selector.
RDJS.tabs.find(selector);
Returns all objects whose container matches a given CSS selector. Returns an empty array if no such objects are found.
selector
: a string containing any valid CSS selector.
RDJS.tabs.add(nodes, options);
Adds tabs functionality to a given container element or elements.
nodes
: a node, nodeList, or array of elements. Each node should be a container containing a set of tabs and panes.
options
: an options object to be assigned to this group. Anything about a tab group can be overwritten here. Defaults:
tabSelector
(string):'.tabs__tab'
. Widget will look for these tabs upon initialization.paneSelector
(string):'.tabs__pane'
. Widget will look for these panes upon initialization.nextSelector
(string):'.tabs__next'
. Widget will look for these 'next tab' buttons upon initialization.previousSelector
(string):'.tabs__previous'
. Widget will look for these 'previous tab' buttons upon initialization.playSelector
(string):'.tabs__play'
. Widget will look for these 'play' buttons upon initialization.pauseSelector
(string):'.tabs__pause'
. Widget will look for these 'pause' buttons upon initialization.automatedSelector
(string):'.is-automated'
. Widget will look whether the container matches the given selector, and if so, will automatically play it.automated
(boolean):false
. Automation may be assigned directly.slideDuration
(integer):7000
. When these tabs are playing, the number of milliseconds to wait before switching.activeClass
(string):'is-active'
. The widget will assign this class to the current tab and pane.nextClass
(string):'is-next'
. The widget will assign this class to the tab and pane up next.previousClass
(string):'is-previous'
. The widget will assign this class to the previous tab and pane.playingClass
(string):'is-playing'
. The widget will assign this class to the container while this group is playing.onInit
(function):null
. This callback will execute when the instance has successfully initialized.onChange
(function):null
. This callback will execute whenever the tab changes.onPlay
(function):null
. This callback will execute whenever the group begins automated tab playthrough.onPause
(function):null
. This callback will execute whenever the group pauses automated tab playthrough.
var foo = RDJS.tabs.get('#my-tabs');
console.log(foo.slideDuration);
Most properties of a given tab group object may be accessed:
TabGroup.container
(element): the container element for these tabs.TabGroup.automated
(boolean): does this group automatically change/rotate?TabGroup.tabs
(array): all 'tab' elements in this group.TabGroup.panes
(array): all 'pane' elements in this group.TabGroup.nextTriggers
(array): all 'next tab' controls in this group.TabGroup.previousTriggers
(array): all 'previous tab' controls in this group.TabGroup.pauseTriggers
(array): all 'pause' controls in this group.TabGroup.playTriggers
(array): all 'play' controls in this group.TabGroup.slideDuration
(integer): if this is an automated group, the number of milliseconds to wait before advancing to the next tab.TabGroup.active
(integer): the currently active tab. 0-based.TabGroup.count
(integer): the number of tabs/slides in this group. 1-based.
var foo = RDJS.tabs.get('#my-tabs');
foo.changeTo(index);
foo.pause();
foo.play();
A given tabs widget may be controlled programmatically.
changeTo(index)
: switches to a specified tab.
index
: integer (0-based) specifying the specific tab to switch to, or string'next'
or'previous'
pause()
: pauses an automated slideshow
play()
: plays or resumes a slideshow
Toggles
RDJS.toggles.list();
Returns an array of toggle objects, or an empty array if no such objects exist yet. Each object represents one toggle trigger and zero to many toggle targets.
RDJS.toggles.get(selector);
Returns a single toggle object whose origin (the toggle's trigger) first matches a given CSS selector. Returns null
if no such object is found.
selector
: a string containing any valid CSS selector.
RDJS.toggles.find(selector);
Returns an array of toggle objects whose origins match a given CSS selector. Returns an empty array if no such object is found.
selector
: a string containing any valid CSS selector.
RDJS.toggles.add(nodes, options);
Adds toggle functionality to elements.
nodes
: a node, nodeList, or array of elements.
options
: an options object to be assigned to this toggle. Anything about a tab group can be overwritten here. Defaults:
targets
(array):[]
. Targets may be assigned programmatically; otherwise, the widget will look for targets as specified in thedata-toggle-target
attribute.activeClass
(string):'is-active'
. This is the class that will be toggled on both the origin and targets.onInit
(function):null
. This callback will be executed upon successful initialization of the instance.onActivate
(function):null
. This callback will be executed upon activation of this toggle.
var foo = RDJS.toggles.get('#my-toggle');
console.log(foo);
console.log(foo.origin);
Some properties of a given toggle object may be accessed:
origin
(Element): the toggle's trigger element.targets
(array): all target elements that will be affected by a click on the trigger.activeClass
(string): the class that will be toggled on the origin and targets upon activation.
var foo = RDJS.toggles.get('#my-toggle');
foo.activate();
Toggles may be activated programmatically using activate()
. By default, calling this will switch the toggle on if it's off and vice-versa.
An optional boolean parameter may be passed to Toggle.activate()
. Passing true
will force the toggle on (even if it's already on when this is called), and false
forces it off.