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.
A living styleguide designed, built and managed by shift.ms
Scaffolding refers to the global resets and dependencies that Primer is built upon.
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>
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.
Brandon Bold - 2.5em / 45px
Brandon Bold - 1.75em / 31.5px. Line height 1.2em.
Brandon Bold - 1.125em / 20.25px. Line height 1.2em.
Brandon Bold - 1em / 18px. Line height 1.2em.
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>
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>
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>
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>
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>
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>
<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>
<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>
Style individual form controls and utilise common layouts.
<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>
<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>
<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>
<li class="radio">
<label class="" for="">Radio Label</label>
<input type="checkbox" name="" id="" value="" autofocus="">
<p class="error"></p>
</li>
<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>
<p>
<input type="submit" class="btn-primary" value="Submit">
</p>
Avatars are images that users can set as their profile picture.
<img class="avatar" width="150" height="150" alt="Profile picture of avatar">
<img class="avatar" width="20" height="20" alt="Profile picture of avatar">
I’m feeling tired and thinking of switching meds from copaxone to tysabri – my doc says I […]
<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>
<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>
<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>
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>
<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>
<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>
<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>
<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>
These are shortcodes which can be used inline in a WordPress wysiwyg editor
Nullam quis risus eget urna mollis ornare vel eu leo.
[lead]Nullam quis risus eget urna mollis ornare vel eu leo.[/lead]
Paragraph text
[section class="blue"]
<h2>You Are the Expert</h2>
<p>Paragraph text</p>
[/section]
[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]
Unless you’re in a room full of Neurologists, you’re always going to be the expert
[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]
[nav back="/what-is-a-relapse" none="" color="blue" forward="/24-hour-tracker" title="24 hour tracker"]
[/nav]
[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 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]
[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 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]