cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <section>
 <h1>Ember Styleguide</h1>
 <p class="js-notFull">If you're just here to view the styleguide itself, you may have a better experience by visiting <a href="https://codepen.io/melsumner/full/9d551738a81e319a773395a2cfa1a82e/">https://codepen.io/melsumner/full/9d551738a81e319a773395a2cfa1a82e/</a>.</p>
 <p class="lead">This is a styleguide for the Ember.js family of websites. It is intended to be the guide for the ember-styleguide and glimmer-styleguide components. Feedback is welcome in the team-learning channel of the Ember Community Slack chat.</p>
</section>
<section aria-labelledby="pageMarkup">
 <div class="section-heading" id="pageMarkup">
  <!-- 	 <a href="#pageMarkup"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  General Layout <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content hide">
  <p class="lead">To support the application of consistent styling across the entire site, the markup should follow a specific pattern. This will ensure that styling is consistent, no matter what the content.</p>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rule:</b> Every page must have at least 3 landmark elements:</p>
  <ul>
   <li>Heading (should contain navbar)</li>
   <li>Main</li>
   <li>Footer</li>
  </ul>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rule:</b> These landmark elements must be the direct descendant of the <var>&lt;body&gt;</var> or the first <var>&lt;div&gt;</var> element within the <var>&lt;body&gt;</var> element.</p>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rule:</b> Within the <var>&lt;main&gt;</var> element, divide the content up using <var>&lt;section&gt;</var> element. If that <var>&lt;section&gt;</var> element should be further sub-divided,
   use the <var>&lt;article&gt;</var> element.</p>
  <article>
   <div class="article-heading">Sample Markup</div>
   <pre><code>&lt;header&gt;
 &lt;nav&gt;...&lt;/nav&gt;
&lt;/header&gt;
&lt;main&gt;
 &lt;section&gt;...&lt;/section&gt;
 &lt;section&gt;
  &lt;article&gt;...&lt;/article&gt;
  &lt;article&gt;...&lt;/article&gt;
 &lt;/section&gt;
&lt;/main&gt; 
&lt;footer&gt;...&lt;/footer&gt;
</code></pre>
  </article>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Styling Rules:</b>
   <ol>
    <li>The styling for the page will use flexbox, to better support mobile devices</li>
    <li>Existing style rules should not be overwritten</li>
    <li>No IDs should be used for styling</li>
    <li>No styles should be added inline</li>
    <li>If media queries need to be used, the code should be written in a "mobile-first" way</li>
   </ol>
  </p>
 </div>
</section>
<section aria-labelledby="headings">
 <div class="section-heading" id="headings">
  <!-- 	 <a href="#headings"><i class="fa fa-link" aria-hidden="true"></i></a>  -->
  Headings <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
	 <div class="section-heading-sub">1. Heading Elements</div>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rules:</b>
   <ol>
    <li>Only use a single h1 element per page.</li>
    <li>Each page should have a page title, even if visually hidden. Screen readers allow users to navigate by heading elements, and it is one of the WCAG success criteria that each page has a (meaningful) page title.</li>
    <li>Do not skip heading elements- the next heading after an <var>&lt;h1&gt;</var> should be an <var>&lt;h2&gt;</var>. The order is not arbitrary, especially to a user with assistive technology.</li>
   </ol>
  </p>
  <h1>h1 - Page Title</h1>
  <h2>h2 - Section Title</h2>
  <h3>h3 - article title</h3>
  <h4>h4 - if you need it</h4>
  <p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius dolore blanditiis quod repellat fuga aut repudiandae soluta at assumenda impedit ipsum reprehenderit esse pariatur, provident accusantium. <a href="#">This is a link. Hover or focus on me.</a>   Reprehenderit, vero nobis.</p>
	<hr> 
  <div class="section-heading-sub">2. Blog Headings</div>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rules:</b>
		<ol>
			<li>There are three types of blog posts: regular, syndicated (written by a core team member and posted on their blog first) and guest post.</li>
			<li>On smaller screens, the date should break to its own line under the article title. On larger screens, it can stay inline.</li>
  </p>
  <article>
   <div class="article-heading">Regular Post</div>
   <pre><code>&lt;h2 class="post-title"&gt;Blog Post Title 
 &lt;span class="post-date"&gt;- Mmm dd, yyyy&lt;/span&gt; 
&lt;h2&gt;
&lt;span class="post-author"&gt;Author Name&lt;/span&gt;
	</code></pre>
   <div class="article-heading">Rendered</div>
   <h2 class="post-title">Blog Post Title <span class="post-date">Jan 01, 2017</span></h2>
   <span class="post-author">by Author Name</span>
   <hr/>
  </article>
  <article>
   <div class="article-heading">Syndicated Post</div>
   <p>When a core team member posts a article that was also posted first on their own blog. At the end of the blog post, there should be a link to the original URL- "Originally posted at (URL)."</p>
   <pre><code>&lt;h2 class="post-title"&gt;Blog Post Title 
 &lt;span class="post-date"&gt;- Mmm dd, yyyy&lt;/span&gt; 
&lt;h2&gt;
&lt;span class="post-author"&gt;Author Name&lt;/span&gt;
&lt;span class="post-tag syndicated"&gt;Syndicated Post&lt;/span&gt;
	</code></pre>
   <div class="article-heading">Rendered</div>
   <h2 class="post-title">Blog Post Title <span class="post-date">Jan 01, 2017</span></h2>
   <span class="post-author">Author Name</span>
   <span class="post-tag syndicated">Syndicated Post</span>

   <hr/>
  </article>
  <article>
   <div class="article-heading">Guest Post</div>
   <pre><code>&lt;h2 class="post-title"&gt;Blog Post Title 
 &lt;span class="post-date"&gt;- Mmm dd, yyyy&lt;/span&gt; 
&lt;h2&gt;
&lt;span class="post-author"&gt;Author Name&lt;/span&gt;
&lt;span class="post-tag guest"&gt;Guest Post&lt;/span&gt;
	</code></pre>
   <div class="article-heading">Rendered</div>
   <h2 class="post-title">Blog Post Title <span class="post-date">Jan 01, 2017</span></h2>
   <span class="post-author">Author Name</span>
   <span class="post-tag guest">Guest Post</span>
   <hr/>
  </article>
 </div>
</section>
<section aria-labelledby="colors">
 <div class="section-heading" id="colors">
  <!-- 	 <a href="#colors"><i class="fa fa-link" aria-hidden="true"></i></a>  -->
  Colors <button class="button button-light button-tiny js-button-toggle">Show/Hide</button> </div>
 <div class="section-content">
	 <p><a href="https://github.com/emberjs/website/issues/3146">Contribute to this issue</a></p>
  <p>The naming convention for the colors should be consistent. For example:</p>
  <ul>
   <li>$orange</li>
   <li>$orange-darker</li>
   <li>$orange-darkest</li>
  </ul>
  <p>To add in lighter variations of the main color:</p>
  <ul>
   <li>$orange-lighter</li>
   <li>$orange-lightest</li>
  </ul>
  <p>These values should be calculated in a mathmatically consistent way. No arbitrarily named colors should be added.</p>
  <p>Below is an inventory of the current color palette, and is a work in progress. Expect this section to change, with the exception of $orange, which is the official "Ember orange."</p>
  <div class="flex-wrapper">
   <div class="panel">
    <div class="panel-body">
     <div class="box orange"></div>
    </div>
    <div class="panel-footer">
     <p>#e04e39<br/>$orange</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box orange-darker"></div>
    </div>
    <div class="panel-footer">
     <p>#c7341f<br/>$orange-darker</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box orange-darkest"></div>
    </div>
    <div class="panel-footer">
     <p>#9b2918<br/>$orange-darkest</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box blue"></div>
    </div>
    <div class="panel-footer">
     <p>#3c64b6<br/>$blue</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box blue-lighter"></div>
    </div>
    <div class="panel-footer">
     <p>#74b0ce<br/>$blue-lighter</p>
    </div>
   </div>

   <div class="panel">
    <div class="panel-body">
     <div class="box black"></div>
    </div>
    <div class="panel-footer">
     <p>#212121<br/>$black</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box gray"></div>
    </div>
    <div class="panel-footer">
     <p>#454545<br/>$gray</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box gray-lighter"></div>
    </div>
    <div class="panel-footer">
     <p>#999999<br/>$gray-lighter</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box gray-lightest"></div>
    </div>
    <div class="panel-footer">
     <p>#eeeeee<br/>$gray-lightest</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box white"></div>
    </div>
    <div class="panel-footer">
     <p>#fdfdfd<br/>$white</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box white-darker"></div>
    </div>
    <div class="panel-footer">
     <p>#f9e7e4<br/>$linen</p>
    </div>
   </div>

  </div>
  <p>Status/State Colors</p>
  <ul>
   <li class="text-error">.text-error</li>
   <li class="text-warning">.text-warning</li>
   <li class="text-success">.text-success</li>
   <li class="text-info">.text-info</li>
  </ul>

  <p>Deprecated Colors:</p>
  <div class="flex-wrapper">
   <div class="panel">
    <div class="panel-body">
     <div class="box brown"></div>
    </div>
    <div class="panel-footer">
     <p>#865931<br/>$brown</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box brown-lighter"></div>
    </div>
    <div class="panel-footer">
     <p>#b67d47<br/>$brown-lighter</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box brown-lightest"></div>
    </div>
    <div class="panel-footer">
     <p>#fffdf9<br/>$tan</p>
    </div>
   </div>
   <div class="panel">
    <div class="panel-body">
     <div class="box white-darkest"></div>
    </div>
    <div class="panel-footer">
     <p>#fffbf5<br/>$creme</p>
    </div>
   </div>
  </div>
 </div>
</section>
<section aria-labelledby="buttons">
 <div class="section-heading" id="buttons">
  <!-- 	 <a href="#buttons"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Buttons <button class="button button-light button-tiny js-button-toggle">Show/Hide</button> </div>
 <div class="section-content hide">
  <p>Work in Progress. Should have visible change on hover, but use CSS transitions to smoothly ease in and out of changes. For the time being, using the button styles from Material Design (except for the parts that are not accessible).</p>
	 <p><a href="https://github.com/ember-learn/ember-styleguide/issues/4">Create this component</a></p>
  <article>
   <button class="button button-light">.button-light</button>
   <button class="button button-dark">.button-dark</button>
   <button class="button button-light disabled">disabled</button>
   <br />
   <p>A smaller button, for condensed spaces:</p>
   <button class="button button-light button-dense">.button-dense</button>
   <button class="button button-dark button-dense">.button-dense</button>
   <button class="button button-light disabled button-dense">disabled</button>
   <p>When a block-level button is desired (full viewport width, contained here to 500px):</p>
   <div class="mobile">
    <button class="button button-light button-block">.button-block</button>
    <button class="button button-dark button-block">.button-block</button>
    <button class="button button-light disabled button-block">.button-block</button>
   </div>
  </article>
 </div>
</section>
<section aria-labelledby="callToAction">
 <div class="section-heading" id="callToAction">Call to Action <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
  <p class="lead">There are three types of call to action components.</p>
  <div class="section-heading-sub">1. CTA</div>
  <p>This CTA can be used in any place where a CTA is desired. The content and button will be stacked on small viewports, but side by side on large viewports. If the text is too long, it will wrap. On a small viewport it will take up 95% of the viewport.
   On larger viewports, it will be contained to 85%.</p>
	 <p><a href="https://github.com/ember-learn/ember-styleguide/issues/7">Create this component</a></p>
  <article>
   <div class="article-heading">Rendered</div>
   <div class="cta cta-background">
    <p class="cta-message"><i class="fa fa-info-circle" aria-hidden="true"></i> You are viewing a message. This is a message that contains some sort of call to action.</p>
    <button class="button button-dark button-dense">Do something</button>
   </div>
  </article>
  <div class="section-heading-sub">2. CTA as a link</div>
  <p>This CTA is for cases when you need a single CTA to use as a link, typically at the bottom of a page. For our puposes, this CTA will be used for the "contribute to this page" links.</p>
  <p><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> <b>Rules:</b>
   <ol>
    <li>At the bottom of each page, there should be an invitation to contribute.</li>
    <li>The link should direct the user to the appropriate Github repository.</li>
    <li>This link should be just above the footer, and centered in the viewport.</li>
    <li>It should have the <var>title</var> attribute filled out to provide additional clarity.</li>
   </ol>
  </p>
  <article>
   <div class="article-heading">Rendered</div>
   <div class="cta-link">
    <a href="https://github.com/emberjs/website" title="Use Github to suggest an edit to this page">Contribute to this page.</a>
   </div>

  </article>
 </div>
<div class="section-heading-sub">3. CTA as a note</div>
<article>
	<div class="article-heading">Rendered</div>
	<div class="cta">
		<div class="cta-note">
			<div class="cta-note-body">
				<div class="cta-note-heading">Tomster says...</div>
			It's important to remember accessibility when building your app! Addons like ember-a11y-testing check your syntax for common accessibility errors and let you know what to change, so that your app is inclusive for all of your users.</div>
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/icon-tomster.png" alt="" role="presentation" />
		</div>
	</div>
</article>
</section>
<section aria-labelledby="expansionPanels">
 <div class="section-heading" id="expansionPanels">
  <!-- 	 <a href="#expansionPanels"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Expansion Panels <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
  <p>Used for the statusboard, or any place where expandable panels are sensible to use.</p>
  <div class="accordion-group">
   <div class="accordion">
    <div class="accordion-heading">
     <div class="content">JavaScript Modules API</div>
     <div class="content">Avail:
      <span class="content-sub">Ember CLI Babel v6.6.0+</span>
     </div>
     <div class="content">Status:
      <span class="content-sub text-success">
						<i class="fa fa-check-circle text-success" aria-hidden="true"></i>
						Shipped
					</span>
     </div>
     <button class="button-icon" aria-label="expand collapse">
					<i class="fa fa-chevron-down" aria-hidden="true"></i>
				</button>
    </div>
    <div class="accordion-body" style="display: none;">
     <div class="accordion-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
     </div>
     <div class="accordion-content">
      <div class="content-title" id="list_001">List Title</div>
      <ul class="content-list" aria-describedby="list_001">
       <li>
        <a href="#"><img src="" alt="">Name Name</a>
       </li>
       <li>
        <a href="#"><img src="" alt="">Name Name</a>
       </li>
      </ul>
      <div class="content-title" id="list_002">List Title</div>
      <ul class="content-list" aria-describedby="list_002">
       <li><a href="#">Resource Link</a></li>
       <li><a href="#">Resource Link</a></li>
       <li><a href="#">Resource Link</a></li>
      </ul>
     </div>
    </div>
   </div>
   <div class="accordion">
    <div class="accordion-heading">
     <div class="content">Module Unification</div>
     <div class="content">Avail:
      <span class="content-sub">Not yet available</span>
     </div>
     <div class="content">Status:
      <span class="content-sub text-info">
						<i class="fa fa-dot-circle-o text-info" aria-hidden="true"></i>
						In Progress
					</span>
     </div>
     <button class="button-icon" aria-label="expand collapse">
					<i class="fa fa-chevron-down" aria-hidden="true"></i>
				</button>
    </div>
    <div class="accordion-body" style="display: none;">
     <div class="accordion-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
     </div>
     <div class="accordion-aside">
     </div>
    </div>
   </div>
   <div class="accordion">
    <div class="accordion-heading">
     <div class="content">Code Splitting</div>
     <div class="content">Avail:
      <span class="content-sub">Not yet available</span>
     </div>
     <div class="content">Status:
      <span class="content-sub text-warning">
						<i class="fa fa-info-circle text-warning" aria-hidden="true"></i>
						RFC Submitted
					</span>
     </div>
     <button class="button-icon" aria-label="expand collapse">
					<i class="fa fa-chevron-down" aria-hidden="true"></i>
				</button>
    </div>
    <div class="accordion-body" style="display: none;">
     <div class="accordion-content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut nisi culpa magnam quam sed exercitationem alias corrupti aspernatur illo nobis eos dicta esse quasi assumenda officiis nostrum, impedit voluptates commodi.</p>
     </div>
     <div class="accordion-aside">
     </div>
    </div>
   </div>
  </div>
 </div>
</section>
<section aria-labelledby="formElements">
 <div class="section-heading" id="formElements">
  <!-- 	 <a href="#formElements"><i class="fa fa-link" aria-hidden="true"></i></a>  -->
  Form Elements <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
  <p>coming soon</p>
 </div>
</section>
<section aria-labelledby="lists">
 <div class="section-heading" id="lists">
  <!-- 	 <a href="#lists"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Lists <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
  coming soon
 </div>
</section>
<section aria-labelledby="navigation">
 <div class="section-heading" id="navigation">
  <!-- 	 <a href="#navigation"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Navigation <button class="button button-light button-tiny js-button-toggle">Show/Hide</button> </div>
 <div class="section-content hide">
  <p>See: <a href="https://codepen.io/melsumner/full/b09957277ef32aa0626bf6c227a4e961/">https://codepen.io/melsumner/full/b09957277ef32aa0626bf6c227a4e961/</a>
  </p>
 </div>
</section>
<section aria-labelledby="apiIcons">
 <div class="section-heading" id="apiIcons">
  <!-- 	 <a href="#apiIcons"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  API Icons <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content hide">
  <p>These icons only use HTML & CSS.</p>
  <article>
   <div class="article-heading">Letter Icons</div>
   <span class="icon-letter" title="Added">a</span>
   <span class="icon-letter" title="Deprecated">d</span>
   <span class="icon-letter" title="Internal/Private">i</span>
   <span class="icon-letter" title="Legacy">l</span>
   <span class="icon-letter" title="Modified">m</span>
   <span class="icon-letter" title="Public">p</span>
  </article>
  <article>
   <div class="article-heading">Symbol Icons</div>
   <span class="icon-symbol" title="Modified">~</span>
   <span class="icon-symbol" title="Added">+</span>
   <span class="icon-symbol" title="Deprecated">--</span>
  </article>
 </div>
</section>
<section aria-labelledby="codeSamples">
 <div class="section-heading" id="codeSamples">
  <!-- 	 <a href="#codeSamples"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Code Samples <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
  <p>coming soon</p>
 </div>
</section>
<section aria-labelledby="mediaElements">
 <div class="section-heading" id="mediaElements">
  <!-- 	 <a href="#mediaElements"><i class="fa fa-link" aria-hidden="true"></i></a> -->
  Media Elements <button class="button button-light button-tiny js-button-toggle">Show/Hide</button></div>
 <div class="section-content">
	 <div class="section-heading-sub"></div>
  <p>coming soon</p>
 </div>
</section>
<!-- <section>
	<div class="section-heading">Coming Soon</div>
	<div class="section-content">
		<dl>
			<dt>Feature</dt>
			<dd><var>@names</var></dd>
			<dt>Important Information</dt>
			<dd>First of all, the feature itself is not that hard to explain in terms of an existing feature (`attrs.foo`), but a lot of people don't really know about that feature.

				A better way to understand <kbd>`@names`</kbd> is the "component is a function" mental model of Ember components. I talked about this a bunch over here: https://github.com/emberjs/rfcs/pull/276#issuecomment-351177539

That particular aspect of Ember components is probably the right way to update the docs, but there's more than one feature coming down the pike that makes it easier to document.

Finally, one confounding factor is that the existing semantics has this mutable cell stuff, and we decided to basically not do that for `@names`.</dd>
			<dt>Who would care about this?</dt>
			<dd>people who know and have gotten comfortable with attrs.foo and @names</dd>
			<dd>people who want a shorter and clearer syntax for referring to arguments passed to components</dd>
			<dd>people who want a better mental model of what Ember components actually are</dd>
		</dl>
	</div>
	
</section> -->
<footer>
 <section>
  <p>This is a work in progress. As such, you may need to occasionally refresh the page if you are viewing it in "full" mode. </p>
 </section>
</footer>
            
          
!
            
              /* Colors */
$orange: #e04e39;
$orange-darker: darken($orange, 10);
$orange-darkest: darken($orange, 20);
$orange-lighter: lighten($orange, 10);
$orange-lightest: lighten($orange, 40);
$blue: #1e719b; //used for tiny accents like the "job board" graphic
$blue-lighter: #74b0ce;
// $blue-lightest: lighten($blue, 45%);
$black: #212121;
$gray: #4d4d4d;
$gray-lighter: #999999;
$gray-lightest: #eeeeee;
$gray-darker: darken($gray, 10%);
$gray-darkest: darken($gray, 15%);
$white: #fdfdfd;
$linen: #f9e7e4; //white-darkest? but I think this is the same as brown-lightest aka "tan"
//status colors
$red: #D50000;
$yellow: #a86500; //this passes color contrast checks
$green: green; //#008000

$brown: #865931;
$brown-lighter: #b67d47;
$tan: #fffdf9; //brown-lightest
$creme: #fffbf5; //white-darker?

*,
*:after {
	box-sizing: border-box;
}
html {
	font-family: "Roboto", Helvetica, sans-serif;
	font-weight: normal;
}

body {
	background-color: $white;
	color: $black;
	font-size: 18px;
	line-height: 1.5;
}

a {
	color: $orange-darker;
	text-decoration: none;
	&:hover, :focus {
		text-decoration: underline;
		color: $orange-darkest;
		@supports (text-decoration-skip: ink) {
			border-bottom: 0;
			text-decoration: 1px solid $orange-darkest;
			text-decoration-skip: ink;
		}
	}
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-weight: bold;

	code {
		text-transform: none;
	}
}

h1,
h2,
h3,
h4 {
	line-height: 1;
	margin-top: 1.25em;
	margin-bottom: 0.5em;
	font-weight: 500;
}

h1 {
	color: $gray-darkest;
	font-size: 2.441em;
	letter-spacing: none; //apple.
	line-height: 1.125;
	max-width: 100%;
	&.dark {
		color: $gray-darkest;
	}
}

h2 {
	color: $orange-darkest;
	font-size: 1.953em;
	letter-spacing: none; //apple
	margin: 1.341em 0 0.2em 0;
}

h3 {
  color: $gray-darkest;
  font-size: 1.563em;
}

h4 {
	color: #222;
	font-size: 1.333em;
	letter-spacing: 1px;
	line-height: 1.618em;
	margin: 24px 0 12px 0;
}
ul,
ol {
	max-width: 100%;
	font-size: 1.125em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
p {
	margin: 1em 0;
	max-width: 100%;
	font-size: 1.125em;
}
.text-error {
	color: $red;
}
.text-warning {
	color: $yellow;
}
.text-info {
	color: $blue;
}
.text-success {
	color: $green;
}
.cta {
	align-items: center;
	color: $orange-darkest;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	min-width: 100px;
	margin: auto;
	max-width: 95%;
	@media screen and (min-width: 992px){
		max-width: 80%;
	}
	&.cta-background {
		background-color: $orange-lightest;
		border-radius: 2px;
		padding: 12px 24px;
	}
	.cta-message {
		background-color: $orange-lightest;
		border-radius: 2px;
		display: inline-block;
		font-size: 1.3em;
		line-height: 1.2;
		min-width: auto;
		margin: auto;		
	}
	button {
		min-width: 100%;
		@media screen and (min-width:768px) {
			min-width: 150px;
		}
	}
	.cta-note {
		align-content: stretch;
		align-items: stretch;
		background-color: $orange-lightest;
		border-left: 4px solid $orange-darker;
		border-radius: 2px;
		color: $black;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		padding: 12px 24px;
		@media screen and (min-width:768px) {
			width: 80%;
		}
		.cta-note-body {
			font-size: 1em;
			line-height: 1.5;
			margin: 0;
			padding: 0 1em 0 0;
			width:95%;
			@media screen and (min-width:772px) {
				width: 85%;
			}
			.cta-note-heading {
				color: $orange-darkest;
				font-size: 1.3em;
				font-style: italic;
				font-weight: bold;
				line-height: 1.5;
				margin-bottom: 3px;
				min-width: 100%;
			}
		}
		img {
			display: none;
			@media screen and (min-width:768px) {
				display: inline-flex;
				transform: rotate(15deg);
			}
		}
	}
}
.cta-link {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: auto;
	max-width: 95%;
	min-width: 100%;
	padding: 1.25em;
	text-align: center;
	@media screen and (min-width: 768px) {
		max-width: 85%;
	}
	a {
		padding: 1em;
	}
}
.button {
	border-radius: 3px;
	font-family: "Roboto";
	font-size: 1.2em;
	font-weight: 500;
	height: 54px;
	letter-spacing: 1px;
	margin: 9px 0.2em; //idk if forever.
	min-width: 96px; //this way the button will fit whatever the contents really are
	padding: 0 24px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.4s ease 0s;
	&.button-block {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin: 9px auto;
	}
	&.button-dense {
		height: 48px;
		font-size: 17px;
	}
	&:hover,
	:focus {
		cursor: pointer;
	}
	&.button-light {
		background-color: $white;
		border: 3px solid $orange;
		color: $orange-darker;
		&:hover {
			border-color: $orange-darkest;
			color: $orange-darkest;
		}
	}
	&.button-dark {
		background-color: $orange-darker;
		border: 3px solid transparent;
		color: $white;
		font-weight: 400;
		&:hover,
		:focus {
			background-color: $orange-darkest;
			color: $white;
			cursor: pointer;
		}
	}
	&.disabled {
		border-color: $gray-lighter !important;
		color: $gray-lighter !important;
		background-color: $gray-lightest;
		&:hover,
		:focus {
			cursor: not-allowed;
			border-color: $gray-lighter;
			color: $gray-lighter;
			background-color: $gray-lightest;
		}
	}
	&.button-link {
		border-color: transparent;
		background-color: transparent;
		color: $orange-darker;
		margin: 9px 12px;
		padding: 0 12px;
	}
}
.post-title {
	margin-bottom: 0.1em;
	margin-top: 0.2em;
	letter-spacing: none; //apple
	font-weight: normal; //apple
	.post-date {
		color: $gray;
		display: block;
		font-size: 0.6em;
		padding-top: 0.2em;
		@media screen and (min-width: 768px) {
			display: inline-block;
			padding-top: 0;
		}
	}
}
.post-tag {
	clear: both;
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	line-height: 1;
	&.syndicated {
		color: $blue;
	}
	&.guest {
		color: $gray;
	}
}
.post-author {
	color: $gray;
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
}
.accordion-group {
	border-radius: 2px;
	border: 1px solid $gray-lighter;
	border-bottom: none; //stay last
	.accordion {
		display: flex;
		flex-flow: row wrap;
		flex: 1;
		min-width: 100%;
		.accordion-heading {
			align-items: center;
			background-color: $white;
			border-bottom: 1px solid $gray-lighter;
			display: flex;
			flex-flow: row wrap;
			flex: 1;
			height: 54px;
			min-width: 100%;
			padding: 0 10px;
			@media screen and (min-width: 768px) {
				padding: 0 36px;
			}
			&:last-of-type {
				border-bottom-color: transparent;
			}
			&:hover {
				background-color: $gray-lightest;
			}
			&.active {
				background-color: $gray-lightest;
			}
			.content {
				background-color: transparent;
				color: $black;
				flex-flow: row wrap;
				flex: 1;
				font-weight: 400;
				padding-right: 24px;
				&:first-of-type {
					font-size: 1em;
					font-weight: 500;
				}
				.content-sub {
					font-weight: 500;
				}
			}
			.button-icon {
				background-color: transparent;
				border-color: transparent;
				color: $gray;
				height: 36px;
				width: 36px;
				&:hover {
					cursor: pointer;
				}
			}
		}
		.accordion-body {
			display: flex;
			min-width: 100%;
			flex-flow: row wrap;
			flex: 1;
			padding: 0 10px 1em 10px;
			border-bottom: 1px solid $gray-lighter;
			@media screen and (min-width:768px) {
				padding: 0 36px 1em 36px;
			}
			.accordion-content{
				flex: 1;
				&:first-of-type {
					&:not(:last-of-type) {
						padding-right: 0.5em;
					}
				}
				&:last-of-type {
					min-width: 100%;
					@media screen and (min-width: 768px) {
						min-width: 20%;
						max-width: 25%;
						padding-left: 1em;
					}
				}
				.content-title {
					font-size: 1.2em;
					color: $black;
					font-weight: 500;
					line-height: 1;
					margin-top: 1em;
				}
				.content-list {
					margin: 0;
					padding: 0;
					list-style: none;
					li {
						padding: 5px 0 0;
						margin: 0;
						a {
							align-items: center;
							display: flex;
							img {
								background-color: $gray-lightest;
								border-radius: 50%;
								display: inline-block;
								height: 30px;
								width: 30px;
								margin-right: 2px;
							}
						}
					}
				}
			}
		}
		.accordion-footer {} //don't need it yet
	}
}
.icon-letter {
	align-items: center;
	background-color: $orange-lightest;
	border-radius:2px;
	border: 1px solid $orange-darkest;
	color: $orange-darkest;
	display: inline-flex;
	font-size: 1.25em;
	height: 1.25em;
	justify-content: center;
	line-height: 1.25;
	padding: 2px 1px 0 1px;
	text-transform: uppercase;
	width: 1.25em;
	&:hover {
		cursor: default;
	}
}
.icon-symbol {
	background-color: $orange;
	border-radius: 2px;
	border: 1px solid $orange-darker;
	color: white;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.25;
	max-height: 1.25em;
	max-width: 1.25em;
	min-height: 1.25em;
	min-width: 1.25em;
	padding: 0 6px;
	
}

//for demo page layout
section {
	padding: 1em 0 2em 0;
	display: block;
	margin: 0 auto;
	max-width: 100%;
	overflow-x: auto;
	@media screen and (min-width: 768px) {
		max-width: 85%;
	}
	&:last-of-type {
		margin-bottom: 3em;
	}
	.section-heading {
		font-size: 2.7em;
		line-height: 1;
		border-bottom: 1px solid lightgray;
		min-width: 100%;
		margin-bottom: 10px;
		&-sub {
			font-size: 2em;
			border-bottom: none;
			margin-top: 10px;
			&:not(:first-of-type){
				margin-top: 1.5em;
			}
		}
	}
	article {
		display: block;
		margin: 0 auto;
		width: 100%;
		.article-heading {
			font-size: 1em;
			margin-bottom: 0;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
			&:after {
				content: ":"
			}
			+ p {
				margin-top: 0;
			}
		}
		hr {
			margin: 2em auto;
			width: 50%;
		}
	}
	h1,
	h2,
	h3,
	h4,
	p {
		flex: 1;
		min-width: 100%;
	}
	.flex-wrapper {
		display: flex;
		flex-flow: row wrap;
		align-content: flex-start;
		.panel {
			border: 1px solid $black;
			flex: 1 1 1;
			margin: 0.2em;
			.panel-body {
				.box {
					height: 150px;
					min-width: 175px;
					&.orange {
						background-color: $orange;
					}
					&.orange-darker {
						background-color: $orange-darker;
					}
					&.orange-darkest {
						background-color: $orange-darkest;
					}
					&.blue {
						background-color: $blue;
					}
					&.blue-lighter {
						background-color: $blue-lighter;
					}
					&.brown {
						background-color: $brown;
					}
					&.brown-lighter {
						background-color: $brown-lighter;
					}
					&.brown-lightest {
						background-color: $tan;
					}
					&.black {
						background-color: $black;
					}
					&.gray {
						background-color: $gray;
					}
					&.gray-lighter {
						background-color: $gray-lighter;
					}
					&.gray-lightest {
						background-color: $gray-lightest;
					}
					&.white {
						background-color: $white;
					}
					&.white-darker {
						background-color: $linen;
					}
					&.white-darkest {
						background-color: $creme;
					}
				}
			}
			.panel-footer {
				text-align: center;
				border-top: 1px solid $black;
			}
		}
	}
	.button {
		margin-left: 5px;
		margin-right: 5px;
	}
	pre {
		background-color: #eeeeee;
		border-radius: 4px;
		border: 1px solid dimgray;
		box-sizing: border-box;
		padding: 1em;
		white-space: pre-wrap;
		margin: 0.5em 0;
		overflow: auto;
		code {
		}
	}
}
footer {
	display: flex;
	flex-flow: row wrap;
	background-color: $linen;
}
.mobile {
	display: block;
	margin: 0 auto;
	max-width: 500px;
	width: 100%;
	&:after {
		box-sizing: border-box;
	}
}
.button-tiny {
	display: inline-block;
	font-size: 14px;
	height: 30px;
	line-height: 26px;
	vertical-align: middle;
}
.hide {
	display: none;
}

.lead {
	font-size: 1.3em;
}
.viewport-sm {
	width: 100%;
	max-width: 600px;
}
.viewport-md {
	width: 100%;
}
            
          
!
            
              $(document).ready(function(){
		$(".accordion-heading").click(function(){
			$(this).toggleClass('active');
			$(this).next(".accordion-body").toggle();
		});
		$("button.js-button-toggle").click(function(){
			$(this).parent().next(".section-content").toggleClass('hide');
		});	
});
            
          
!
999px
Loading ..................

Console