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.
- #ecf0f2
- #0094d9
- #4fc363
- #f98c13
- #2d363b
- #374044
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.
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.
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 HTMLHTML 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.
- FanDuel
- DraftKings
- FantasyDraft
- FantasyAces
- FantasyFeud
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 HTMLHTML 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 |
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
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.
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 HTMLHTML Snippet for a text input
- 1
- 2
- 3
- 4
<form action="" class="frm">
<label for=""></label>
<input type="text" placeholder="">
</form>
HTML Snippet for a textarea input
- 1
- 2
- 3
- 4
<form action="" class="frm">
<label for=""></label>
<textarea name="" id="" placeholder=""></textarea>
</form>
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>
HTML Snippet for a default dropdown Select
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<form action="" class="frm">
<label for=""></label>
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form>
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>
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 HTMLHTML 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
-
Layout
Layout controlled by several classes. To center content inside a block, simply add the "center" class to the block wrapper div. Adding the "row" class to the wrapper div will make the content line up vertically. By default, content will align horizontally in a row and can have up to 4 content divs inside.
-
Background Color
For background colors you have three options: clear, dark, and light. By Default, the background is clear, which shows as light grey, in most cases. Background color can be customized by adding the "dark" or "light" classes to the content block wrapper.
-
Headers
Header font size is controlled in the markup by using h1-h4 elements, where h1 is the largest font size and h4 is the smallest font size. By default, they are set to h1. Adjust down as needed.
-
Call to Action
A call to action is achieved by adding a button inside a content div nested in the landing page blocks. If this statement is confusing, see the HTML snippet below. Button customization options can be found in the UI components section here. Call to action buttons are in the markup by default, but can be removed as needed. A link URL will need to be set in the href for each button for it to function propely.
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
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 HTMLHTML Snippet for an Icon
- 1
<span class="icn-name-here"></span>
Social