Learning Ally Style Guide

Our DNN theme is built with Bootstrap 3 along with custom CSS and JS

Accessibility, Mobile Responsiveness, and SEO are the three most important aspects to consider when creating new designs

We recommend users download the WAVE Accessibility Evaluation Tool plugin to test pages before submitting them for review.

For mobile responsiveness, it's important to become comfortable with the Bootstrap 3 grid system.

For more information regarding accessibility, mobile responsiveness, and SEO please refer to the Resources Section

Headings

The h1 to h6 tags are used to define HTML headings.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

Note: Heading tags should only be used to denote headings. If you need text that is not a heading to be styled like a heading, you can add these classes:

<p class="h1">h1. Heading</p>
<p class="h2">h2. Heading</p>
<p class="h3">h3. Heading</p>
<p class="h4">h4. Heading</p>
<p class="h5">h5. Heading</p>
<p class="h6">h6. Heading</p>

Note: You can also "unbold" a header by adding the unbold class:

h1. Heading Normal

h1. Heading "unbold"

<h1>h1. Heading Normal</h1>
<h1 class="unbold">h1. Heading "unbold"</h1>

SEO Tip

The H1 tag tells search engines what the page is about. Take advantage by using high ranking keywords that accurately describe the purpose of the page

Accessibility Tip

Screen readers use HTML heading to create an outline of the page. It's important to use the headings sequentially so the content renders properly for BVI users. Read more about accessible headings here

Typography

Styling text is simple and straightforward with the help of bootstrap and our custom css styles

Bold

This word is bold

This sentence is also bold

<strong>This text is bold</strong> 
<p class="bold">This text is also bold</p>

Accessibility Tip

The strong tag relays importance to screen readers. If you just want to bold text for decoration, use the class="bold"

Italics

This text is italicized

 <p><em>This text is italicized</em></p>

Underline

This sentence is underlined

<p class="underline">This sentence is underlined</p>

Alignment Classes

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p> 
<p class="text-center">Center aligned text.</p> 
<p class="text-right">Right aligned text.</p> 
<p class="text-justify">Justified text.</p> 
<p class="text-nowrap">No wrap text.</p>

Transformation Classes

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p> 
<p class="text-uppercase">Uppercased text.</p> 
<p class="text-capitalize">Capitalized text.</p>

Buttons

You can use button classes on a, button, or input elements.

Link

<a class="btn blue-bg" href="#" role="button">Link</a> 
<button class="btn blue-bg" type="submit">Button</button> 
<input class="btn blue-bg" type="button" value="Input"> 
<input class="btn blue-bg" type="submit" value="Submit">

Button Styles

Change button styles with intuitive class names such as blue-bg, blue-border, blue-txt etc.

Link Link Link Link Link

<a class="btn blue-bg" href="#" role="button">Link</a> 
<a class="btn purple-bg" href="#" role="button">Link</a> 
<a class="btn blue-border" href="#" role="button">Link</a> 
<a class="btn purple-border" href="#" role="button">Link</a> 
<a class="btn white-border" href="#" role="button">Link</a>

Larger Button Sizes

Link Link Link

<a class="btn btn-lg blue-bg" href="#" role="button">Link</a> 
<a class="btn btn-block purple-bg" href="#" role="button">Link</a> 
<a class="btn btn-lg btn-block purple-bg" href="#" role="button">Link</a>

Accessibility Tip

Links such as "Read More" give no context to BVI users. Use the class "sr-only" to add meaningful content for screen readers only

Read More ** this button looks normal, but actually says "Read more about dyslexia" to screen readers **

<a class="btn blue-bg" href="#" role="button">Read More <span class="sr-only">about dyslexia</span></a>

Button Basic Usage Guideline

Forms

Enter School

cancel

submit

Use a blue background for submit buttons, and place them on the right side

Cancel buttons are typically white with a blue border and placed on the left side

Content Blocks

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

School Resources

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Parent Resources

Use the white-border and blue-bg classes on blue background blocks

Images

Responsive Size

Render images that dynamically adjust to fit the size of the window:

mother holding ipad while son takes notes

<img class="img img-responsive" src="/portals/6/Images/backgrounds/Image20190731121337.jpg" alt="mother holding ipad while son takes notes"/>

Accessibility Tip

Remember to add the alt attribute to your images so BVI users can understand what the image is trying to convey. Learn more about text alternatives

Rounded Edges

<img class="rounded" width="250" src="https://learningally.org/portals/6/Images/backgrounds/Image20190731121337.jpg" alt="mother holding ipad while son takes notes"/>

SEO Tip

Make sure to compress images. Large images cause increased page load time, and result in lower SEO performance. You can reduce file size by changing the size of the image, or by using an online tool like https://imagecompressor.com/

Photography Recommendations

Ensure that all imagery has age-appropriate children based on segment being discussed
Children and teachers should be captured "in the moment" in authentic situations
Photos should feel bright, vivid, and optimistic, with a clear subject in focus
Children should be shown using a modern computer, tablet or phone with the Learning Ally Link app on screen (if screen is viewable), or being an active, engaged participant in class
Show students wearing headphones if in school environment
When teachers or adults are shown, they should be interacting with the students and look engaged
Avoid the use of photos that:

look too "staged"
have multiple subjects looking at camera in obvious forced way
have lighting that is c old or monochromatic
are too dark or muddy
have a child looking isolated from peers
use strange or unusual angles
obscure part of the subject matter
have children or teachers looking angry, sad, confused, bored, or overwhelmed

Use a range of photos that have diverse ethnicity and show a representative of the population being served (visual or physical impairments, etc.)

Videos

Responsive iframe embed

The example code below shows how to center a single video

<div class="row"> 
    <div class="col-md-6 col-md-push-3"> 
        <div class="embed-responsive embed-responsive-16by9"> 
            <iframe width="560" height="315" src="https://www.youtube.com/embed/7Nn7NZI_LN4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
        </div> 
    </div> 
</div>

The example code below shows the responsive way to add 2 videos in a row. You can follow the same design for 3 videos in a row.

<div class="row">
    <div class="col-md-6">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/IOWw_Q1W7tI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
    <div class="col-md-6">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PI4JABNwB_U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
</div>

Accessibility Tip

3 videos in a row is the maximum. If you add more, the video size will become too small and remove the button for closed captioning - a key feature for users with low vision.

Colors

Primary Brand Colors

Pantone 2132 C

CMYK: 100 66 0 0

RGB: 0 95 179

HEX: #005FB3

Pantone 2735 C

CMYK: 87 100 0 0

RGB: 78 47 145

HEX: #4D2E91

Pantone 368 C

CMYK: 60 0 100 0

RGB: 98 187 70

HEX: #62BB46

Secondary Brand Colors

Pantone 2995 C

CMYK: 60 10 0 0

RGB: 0 181 239

HEX: #00B5EF

Pantone 2577 C

CMYK: 30 50 0 0

RGB: 158 127 186

HEX: #9E7FBA

Pantone 366 C

CMYK: 37 0 73 0

RGB: 181 217 154

HEX: #B5D99A

Pantone 2132 C

CMYK: 100C 66M 0Y 0K

RGB: 0 95 179

HEX: #005FB3

Pantone Black C

CMYK: 0 0 0 0

RGB: 0 0 0

HEX: #000000

Pantone 425 C

CMYK: 0 0 0 85

RGB: 78 77 76

HEX: #4C4C4E

All Text Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. NOT enough contrast on a white background!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.white on white = invisible

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accessible Text Colors on White Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Background Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accessible Text Colors on Color Backgrounds

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accessibility Tip

Always use the color contrast checker when using color classes.

Border Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 
     
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     
     
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     
     
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Note es, ms, and hs, refer to elementary school, middle school, and high school, respectively

Utilities

Spacing

We can add space to an element with either padding or margin

Simply put:

Use padding for spacing within an element. Use margin for spacing between elements.

In order to simplify padding and margin, we created these classes:

p-t-5, p-b-5, p-l-5, p-r-5, p-lr-5 
m-t-5, m-b-5, m-l-5, m-r-5, m-lr-5

To break that down, you first start with a "p" or "m" referring to padding or margin.

The next letter defines where to add the space top, bottom, left, right, or left and right

Finally, we add a number to the end to set how much space we want to add in pixels

The values can be 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, or 100

Note that you can use both padding and margin on the same element

Resources

Accessibility

The w3.org Web Content Accessibility Guidelines site - overview of WCAG 2.0
WCAG 2.0 Quick Reference - Great place to get best practices
Our vendor for Accessibility training SSB Bart Group
Aria Landmarks information - very useful for more complex accessibility concerns
National Law Review article: Is Your Website ADA Compliant? - basic legal overview of how the WCAG 2.0 AA standards fit into ADA compliance
The WebAIM Contrast Checker - check ratios and find colors that fit the ratio you require