Rotogrinders Style Guide

Here you will find a selection of user interface design standards that are used across the Rotogrinders site. While there are many exceptions to some of these rules, these guides represent the standard use cases.

Colors

The color palette below consists of all major colors used throughout the site. The color name is a SASS variable that can be copied to your clipboard on hover. This name is followed by the hex value of the color.

Brand Guidelines

The following logo presentations are available to preserve brand integrity and visual distinction across any medium (including but not limited to screen and print) where the Rotogrinders logo may appear. Any additional recoloring, texturing, or shape manipulation of the brand must be approved through the proper channels. These are the official variants of the Rotogrinders logo to be used. The gear icon may be used alone but the typography must always be accompanied by the gear.

Typography

The table below displays the primary typography types utilized across the site. While deviations do exist, the goal is to minimize the amount of font sizes and font families in use.

Heading 1

 Helvetica Neue Light 40px H1 inside article blocks

Heading 2

 Helvetica Neue Light 32px

Heading 3

 Helvetica Neue Light 26px Component headers

Heading 4

 Helvetica Neue Light 22px

PAGE HEADER

 Helvetica Neue Light 32px H1 inside page headers
External and internal links Helvetica Neue Normal 12px Small, secondary links

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

 Helvetica Neue Normal 16px 24px line height

Components

Rotogrinders components are made up of three main parts: header (hdr), body (bdy), and footer (ftr). Each of these parts can be given one of three states: clear (default), light, and dark. The state is declared in the markup by adding the matching class name to the component part. If no class name is given, the component styles will default to clear. Our site standard for these components is a light body with a clear header and footer.

Podcasts

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Top DFS Sites

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Alerts

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Show HTML

HTML Snippet for a Component

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<div class="cmp">
    <div class="hdr">
        <h2></h2>
        <ul class="lst hdr-link">
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
    <div class="bdy">

    </div>
    <div class="ftr">
        <ul class="lst ftr-link">
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
</div>

Components v2

This is a more modern variant of the above cmp that improves it both in terms of having minimal styles to be overriden, making it more flexible, and just the overall look of it. Not much changes in the markup structure other than the containing div's class name (cmp2). So far it only has a default light and a dark variant, though others can easily be added in the future, as needed. Examples of this new version can be found in the homepage redesign, and on thte videos page.

Podcasts

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Top DFS Sites

Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Show HTML

HTML Snippet for a Component

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<div class="cmp2">
    <div class="hdr">
        <h2></h2>
        <ul class="lst hdr-link">
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
    <div class="bdy">

    </div>
    <div class="ftr">
        <ul class="lst ftr-link">
            <li>
                <a href=""></a>
            </li>
        </ul>
    </div>
</div>

UI Components

Buttons

Our site's default buttons are anchor tags with the btn class on them. Button class names are as listed above their respective buttons.

You can adjust the button color by adding one of these classes to it. By default the button is orange.

Show HTML

HTML Snippet for a button

  • 1
<a href="" class="btn">

Tabs

Tabs come in either one or two rows. Tab groups are wrapped in a container div with the tab-group classname and the secondary tabs getting the appropriate class as well (see example). Single line tabs do not require this wrapper. As a rule we use the dark variant. A light variant exists, but is not widely used, and does not support tab-groups. See the tabs.scss file for details.

Show HTML

HTML Snippet for tabs

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<div class="blk tab-group">
    <div class="blk tab dark">
        <ul class="lst left">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li class="on"><span></span></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
    <div class="blk tab dark secondary">
        <ul class="lst left">
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li class="on"><span></span></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
</div>

Notifications

Our page notifications are used to indicate success (green), errors (red), information (blue), and warnings (orange). The type of notification is defined by placing a class on the paragraph tag. They also have a data-role attached to them called "note-toggle" which allows users to remove the notification from the page.

Thank you for verifying your email address.

Your password is incorrect. Please try again.

Your password has been updated.

You have not changed your password in 6 months.

Show HTML

HTML Snippet for a Notification

  • 1
  • 2
  • 3
  • 4
<p class="blk ntc success" data-role="note-toggle"></p>
<p class="blk ntc error" data-role="note-toggle"></p>
<p class="blk ntc info" data-role="note-toggle"></p>
<p class="blk ntc warning" data-role="note-toggle"></p>

Tables

Tables on our site are styled by giving them the tbl class. It's also important to note that different browsers will automatically added spacing in between the table cells. So adding cellspacing="0" and cellpadding="0" is also necessary.

TableHeader #1 TableHeader #2 TableHeader #3 TableHeader #4
TableFooter #1 TableFooter #2 TableFooter #3 TableFooter #4
TableData #1 TableData #2 TableData #3 TableData #4
TableData #1 TableData #2 TableData #3 TableData #4
TableData #1 TableData #2 TableData #3 TableData #4
TableData #1 TableData #2 TableData #3 TableData #4
TableData #1 TableData #2 TableData #3 TableData #4
Show HTML

HTML snippet for a table

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
<table class="tbl" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Lists

Lists on our site are added by giving a ul the class of lst. This class by itself will only remove the default HTML list styles. The two most common types of lists we use on our site are data lists and content lists. (see examples below. The styling for these are controlled by giving the ul the corresponding class name as seen in the snippet examples.

  • List Item #1
  • List Item #2
  • List Item #3
  • List Item #4
  • List Item #5
Show HTML

HTML Snippet for a data list

  • 1
  • 2
  • 3
  • 4
<ul class="lst data">
    <li></li>
    <li></li>
</ul>

  • Content Title

    Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

  • Content Title

    Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

  • Content Title

    Paragraph every game will be broken down statistically, with several key elements highlighted in our charts. Vegas lines are broken down to show projected team totals, to give you an idea of who is favored to win.

Show HTML

HTML Snippet for a content list

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
<ul class="lst content">
    <li>
        <div class="blk content-thumbnail">
            <a href="">
                <img src="" class="img thumb" alt="">
            </a>
        </div>
        <div class="blk content">
            <h3></h3>
            <p></p>
        </div>
    </li>
</ul>

Form Elements

Form elements must be wrapped in an HTML form tag with the "frm" class to have the styles we've assigned to them.

Show HTML

HTML Snippet for a text input

  • 1
  • 2
  • 3
  • 4
<form action="" class="frm">
    <label for=""></label>
    <input type="text" placeholder="">
</form>
Show HTML

HTML Snippet for a textarea input

  • 1
  • 2
  • 3
  • 4
<form action="" class="frm">
    <label for=""></label>
    <textarea name="" id="" placeholder=""></textarea>
</form>
Show HTML

HTML Snippet for checkbox inputs

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
<form action="" class="frm">
    <input type="checkbox" class="checkbox">
    <label for=""></label>
    <input type="checkbox" class="checkbox">
    <label for=""></label>
</form>
Show HTML
Show HTML

HTML Snippet for a RotoGrinders dropdown Select

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
<div class="blk select">
    <div class="icn">
        <span class="icn-arw-up"></span>
        <span class="icn-arw-down"></span>
    </div>
    <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
</div>
Show HTML

HTML Snippet for radio selects

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
<form action="" class="frm">
    <input type="radio" checked="checked">
    <label for=""></label>
    <input type="radio">
    <label for=""></label>
    <input type="radio">
    <label for=""></label>
</form>

Landing Page Modules

RotoGrinders landing page modules were created to help the content management team quickly assemble content heavy landing pages for the purpose of promotions and advertising. Creating them still takes a fair bit of technical know-how. So if you run into difficulty, please contact the RotoGrinders Front End Experience Architect for help.

The markup for landing pages are pretty simple Base and wrapper markup goes in the file first, then content blocks go inside that. Landing page content blocks have multiple options for layout and presentation that are controlled by class names for easy customization.

Show HTML

HTML snippet for Landing Page Base and Content Wrapper

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
@extends('layout.premium')

@section('title')
    Page Title (browser tab text)
@stop

@section('content')
    <section class="blk landing-cms">
	    <!-- Landing Page Content Blocks Go Here -->
    </section>
@stop

Examples

Here are a few examples of landing page blocks with various layouts and styles. the class names used to create them are listed under each image.

blk landing-cms-module center row dark

blk landing-cms-module dark

blk landing-cms-module center

blk landing-cms-module center row

Show HTML

HTML snippet for Landing Page Content Block

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
<div class="blk landing-cms-module">
    <div>
        <div>
            <h1></h1>
            <p></p>
            <a class="btn full" href=""></a>
        </div>
        <div><img src=""/></div>
    </div>
</div>

Font Icons

Rotogrinder's icon collection is broken into several categories. Each can be created using an empty span tag and the icon's class name as listed below. The class name can be copied to your clipboard on hover.

Show HTML

HTML Snippet for an Icon

  • 1
<span class="icn-name-here"></span>

Weather

Sports

Social

Tools

Misc

Wind (small)

Wind (large)