Shift.ms 4.0 Styleguide

A living styleguide designed, built and managed by shift.ms

Scaffolding

Scaffolding refers to the global resets and dependencies that Primer is built upon.

HTML5 doctype


Shift.ms 4.0 styleguide makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your pages.


               <!DOCTYPE html>
        

Type

Base font size: 18px; Line height 1.4em.

Headings, paragraphs, blockquotes, lists, and more have some global resets. It’s worth noting these aren’t the same as our Markdown styles.

Headings


H1 head

Brandon Bold - 2.5em / 45px

H2 head

Brandon Bold - 1.75em / 31.5px. Line height 1.2em.

H3 head

Brandon Bold - 1.125em / 20.25px. Line height 1.2em.

H4 head

Brandon Bold - 1em / 18px. Line height 1.2em.

H5 head

Brandon Medium - 1em / 18px. Line height 1.2em.

                
                <h1>h1. Primer heading</h1>
                <h2>h2. Primer heading</h2>
                <h3>h3. Primer heading</h3>
                <h4>h4. Primer heading</h4>
                <h5>h5. Primer heading</h5>
                <h6>h6. Primer heading</h6>
                
            

Lead Paragraph


Nullam quis risus eget urna mollis ornare vel eu leo.

Font size 1.5em / 24px. Line height 1.5em.

                
                <p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
                
            

Body text


Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

                
                <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                
            

Inline link - Internal


Nullam quis risus eget urna mollis ornare Internal inline link vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                
               <p>Nullam quis risus eget urna mollis ornare
               <a class="inline-internal" href="#">Internal inline link
               </a>  vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
               </p>
                
            

Inline link - External


Nullam quis risus eget urna mollis ornare Internal inline link vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

                
               <p>Nullam quis risus eget urna mollis ornare
               <a class="inline-external" href="#">Internal inline link
               </a>  vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
               </p>
                
            

Blockquotes


This is a longer block quote.

It uses paragraph elements.

                
                <blockquote>
                    <p>This is a longer block quote.</p>
                    <p>It uses paragraph elements.</p>
                </blockquote>
                
            

Unordered List


  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
                
                <ul>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Nulla volutpat aliquam velit
                <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
                </ul>
                </li>
                <li>Faucibus porta lacus fringilla vel</li>
                <li>Aenean sit amet erat nunc</li>
                <li>Eget porttitor lorem</li>
                </ul>
                
            

Ordered List


  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc
  5. Eget porttitor lorem
                
                <ol>
                <li>Lorem ipsum dolor sit amet</li>
                <li>Nulla volutpat aliquam velit
                <ol>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
                <li>Ac tristique libero volutpat at</li>
                </ol>
                </li>
                <li>Faucibus porta lacus fringilla vel</li>
                <li>Aenean sit amet erat nunc</li>
                <li>Eget porttitor lorem</li>
                </ol>
                
            

Forms

Style individual form controls and utilise common layouts.

Form on white


  • Hint text

                
                <li>
                <label for="signup_username">Input label</label>
                <p class="prompt">Hint text</p>
                <input class="input-text-onwhite" type="text" name="" id="" value="" autofocus="" aria-required="true" autocomplete="off" autocapitalize="none">
                <p class="error"></p>
                
            

Form on coloured background


  • Hint text

                
                <li>
                <label class="lbl" for="signup_username">Input label</label>
                <p class="prompt">Hint text</p>
                <input  type="text" class="input-text-oncolour" name="" id="" value="" autofocus="" aria-required="true" autocomplete="off" autocapitalize="none">
                <p class="error"></p>
                
            

Form Selects


  • Hint text

                
                <li>
                <label for="">Select Label</label>
                <p class="prompt">Hint text</p>
                <span class="dropdown">
                <select class="form-dropdown" id="" name="" autofocus="" aria-required="false" role="listbox">
                <option role="option" value="">Select your option</option>
                <option role="option" value="option1">Option 1</option>
                <option role="option" value="option2">Option 2</option>
                </select>
                </span>
                </li>
                
            

Form Checkbox/Radio


                
                <li class="radio">
                <label class="" for="">Radio Label</label>
                <input type="checkbox" name="" id="" value="" autofocus="">
                <p class="error"></p>
                </li>
                
            

Form validation


  • Hint text

    This is an error message
                
                <li>
                <label for="signup_username">Input label</label>
                <p class="prompt">Hint text</p>
                <input  type="text" class="input-text-onwhite" name="" id="" value="" autofocus="" aria-required="true" autocomplete="off" autocapitalize="none">
                <p class="error"></p>
                <div class="error">This is an error message</div>
                
            

Form Submit


                
                <p>
                <input type="submit" class="btn-primary" value="Submit">
                </p>
                
            

Buttons

Buttons are used to perform actions in forms and as styled hyperlinks that link to other pages. Each button type below can be used in either of these formats.



Action button

Used for user actions incuding: Start a conversation, Add new, Join. View full list of action types here



Action button
                                
                                <button class="btn" type="button">Button</button>
                                <a class="btn" href="#" role="button">Button</a>
                                
                            

Button on coloured background

Used for user actions incuding: Give us money, Fundraise for us. View full list of action types here


                                
                                <button class="btn-secondary" type="button">Button</button>
                                
                            

Button on white

Used for user actions incuding: Search, comment, sign. View full list of action types here


                                
                                <button class="btn-primary" type="button">Button</button>
                                
                            

Buddypress button

Default styling should be used for all buddypres buttons. Full list of these here


                                
                                  <a title="Add Friend" rel="add" class="friendship-button not_friends add">Button</a>

                                
                            

Avatars

Avatars are images that users can set as their profile picture.


Basic example


Profile picture of avatar
                
                <img class="avatar" width="150" height="150" alt="Profile picture of avatar">

                
            

Small Avatar


Profile picture of avatar
                
                <img class="avatar" width="20" height="20" alt="Profile picture of avatar">

                
            

Structure


Forum Card


I’m feeling tired and thinking of switching meds from copaxone to tysabri – my doc says I […]

Profile photo of freddie freddie
View count 2
Comment count 2
                
                <div id="bbp-topic-41961" class="odd bbp-parent-forum-7 user-id-28 post-41961 topic type-topic status-publish hentry">
                <div class="topic-main">
                <div class="bbp-topic-title">
                <a class="bbp-topic-permalink" href="http://localhost:8888/shift.ms/forums/topic/test-posting-about-tysabri/">test posting about tysabri</a>
                </div>
                <div class="topic-content">
                <p>I’m feeling tired and thinking of switching meds from copaxone to tysabri – my doc says I […]</p>
                </div>
                </div>
                <div class="bbp-topic-meta">
                <span class="user">
                <a href="#" title="View user's profile" class="bbp-author-avatar" rel="nofollow">
                <img src="assets/images/avatar/sml-avatar.png" class="avatar user-28-avatar avatar-16 photo" width="16" height="16" alt="Profile photo of user">
                <a href="http://localhost:8888/shift.ms/members/freddie/" title="View freddie's profile" class="bbp-author-name" rel="nofollow">User
                </a>
                </a>
                </span>
                <div class="topic-data">
                <div class="bbp-topic-voice-count">
                <span class="icon-fallback-text">
                <span class="icon icon-eye" aria-hidden="true"></span>
                <span class="fallback-text">View count</span>
                </span>
                <span class="topic-count">2</span>
                </div>
                <div class="bbp-topic-reply-count">
                <span class="icon-fallback-text">
                <span class="icon icon-chat" aria-hidden="true"></span>
                <span class="fallback-text">Comment count</span>
                </span>
                 <span class="topic-count">2</span>
                </div>
                </div>
                </div>
                <div class="topic-categories">
                <div class="secondary">
                <ul class="cats">
                <li><a href="#">Copaxone</a></li>
                <li><a href="#">Fatigue</a></li>
                <li><a href="#">Limbo land</a>                                </li>
                <li><a href="#">Relapsing remitting</a></li>
                </ul>
                </div>
                </div>
                </div>
                
            

MS Reporters Card


                
                <div class="msreporters-video-card">
                <a href="https://shift.ms/msreporters-video/looking-forward-ectrims-2016">
                <a href="#">Diagnosis
                <div class="msreporters-video-card_image">
                <div class="msreporters-video-card_image_overlay"></div>
                <div class="msreporters-video-card_image_icon">
                <span class="icon-fallback-text">Healthy living
                <span class="icon icon-play-circle" aria-hidden="true"></span>
                <span class="fallback-text">Play Video</span>
                </span>
                </div>
                <img width="500" height="281" src="https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7.jpg" class="attachment-500x500 size-500x500 wp-post-image" alt="" srcset="https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7.jpg 1280w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7-150x84.jpg 150w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7-300x169.jpg 300w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7-768x432.jpg 768w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/maxresdefault-7-450x253.jpg 450w">Symptoms
                <h5Researcher/h5>
                <div class="msreporters-video-card_title">
                <ul class="cats">
                <li>
                <a href="https://shift.ms/category/research">Research</a>
                </li>
                </ul>
                </div>
                </div>
                
            

MS Reporters Playlist Card


                
                <div class="msreporters-playlist-card">
                <a href="https://shift.ms/msreporters-video/symptoms>
                <img width="467" height="500" src="https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6.png" class="attachment-500x500 size-500x500 wp-post-image" alt="" srcset="https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6.png 800w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6-93x100.png 93w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6-187x200.png 187w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6-768x823.png 768w, https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2016/03/6-280x300.png 280w" sizes="(max-width: 467px) 100vw, 467px">
                <div class="msreporters-playlist-card_image_text">
                <h3>Symptoms</h3>
                <h5>Playlist</h5>
                </div>
                </div>
                </a>
                </div>
                
            

Shift.ms Promo Card


Breaking news!

We won the funding to build Map.ms! Big thank you to the whole community for getting behind the campaign to bring back the map.

                
                <div class="shift-promo-post_image" style="background: url(https://shiftms-wpengine.netdna-ssl.com/wp-content/uploads/2017/01/Sarahs-Promo-post-template-take2-18.png) !important;"></div>
                <div class="shift-promo-post_content">
                <h3>Breaking news!</h3>
                <p>We won the funding to build Map.ms! Big thank you to the whole community for getting behind the campaign to bring back the map.</p>
                </div>
                </div>
                
            

Meet Up Card


                
                <div class="new-event">
                <div class="new-event_image">
                <img src="https://shiftms-wpengine.netdna-ssl.com/wp-content/themes/shiftms/assets/images/events/events_image.png">
                </div>
                <div class="new-event_content">
                <a href="https://shift.ms/meet-ups/central-london-meet" data-analytics-category="event-post-card" data-analytics-label="event-post-card-84248">
                <h3>New Event<span> in LondonEvent</span></h3>
                <p>January 10, 2017<br>6:30 pm - 9:30 pm></p>
                <h3>Central London meet up>
                </a>
                </div>
                </div>
                
            

Categories


                
                <ul>
                <li>
                <a href="#">Diagnosis
                </a>
                </li>
                <li>
                <a href="#">Healthy living
                </a>
                </li>
                <li>
                <a href="#">Symptoms
                </a>
                </li>
                <li>
                <a href="#">Treatment
                </a>
                </li>
                <li>
                <a href="#">Work and play
                </a>
                </li>
                </ul>
                
            

Categories - on white


                
                <ul>
                <li>
                <a href="#">Diagnosis
                </a>
                </li>
                <li>
                <a href="#">Healthy living
                </a>
                </li>
                <li>
                <a href="#">Symptoms
                </a>
                </li>
                <li>
                <a href="#">Treatment
                </a>
                </li>
                <li>
                <a href="#">Work and play
                </a>
                </li>
                </ul>
                
            

Categories - on grey


                
                <ul>
                <li>
                <a href="#">Diagnosis
                </a>
                </li>
                <li>
                <a href="#">Healthy living
                </a>
                </li>
                <li>
                <a href="#">Symptoms
                </a>
                </li>
                <li>
                <a href="#">Treatment
                </a>
                </li>
                <li>
                <a href="#">Work and play
                </a>
                </li>
                </ul>
                
            

Shortcodes

These are shortcodes which can be used inline in a WordPress wysiwyg editor


Lead Paragraph


Nullam quis risus eget urna mollis ornare vel eu leo.

                
                [lead]Nullam quis risus eget urna mollis ornare vel eu leo.[/lead]

                
            

Paragraph Section


You Are the Expert

Paragraph text

                
                [section class="blue"]
                    <h2>You Are the Expert</h2>
                    <p>Paragraph text</p>
                    [/section]
                

                
            

Three Columns


title

Some content for a blog post of your choice, this is content this is content this is content.

title

Some content for a blog post of your choice, this is content this is content this is content.

title

Some content for a blog post of your choice, this is content this is content this is content.
                
                
                   [text_image-content-container]

                       [text_image-content image="http://shiftms.staging.wpengine.com/wp-content/uploads/2016/02/2016-02-29.png"]
                        Some content for a blog post of your choice, this is content this is content this is content.
                       [/text_image-content]

                       [text_image-content image="http://shiftms.staging.wpengine.com/wp-content/uploads/2016/02/2.png"]
                        Some content for a blog post of your choice, this is content this is content this is content.
                        [/text_image-content]

                       [text_image-content image="http://shiftms.staging.wpengine.com/wp-content/uploads/2016/02/3.png"]
                        Some content for a blog post of your choice, this is content this is content this is content.
                       [/text_image-content]

                   [/text_image-content-container]
                

                
            

Quote card


Unless you’re in a room full of Neurologists, you’re always going to be the expert

MSER
                
                
                [quote direction="left" author="MSER" sub="BP" color="blue" image="http://shift.ms/wp-content/uploads/2015/11/mser.png"] 
                It may take 12 to 14 weeks, if you leave your body to do it on it's own, but if you take steroids you may speed up that recovery. 
                But the degree of that recovery has already been pre-programmed
                [/quote]
                

                
            

Button


A Button
                
                
                    [button link="/link/somewhere" class="btn"]A Button[/button]
                

                
            

Inline Navigation


                
                
                [nav back="/what-is-a-relapse" none="" color="blue" forward="/24-hour-tracker" title="24 hour tracker"]
                [/nav]
                

                
            

Menu Tile with clock


                
                
                    [menu-tile link="module-1/" color="blue" image="500" title="is it a" sub="Relapse?" intro="Lead paragraph - module strapline" time="00" none=""][/menu-tile]
                

                
            

Menu Tile without clock


                
                
                    [menu-tile link="what-is-a-relapse" color="blueShade" image="500" title="relapses" sub="Learn" intro="This pathway will teach you about relapses" time="00" none="none"][/menu-tile]
                

                
            

Video Accordion


  • Understanding Your BladderPlus

  • Your Bladder and MSPlus

  • UTI PreventionPlus

  • Treatment of UTIPlus

  • UTI and RelapsePlus

  • You Can Test for UTI at HomePlus

                
                
                    [accordiongroup]

                        [accordion title="Understanding Your Bladder" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                        [accordion title="Your Bladder and MS" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                        [accordion title="UTI Prevention" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                        [accordion title="Treatment of UTI" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                        [accordion title="UTI and Relapse" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                        [accordion title="You Can Test for UTI at Home" src="http://www.youtube.com/embed/QILiHiTD3uc"][/accordion]

                    [/accordiongroup]
                

                
            

Arrow Tile


                
                
                    [arrow-tile link="what-happens-in-the-brain" color="blue" image="http://stagingshiftms.wpengine.com/wp-content/uploads/2016/12/what-happens-to-the-brain.png" title="What happens " sub="to the brain?" intro="This pathway will teach about seizures and what is happening in the brain" time="00" none="none"][/arrow-tile]