Hodor Front-end Framework

Hodor is a responsive front-end framework built with flexbox and supports faster front-end development using Hodor command. It uses the LEGO analogy for code modularization and makes front-end fun.

Introduction

Getting Started

Include Hodor's master SCSS to the assetic.


{% stylesheets filter="compass"
    "[path]/hodor/master.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />{% endstylesheets %}

Hodor supports browsers that supports flexbox and rem unit. This include browsers such as IE11+, Chrome 21+, Firefox 28+, Safari 6.1+, Opera 17+, iOS Safari 7.1+.

Requirements

Hodor is built on SASS and requires the SASS preprocessor and following extensions to effectively compile

Typography

Hodor uses modular scale to achieve a visual harmony in page layout. It uses 1.5rem as the base number in the typographic scale and uses 1.125(major second) ratio to get the resonant numbers. The table below shows the typographic scale in use

Text type Font size (Desktop) Font size (Tablet) Font size (Mobile) Line height

H1 XXXL

5.4rem 4.8rem 4.3rem * 1.2

H1 XXL

4.8rem 4.3rem 3.8rem * 1.2

H1 XL

4.3rem 3.8rem 3.4rem * 1.2

H1 L

3.8rem 3.4rem 3rem * 1.2

H1

3.4rem 3rem 2.7rem * 1.2

H2

3rem 2.7rem 2.4rem * 1.6

H3

2.7rem 2.4rem 2.1rem * 1.6

H4

2.4rem 2.1rem 1.8rem * 1.6
H5
2.1rem 1.8rem 1.8rem * 1.6
H6
1.8rem 1.8rem 1.8rem * 1.6
Caption 1.6rem 1.6rem 1.6rem * 1.6
Body, Paragraph 1.5rem 1.5rem 1.5rem * 1.6
Small 1.3rem 1.3rem 1.3rem * 1.6
Smaller 1.1rem 1.1rem 1.1rem * 1.6

Icons

Hodor includes more than 430 icons in font format. These icons are licensed to use only on Course Hero products and is not available for other uses. Check out Icon Documentation to start using it on pages.

Grid Framework

Grids give us lot of advantages in visual design. They provide our foundation and help make our designs coherent and consistent. It helps us architect the design before any elements are put together, and they also help the user scan content in an effective manner.

Auto Grid

Auto Grid will divide the grid in a way columns have equal width. Keep in mind that grid will only be one row


<div class="grid">
	<div class="column"></div>
	<div class="column"></div>
	<div class="column"></div>
</div>

Example:

column
column
column
column
column
The Grid Class

With the .grid# class, you can show specified number of columns in a grid. Example:


<div class="grid3">
	<div class="column"></div>
	<div class="column"></div>
	...
	<div class="column"></div>
</div>

Possibilities

grid1
grid2
grid2
grid3
grid3
grid3
grid4
grid4
grid4
grid4
grid5
grid5
grid5
grid5
grid5
grid6
grid6
grid6
grid6
grid6
grid6
grid7
grid7
grid7
grid7
grid7
grid7
grid7
grid8
grid8
grid8
grid8
grid8
grid8
grid8
grid8
grid9
grid9
grid9
grid9
grid9
grid9
grid9
grid9
grid9
grid10
grid10
grid10
grid10
grid10
grid10
grid10
grid10
grid10
grid10
grid11
grid11
grid11
grid11
grid11
grid11
grid11
grid11
grid11
grid11
grid11
grid12
grid12
grid12
grid12
grid12
grid12
grid12
grid12
grid12
grid12
grid12
grid12
The Column Class

With .column# class you will be able to specify the number of columns needed for the content inside the grid. Example:


<div class="grid">
	<div class="column3"></div>
	<div class="column4"></div>
	<div class="column5"></div>
</div>

Possibilities

column1
column11
column2
column10
column3
column9
column4
column8
column5
column7
column6
column6
column7
column5
column8
column4
column9
column3
column10
column2
column11
column1
column12
Nested Grid

Each column can become a grid by simply adding .grid# class to the .column# class


<div class="grid">
	<div class="column5 grid"> <!-- Will divide column5 into 12 columns -->
		<div class="column8"></div>
		<div class="column4"></div>
	</div>
	<div class="column7 grid"> <!-- Will divide column7 into 12 columns -->
		<div class="column3"></div>
		<div class="column9 grid">  <!-- Will divide column9 into 12 columns -->
			<div class="column6"></div>
			<div class="column6"></div>
		</div>
	</div>
</div>

Example:

Keep in mind that using .grid in .column class will by default split into 12 columns

column5 > column8
column5 > column4
column7 > column4
column7 > column4
column7 > column4

Granules

Variables

Brand Colors
Variable Name Variable Value
$blue #001A96
$magenta #E00099
$accentBlue #00B5E2
$accentOrange #FF6900
$accentGreen #00BA33
$accentYellow #FFDD00
$accentRed #FF130B
$white #FFFFFF
$gray15 #FAFAFA
$gray30 #F1F1F1
$gray45 #DDDDDD
$gray60 #AAAAAA
$gray75 #888888
$gray90 #444444
Layout
Variable Name Variable Value
$container 1230px
Breakpoints
Variable Name Variable Value
$phoneSmall 320px 639px
$phoneBig 640px 767px
$phone 320px 767px
$tablet 768px 1199px
$mobile 320px 1199px
$tabletAndUp min-width 768px
$desktop min-width 1200px
Typography
Variable Name Variable Value
$headingFont "Haas Grot Text Web", "Helvetica Neue", Helvetica, Arial, sans-serif
$bodyFont "Haas Grot Text Web", "Helvetica Neue", Helvetica, Arial, sans-serif
$iconFont "ch-icon"
$rhythm-unit rem
$fsH1xxxl 5.4rem
$fsH1xxl 4.8rem
$fsH1xl 4.3rem
$fsH1l 3.8rem
$fsH1 3.4rem
$fsH2 3rem
$fsH3 2.7rem
$fsH4 2.4rem
$fsH5 2.1rem
$fsH6 1.8rem
$fsCaption 1.6rem
$fsBody 1.5rem
$fsSmall 1.3rem
$fsSmaller 1.1rem
$bold 700
$medium 500
$regular 400
Miscellaneous
Variable Name Variable Value
$borderRadius 3px
$boxShadow 0px 3px 6px rgba(0,0,0,0.1)

Mixins

Following are some custom mixins created specifically for Hodor framework. More plugins are available in Compass Documentation

Horizontal Padding

To apply padding on either sides of a given element, simply call the hPadding mixin like below. It accepts two values, left padding and right padding.


// Example: Setting 1rem as padding on either sides
.class{
    @include hPadding(1,1);
}

Horizontal Margin

To apply margin on either sides of a given element, simply call the hMargin mixin like below. It accepts two values, left margin and right margin.


// Example: Setting 1rem as margin on either sides
.class{
    @include hMargin(1,1);
}

Truncate Text

To truncate a single line of text and avoid overflow, call the truncateText mixin


.class{
    @include truncateText();
}

Bricks

Buttons

Buttons indicates the action that will occur when a user interacts with it.

Primary Button

Primary call to action buttons use the primary accent color magenta from the color palette. The strong color produces high contrast, which makes it easily noticeable and motivates the user to take action. It's only used for one specific user action on any Course Hero page. Additionally, that user action cannot be repeated more than three times on a page.


<a href="" class="primaryButton isLarge">Button Text</a>
<a href="" class="primaryButton">Button Text</a>
<a href="" class="primaryButton isSmall">Button Text</a>
<a href="" class="primaryButton isSmaller">Button Text</a>

Output:

Secondary Buttons

Secondary call to action buttons use the accent colors blue and gray from the color palette. It has comparatively less visual weight than the accent color. Accent blue button is used for actions that are crucial for the user, though they are not as important as primary actions. The use of gray buttons should be used in a limited manner as it fits the context.


<!-- Secondary Button Level 1 -->
<a href="" class="secondaryButton1 isLarge">Button Text</a>
<a href="" class="secondaryButton1">Button Text</a>
<a href="" class="secondaryButton1 isSmall">Button Text</a>
<a href="" class="secondaryButton1 isSmaller">Button Text</a>
<!-- Secondary Button Level 2 -->
<a href="" class="secondaryButton2 isLarge">Button Text</a>
<a href="" class="secondaryButton2">Button Text</a>
<a href="" class="secondaryButton2 isSmall">Button Text</a>
<a href="" class="secondaryButton2 isSmaller">Button Text</a>

Output:

Tertiary Buttons

Tertiary buttons are visually less prominent and there are two styles — outlined and ghost. It blends in well with the interface background, thus producing less contrast since it shouldn't take the attention away from the main content. It's mainly used for actions like "Cancel," "Previous," "Next," etc. Depending on the context, it may be used in combination with the solid primary button and secondary buttons.


<!-- Tertiary Button Level 1 -->
<a href="" class="tertiaryButton1 isLarge">Button Text</a>
<a href="" class="tertiaryButton1">Button Text</a>
<a href="" class="tertiaryButton1 isSmall">Button Text</a>
<a href="" class="tertiaryButton1 isSmaller">Button Text</a>
<!-- Tertiary Button Level 2 -->
<a href="" class="tertiaryButton2 isLarge">Button Text</a>
<a href="" class="tertiaryButton2">Button Text</a>
<a href="" class="tertiaryButton2 isSmall">Button Text</a>
<a href="" class="tertiaryButton2 isSmaller">Button Text</a>

Output:


<!-- Ghost Button Level 1 -->
<a href="" class="ghostButton1 isLarge">Button Text</a>
<a href="" class="ghostButton1">Button Text</a>
<a href="" class="ghostButton1 isSmall">Button Text</a>
<a href="" class="ghostButton1 isSmaller">Button Text</a>
<!-- Ghost Button Level 2 -->
<a href="" class="ghostButton2 isLarge">Button Text</a>
<a href="" class="ghostButton2">Button Text</a>
<a href="" class="ghostButton2 isSmall">Button Text</a>
<a href="" class="ghostButton2 isSmaller">Button Text</a>

Output:

Icon-Labeled Buttons

Buttons can have icon-labels positioned on the left or right of the call-to-action to add visual cue and emphasis to the resulting action.


<a href="" class="secondaryButton1" data-left-icon="">Button Text</a>
<a href="" class="secondaryButton1" data-right-icon="">Button Text</a>

Output:

Icon Button

Buttons can have icon-labels alone, for actions like sharing, flagging, etc. These buttons should have the title attributes added to the anchor tag to provide additional text information to describe the link.


<a href="" class="secondaryButton1" title="Action" data-icon=""></a>

Output:

Panels

Panels are used to outline certain sections of content in the application. Panels can include multiple related elements, and lead to a call to action. Following are variants of panels.

Default Panels

A basic panel can be created by adding class .panel to the parent container. When used in white background, add class isBordered to the panel container


<div class="panel">...</div>
<div class="panel isBordered">...</div>

Output:

Default Panel 1

Lorem ipsum Pariatur cupidatat occaecat cupidatat ut reprehenderit enim ad ad fugiat adipisicing Ut tempor labore Excepteur qui tempor Duis mollit commodo adipisicing anim eu minim fugiat do commodo magna Duis.

  • Lorem ipsum Aliqua dolore sed voluptate
  • Lorem ipsum Aliqua dolore sed voluptate
Default Panel 2

Lorem ipsum Pariatur cupidatat occaecat cupidatat ut reprehenderit enim ad ad fugiat adipisicing Ut tempor labore Excepteur qui tempor Duis mollit commodo adipisicing anim eu minim fugiat do commodo magna Duis.

  • Lorem ipsum Aliqua dolore sed voluptate
  • Lorem ipsum Aliqua dolore sed voluptate
Upsell Panels

The upsell panel are used to cross promote new features or product content that may or may not directly relate to the context of the page. The lifespan of this promo or upselling panel is usually short term. Depending on the nature and importance of the content, one of the following panels could be used.


<div class="panel isUpsell1">...</div>
<div class="panel isUpsell2">...</div>
<div class="panel isUpsell3">...</div>

Output:

Upsell Panel 1

Lorem ipsum Pariatur cupidatat occaecat cupidatat ut reprehenderit enim ad ad fugiat adipisicing Ut tempor labore Excepteur qui tempor Duis mollit commodo adipisicing anim eu minim fugiat do commodo magna Duis.

  • Lorem ipsum Aliqua dolore sed voluptate
  • Lorem ipsum Aliqua dolore sed voluptate
Upsell Panel 2

Lorem ipsum Pariatur cupidatat occaecat cupidatat ut reprehenderit enim ad ad fugiat adipisicing Ut tempor labore Excepteur qui tempor Duis mollit commodo adipisicing anim eu minim fugiat do commodo magna Duis.

  • Lorem ipsum Aliqua dolore sed voluptate
  • Lorem ipsum Aliqua dolore sed voluptate
Upsell Panel 3

Lorem ipsum Pariatur cupidatat occaecat cupidatat ut reprehenderit enim ad ad fugiat adipisicing Ut tempor labore Excepteur qui tempor Duis mollit commodo adipisicing anim eu minim fugiat do commodo magna Duis.

  • Lorem ipsum Aliqua dolore sed voluptate
  • Lorem ipsum Aliqua dolore sed voluptate

Tables

Easily create tables which comes in the following styles:


<div class="tableWrapper">
    <table>
    	<tr>
    		<th>Column Heading</th>
    		<th>Column Heading</th>
    	</tr>
    	<tr>
    		<td>Column Text</td>
    		<td>Column Text</td>
    	</tr>
    	<tr>
    		<td>Column Text</td>
    		<td>Column Text</td>
    	</tr>
    </table>
</div>

Example

Column Heading Column Heading Column Heading Column Heading
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text

Variations

Add the contextual class isBlue1 to the table tag for get the following output

Column Heading Column Heading Column Heading Column Heading
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text

Add the contextual class isBlue2 to the table tag for get the following output

Column Heading Column Heading Column Heading Column Heading
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text

Add the contextual class isGray to the table tag for get the following output

Column Heading Column Heading Column Heading Column Heading
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text
Column Text Column Text Column Text Column Text

Forms

Forms are the only way users can provide us with valuable information, and it's necessary that it is responsive and provide a good User Experience.

Forms fields in Hodor are wrapped inside label tag with the classname formField to reduce markup and also associate the label with the input control implicitly. Due to this setup, the label tag should hold only one input control element. The label tag supports two optional data attributes - data-title and data-message. The data-title is used to show the label title(e.g., Username) and the data-message is used to show any info/error/warning message(e.g., Username should be atleast 8 characters) below the input control. The input control nested inside the label tag must have the classname formInput for styling purposes.


<label class="formField" data-title="Label Title" data-message="Information about the Input Control">
    <!-- Input Control tags like input, select, textarea with the classname "formInput" -->
</label>

States

Form Field comes with two post action states - Error and Success. If there is an error in the information entered by the user, it can be visually indicated by applying hasError class to the label tag, and the error information should be displayed by using the data-message data attribute. The success state is used as an affirmation after the User fixed the error and it be indicated by applying isSuccess class.

In order to adapt to different page layout, Forms supports three basic layouts - Vertical(default), Horizontal and Icon based layout.

Vertical Layout

This is the default layout of a form field. The label text, input control, message are left aligned and stacked one below the other. This way users can quickly scan the form and also it only requires a single eye fixation for label name, input control and message.


<label class="formField" data-title="Label Title" data-message="Information about the Input Control">
    <input class="formInput" type="email" name="text" placeholder="Input Control Placeholder"/>
</label>
<label class="formField" data-title="Label Title">
    <textarea class="formInput" placeholder="Input Control Placeholder"></textarea>
</label>
<div class="formField" data-title="Radio Button Choice">
    <div class="grid5_noBottom phone2">
        <div class="column">
            <label class="radioBox">
                <input type="radio" name="radio button">
                <span>Choice 1</span>
            </label>
        </div>
        <div class="column">
            <label class="radioBox">
                <input type="radio" name="radio button">
                <span>Choice 2</span>
            </label>
        </div>
        <div class="column">
            <label class="radioBox">
                <input type="radio" name="radio button">
                <span>Choice 3</span>
            </label>
        </div>
        <div class="column">
            <label class="radioBox">
                <input type="radio" name="radio button">
                <span>Choice 4</span>
            </label>
        </div>
    </div>
</div>
<div class="formField" data-title="Checkbox Choice">
    <div class="grid5_noBottom phone2">
        <div class="column">
            <label class="checkBox">
                <input type="checkbox" name="checkbox">
                <span>Choice 1</span>
            </label>
        </div>
        <div class="column">
            <label class="checkBox">
                <input type="checkbox" name="checkbox">
                <span>Choice 2</span>
            </label>
        </div>
        <div class="column">
            <label class="checkBox">
                <input type="checkbox" name="checkbox">
                <span>Choice 3</span>
            </label>
        </div>
        <div class="column">
            <label class="checkBox">
                <input type="checkbox" name="checkbox">
                <span>Choice 4</span>
            </label>
        </div>
    </div>
</div>
<div class="formField" data-title="Toggle Switch">
    <label class="toggleSwitch">
        <input type="checkbox" name="checkbox">
        <span>Toggle Button Text</span>
    </label>
</div>

Output:

Horizontal Layout

There may be situations where Vertical form layout takes up quite some real estate. In these cases, Horizontal layout might come in handy. To enable this form layout, simply add isColumn class to the label tag. Since this takes more time for Users to scan, this layout is best suited for short and simple forms

Output:

Icon Layout

Icon layout helps further simplify forms that are intuitive and are used frequently. The combination of icon and the placeholder of input control provides a good clarity of what the form field represents. To use icons, you must use data-icon-label attribute instead if data-title attribute.


<label class="formField isColumn" data-icon-label="">
    <input class="formInput" type="email" name="email" placeholder="Email Address"/>
</label>

<label class="formField isColumn" data-icon-label="">
    <input class="formInput" type="password" name="password" placeholder="Password"/>
</label>

Output:

Badges

Badges are used to highlight new items or show unread notifications


<span class="badge">23</span>
<span class="badge isRead">23</span>
<span class="badge isNew">New</span>

Example

23 23 New

Labels

Labels are used to convey status or flag an item.


<span class="label">Info</span>
<span class="label isProcessing">Processing</span>
<span class="label isSuccess">Success</span>
<span class="label isWarning">Warning</span>
<span class="label isError">Error</span>
<span class="label isArchived">Archived</span>

Example

Info Processing Success Warning Error Archived

Tags

Tags are elements attached to content for the purpose of identification.


<a href="" class="tags">Study Guide</a>
<span class="tags">Lecture Notes <a href=""><i class="ch-remove"></i></a></span>

Example

Study Guide Lecture Notes

Progress Bars

Progress bars are used to show a user how far a user is in a process. The following is a list of contextual progress bar elements we use in our application.

Linear Progress Bar

If Tooltip is not required, simply remove the data-tooltip attribute from the span tag. However, you will be left with some margin on top. To remove that, apply hasNoTopMargin modifier class along with progressBar class


<div class="progressBar">
    <span style="width: 60%" data-tooltip="60%"></span>
</div>

Example

Wizard Progress Bar 1

Calling the isWizardProgress class will allow you to add a progress bar with a step counter. Add isComplete class to the li tag for a finished step and isCurrent to a indicate a current step.


<div class="wizardProgress1">
    <a href="" data-step="1" class="isProgressed">Step 1</a>
    <a href="" data-step="2" class="isProgressed">Step 2</a>
    <a data-step="3" class="isCurrent">Step 3</a>
    <a data-step="4">Step 4</a>
</div>

Example

Wizard Progress Bar 2

Calling the isWizardProgress class will allow you to add a progress bar with a step counter. Add isComplete class to the li tag for a finished step and isCurrent to a indicate a current step.


<div class="wizardProgress2">
    <a href="" data-step="1" class="isProgressed"><span>Step 1</span></a>
    <a href="" data-step="2" class="isProgressed"><span>Step 2</span></a>
    <a data-step="3" class="isCurrent"><span>Step 3</span></a>
    <a data-step="4"><span>Step 4</span></a>
</div>

Example

Prompts

Inline Prompts

Providing contextual feedback or alerting users to important information is a key part of interaction design. The prompt pattern with modifier classes is primarily used for this purpose.


<div class="inlinePrompt" data-icon="">
	<h6>Prompt Heading</h6>
	<p>Prompt Message</p>
	<a href="" class="closeAction"><i class="ch-remove"></i></a>
</div>

Example

Prompt Heading

Prompt Message

Variations

Add the contextual class isSuccess for the Inline Prompt to convey Success

Prompt Heading

Prompt Message

Add the contextual class isWarning or isError for the Inline Prompt to convey Warning or Error

Prompt Heading

Prompt Message

Floater Prompts

Floater prompt are used to show instant feedback to the user. This could be used in case end user experiences connection problems, form submission errors, page load errors etc.,


<div class="floaterPrompt slideInUp" data-icon="">
	Prompt Message
	<a href="" class="closeAction"><i class="ch-remove"></i></a>
</div>

Example

Prompt Message
Prompt Message
Prompt Message

Sets

Button Dropdown

Dropdown buttons are used for users to choose a value from a predefined list. Button dropdown can be used with any button styles and it has the following structure


<div class="buttonDropdown">
    <!-- Once the dropdown is open, add "isHighlighted" class to the button -->
    <a href="" class="secondaryButton1" data-right-icon="">Button Text</a>
    <!-- Shows dropdown below the button by default. To show above the button, add "isDirectionUp" class -->
    <div class="buttonDropdownMenu">
        <a href="">Link 1</a>
        <a href="">Link 2</a>
        <span>Group</span>
        <a href="">Link 1</a>
        <a href="">Link 2</a>
    </div>
</div>

Output:

Button Groups

Button Group is used to create a multiple-exclusion scope for a set of buttons.


<div class="buttonGroup">
    <a href="" class="secondaryButton1 isHighlighted">Button Text</a>
    <a href="" class="secondaryButton1">Button Text</a>
    <a href="" class="secondaryButton1">Button Text</a>
</div>

Output:

Other Variations


Button Group with Dropdown

Button Dropdown can also be integrated with the Button Group. Nest the button dropdown set inside the button group container.


<div class="buttonGroup">
    <a href="" class="secondaryButton1 isHighlighted">Button Text</a>
    <a href="" class="secondaryButton1">Button Text</a>
    <div class="buttonDropdown">
        <a href="" class="secondaryButton1" data-right-icon="">Button Text</a>
        <div class="buttonDropdownMenu isDirectionUp">
            <a href="">Link 1</a>
            <a href="">Link 2</a>
        </div>
    </div>
</div>

Other Variations

Tabs

Tab Level 1

<!-- Modifier Classes: isCenterAligned, isRightAligned, isSplitEqually -->
<ul class="tabNav isLevel1">
    <li><a href="" class="isSelected">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

Output:

Tab Level 2

<ul class="tabNav isLevel2">
    <li><a href="" class="isSelected">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>

Output:

Tab Level 3

<ul class="tabNav isLevel3">
    <li><a href="" class="isSelected">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
</ul>
<div class="tabContent isLevel3">
    Commodo ipsum consectetur ullamco consequat minim dolore Lorem commodo est amet mollit nisi excepteur magna aute nisi.
</div>

Output:

Commodo ipsum consectetur ullamco consequat minim dolore Lorem commodo est amet mollit nisi excepteur magna aute nisi.

Minifigs

Microinteractions

Microinteractions include moments or actions for elements and impacts user's mood and opinion. These Microinteractions focuses on building great details that makes the system feel more human to the users. Being one of the secrets to building great user interfaces, Hodor comes with 3 basic Microinteractions.

Marking content as Helpful

Unlocking a Content

Adding Content to Library

Gears

Helper Classes

Helper classes are used to alter the presentation of the content right inside HTML. Following are some helper classes available in Hodor

Layout
Class Name Description
.container Sets a page container that is 1230px in width. Contents usually go inside tags having this class
Text Alignment
Class Name Description
.textLeft Aligns the text to the left. Since the text is aligned to left by default, this is used only to override a parent style.
.textCenter Center aligns the text
.textRight Right aligns the text
Hiding contents
Class Name Description
.hideInDesktop Will hide the content in desktop and show in all mobile devices
.hideInMobile Will hide the content in all mobile devices and show only in desktop
.hideInTablet Will hide the contents in tablet and show in phone and desktop
.hideInPhone Will hide the contents in phone and show in tablet and desktop
Lists
Class Name Description
.dottedList Defines unordered list marked with circle bullet points
.numericList Defines ordered list marked with numbers

Animations & Transitions

The Motion UI Library part of Hodor, helps you to create and apply CSS Animations and Transitions on top of any User Interface Element. Applying motion effects to user interfaces, brings out storytelling and guide users to consume the content the way we want them to.

Below is a dropdown, which contains 43 animation effects available in Hodor. Choose an effect and see how the magenta box on the left animates. Applying these animations is as easy as setting class name to the target element.

class="" has been applied to the target element

Smart Loader

Smart Loader provide clear indications to user on what is happening. These are great way to create anticipation of what is to come and also reduces the cognitive load of the users by giving an outline of the how the content is presented while the content is being loaded.

In order to show Smart Loader, first create a SVG file that closely resembles how the content will be shown and call the following mixin in scss file. Upon compiling, the mixin converts the SVG to inline data to avoid HTTP request and uses it as a background image for :empty pseudo-class. You can also show different Smart Loaders for different devices by using this mixin inside breakpoints.


.content{
    height: 50rem;
    @include smartLoader("/img/filename.svg");
}

Examples

`