Tiggles ツ of Speak Creative
1/2/2020 - 8:56 PM
Site Style Guide Template
Template for site style guide using Matrix for site personalization.
Example: http://tmumc2019.sitewrench.com/style-guide http://cloud.madebyspeak.com/55ba21 (fields)
<div class="flex flex-row-ns flex-column flex-wrap w-100 center relative ph4 ph0-l">
<div class="w-100 pt4 ph4 mw9 center">
<ul class="list ma0 pa0 flex flex-row flex-wrap justify-center tc">
<li><a class="dib mh3 bb bw1 b--blue" href="#headings">Headings</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#paragraph">Text</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#buttons">Buttons</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#icons">Icons</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#colors">Colors</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#tables">Tables</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#grid">Grid</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#padding">Padding</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#responsive">Responsive</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#howtouse">How to Use</a></li>
<li><a class="dib mh3 bb bw1 b--blue" href="#layouts">Example Layouts</a></li>
</ul>
</div>
<div class="w-100 mw9 pa4 center">
<!-- Images Sizing -->
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100" ><strong>Image Sizing</strong></figure>
<div class="w-100 pa4">
{{ Module.FieldValues.BannerImageCopy }}
<p><img src="http://via.placeholder.com/{{Module.FieldValues.BannerImageSize}}"></p>
</div>
</div>
<!-- Header 1-6 Styling -->
<div id="headings" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header One Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h1>Header One Tag</h1></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h1>Heading One</h1>
<p>This is a test paragraph. To <a href="#">add some</a> length to it, let us mention that this page was primarily written for testing the <u>effect of user</u> style sheets. You can use it for various <b>other purposes</b> as well, like <em>just checking</em> how your browser displays various HTML elements.</p>
</div>
</div>
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header Two Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h2>Header Two Tag</h2></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h2>Heading Two</h2>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
</div>
</div>
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header Three Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h3>Header Three Tag</h3></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h3>Heading Three</h3>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
</div>
</div>
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header Four Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h4>Header Four Tag</h4></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h4>Heading Four</h4>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
</div>
</div>
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header Five Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h5>Header Five Tag</h5></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h5>Heading Five</h5>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
</div>
</div>
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Header Six Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><h6>Header Six Tag</h6></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<h6>Heading Six</h6>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
</div>
</div>
<!-- Paragraph Styling -->
<div id="paragraph" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Paragraph Styling</strong></figure>
<div class="w-30-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><p>Paragraph Tag</p></code>
</div>
<div class="w-70-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
<p>This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of <strong>user style sheets</strong>. You can use it for various <em>other</em> purposes as well, like just checking how your browser displays various <u>HTML elements</u>.</p>
</div>
</div>
<!-- Paragraph Additional Styling -->
<div class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Additional Text Styling</strong></figure>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<p><code><strong>Bold Text</strong></code><br />
<code><u>Underline Text</u></code><br />
<code><em>Italic Text</em></code></p>
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<p><strong>Bold Text</strong><br />
<u>Underline Text</u><br />
<em>Italic Text</em></p>
</div>
</div>
<!-- Button Styles -->
<div id="buttons" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Button Styles</strong></figure>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
{{Module.FieldValues.ButtonEscapeHtmlCode}}
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
{{Module.FieldValues.ButtonOutputsAs}}
</div>
</div>
<!-- Icon System -->
<div id="icons" class="flex flex-row flex-wrap">
<figure class="highlight w-100" ><strong>Icon System</strong></figure>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><i class="fa fa-search"></i></code>
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<i class="fa fa-search"></i>
</div>
<div class="w-100 pa4 flex flex-row flex-wrap tc">
<p>Font Awesome version 4.7 is available sitewide, and a list of the icons can be viewed on their site <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">HERE</a>.</p>
</div>
</div>
<!-- Color System -->
<div id="colors" class="flex flex-row flex-wrap">
<figure class="highlight w-100" ><strong>Brand Colors</strong></figure>
<div class="w-100 ph4 pt4">
<div class="w-100 gray db b f4 sans-serif mb4 tl">AVAILABLE COLORS</div>
{{ Module.FieldValues.AvailableColors }}
</div>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">COLOR USAGE IN TEXT</span>
{{ Module.FieldValues.ColorUsageInText }}
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">COLOR USAGE IN DIVS</span>
{{ Module.FieldValues.ColorUsageInDivs }}
</div>
</div>
<!-- Tables -->
<div id="tables" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Tables</strong></figure>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code>
<table class="table responsive">...</table>
</code>
<br/> <br/>
<p><strong>For more examples of table styling available on this site, <a href="https://getbootstrap.com/docs/4.0/content/tables/#examples" target="_blank">View Bootstrap Tables</a></strong></p>
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
{% if Module.FieldValues.ResponsiveTableGif != "" %}
<img src="{{Module.FieldValues.ResponsiveTableGif}}" alt="Responsive Table Example" />
{% else %}
<img src="/sitefiles/2542/css/images/styleguide_responsive-table.gif" alt="Responsive Table Example" />
{% endif %}
</div>
</div>
<!-- Grid System -->
<div id="grid" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Grid System</strong></figure>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code>
<div class="w-30">...</div><br />
<div class="w-70">...</div><br />
<div class="w-100">...</div><br />
</code>
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OUTPUT</span>
<div class="flex flex-row flex-wrap">
<div class="w-30 bg-near-white ba bw1 b--moon-gray pa3"></div>
<div class="w-70 bg-near-white ba bw1 b--moon-gray pa3"></div>
<div class="w-100 bg-near-white ba bw1 b--moon-gray pa3"></div>
</div>
</div>
<div class="w-100 pa4 flex flex-row flex-wrap tc">
<div class="w-100"><span class="gray db b f4 sans-serif mb4 tl">FULL GRID</span></div>
<div class="flex flex-row show-grid w-100">
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
<div class="w-10">w-10</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-20">w-20</div>
<div class="w-20">w-20</div>
<div class="w-20">w-20</div>
<div class="w-20">w-20</div>
<div class="w-20">w-20</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-third">w-third</div>
<div class="w-third">w-third</div>
<div class="w-third">w-third</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-third">w-third</div>
<div class="w-two-thirds">w-two-thirds</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-10">w-10</div>
<div class="w-90">w-90</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-20">w-20</div>
<div class="w-80">w-80</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-25">w-25</div>
<div class="w-75">w-75</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-30">w-30</div>
<div class="w-70">w-70</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-40">w-40</div>
<div class="w-60">w-60</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-50">w-50</div>
<div class="w-50">w-50</div>
</div>
<div class="flex flex-row show-grid w-100">
<div class="w-100">w-100</div>
</div>
</div>
</div>
<!-- Padding System -->
<div id="padding" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Padding System</strong></figure>
<div class="w-100 pa4 bb bw1 b--light-gray flex">
<div class="w-50 pa2">
<span class="dark-burgundy db b f4 sans-serif mb2">PADDING ALL</span>
<p>These show uniform padding <strong>around</strong> the content.
<br/><strong>Definition:</strong> pa[ ] = padding all [amount of padding]</p>
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><div class="pa1">[Content Here]</div></code><br/>
<code><div class="pa2">[Content Here]</div></code><br/>
<code><div class="pa3">[Content Here]</div></code><br/>
<code><div class="pa4">[Content Here]</div></code><br/>
<code><div class="pa5">[Content Here]</div></code><br/>
</div>
<div class="w-50 pa2">
<span class="gray db b f4 sans-serif mv4">OUTPUT</span>
<div class="w-100">
<div class="fl"><div class="pa1 ba bw1 b--moon-gray bg-near-white">pa1</div></div>
<div class="fl"><div class="pa2 ba bw1 b--moon-gray bg-near-white">pa2</div></div>
<div class="fl"><div class="pa3 ba bw1 b--moon-gray bg-near-white">pa3</div></div>
<div class="fl"><div class="pa4 ba bw1 b--moon-gray bg-near-white">pa4</div></div>
<div class="fl"><div class="pa5 ba bw1 b--moon-gray bg-near-white">pa5</div></div>
</div>
</div>
</div>
<div class="w-50 pa4 br bw1 b--light-gray">
<span class="dark-burgundy db b f4 sans-serif mb2">PADDING VERTICAL</span>
<p>These show vertical padding <strong>above and below</strong> the content.<br/>
<strong>Definition:</strong> pv[ ] = padding vertical [amount of padding]</p>
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><div class="pv1">[Content Here]</div></code><br/>
<code><div class="pv2">[Content Here]</div></code><br/>
<code><div class="pv3">[Content Here]</div></code><br/>
<code><div class="pv4">[Content Here]</div></code><br/>
<code><div class="pv5">[Content Here]</div></code><br/>
<span class="gray db b f4 sans-serif mv4">OUTPUT</span>
<div class="w-100">
<div class="fl"><div class="pv1 ba bw1 b--moon-gray bg-near-white">pv1</div></div>
<div class="fl"><div class="pv2 ba bw1 b--moon-gray bg-near-white">pv2</div></div>
<div class="fl"><div class="pv3 ba bw1 b--moon-gray bg-near-white">pv3</div></div>
<div class="fl"><div class="pv4 ba bw1 b--moon-gray bg-near-white">pv4</div></div>
<div class="fl"><div class="pv5 ba bw1 b--moon-gray bg-near-white">pv5</div></div>
</div>
</div>
<div class="w-50 pa4">
<span class="dark-burgundy db b f4 sans-serif mb2">PADDING HORIZONTAL</span>
<p>These show horizontal padding to the <strong>left and right</strong> of the content.<br/>
<strong>Definition:</strong> ph[ ] = padding horizontal [amount of padding]</p>
<span class="gray db b f4 sans-serif mb4">HTML CODE</span>
<code><div class="ph1">[Content Here]</div></code><br/>
<code><div class="ph2">[Content Here]</div></code><br/>
<code><div class="ph3">[Content Here]</div></code><br/>
<code><div class="ph4">[Content Here]</div></code><br/>
<code><div class="ph5">[Content Here]</div></code><br/>
<span class="gray db b f4 sans-serif mv4">OUTPUT</span>
<div class="w-100">
<div class="fl"><div class="ph1 ba bw1 b--moon-gray bg-near-white">ph1</div></div>
<div class="fl"><div class="ph2 ba bw1 b--moon-gray bg-near-white">ph2</div></div>
<div class="fl"><div class="ph3 ba bw1 b--moon-gray bg-near-white">ph3</div></div>
<div class="fl"><div class="ph4 ba bw1 b--moon-gray bg-near-white">ph4</div></div>
<div class="fl"><div class="ph5 ba bw1 b--moon-gray bg-near-white">ph5</div></div>
</div>
</div>
<div class="w-100 pa4 bt bw1 b--light-gray">
<span class="dark-burgundy db b f4 sans-serif mb2">ADDITIONAL PADDING LOCATIONS</span>
<p>These show the top, right, bottom, left padding options. The different padding scales shown above also apply to these.</p>
<div class="w-100 flex">
<div class="w-50 ph4">
<p><strong>Definitions:</strong><br/>
pt[ ] = padding top [amount of padding]<br/>
pr[ ] = padding right [amount of padding]<br/>
pb[ ] = padding bottom [amount of padding]<br/>
pl[ ] = padding left [amount of padding]</p>
</div>
<div class="w-50 ph4">
<span class="gray db b f4 sans-serif mv4">EXAMPLES</span>
<div class="w-100">
<div class="fl"><div class="pt4 ba bw1 b--moon-gray bg-near-white">pt4</div></div>
<div class="fl"><div class="pr4 ba bw1 b--moon-gray bg-near-white">pr4</div></div>
<div class="fl"><div class="pb4 ba bw1 b--moon-gray bg-near-white">pb4</div></div>
<div class="fl"><div class="pl4 ba bw1 b--moon-gray bg-near-white">pl4</div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Responsive -->
<div id="responsive" class="flex flex-row flex-wrap">
<figure class="highlight w-100" ><strong>RESPONSIVE DESIGN</strong></figure>
<div class="w-100 pa4 br bw1 b--light-gray">
<p>Here are the available options to make the <strong>GRID</strong> and <strong>PADDING</strong> responsive to different devices.</p>
<p><strong>Definitions:</strong><br/>
[w-50 or pa4]<strong>-ns</strong> = the settings in the bracket will only apply to NOT-SMALL screens (tablet and desktop size)<br/>
[w-50 or pa4]<strong>-m</strong> = the settings in the bracket will only apply to MEDIUM screens (tablet size)<br/>
[w-50 or pa4]<strong>-l</strong> = the settings in the bracket will only apply to LARGE screens (desktop sizes)</p>
<span class="gray db b f4 sans-serif mb2">HTML CODE</span>
<code><div class="w-third-l w-50-m w-100">[Content Here]</div></code><br/>
<span class="gray db b f4 sans-serif mv4">OUTPUT ON DESKTOP</span>
<div class="flex flex-row flex-wrap w-100 ba bw1 b--moon-gray">
<div class="w-third-l w-50-m w-100 bg-near-white ba bw1 b--light-gray pa4"><strong>w-third-l</strong> w-50-m w-100</div>
</div>
<div class="w-100 flex">
<div class="w-50 pv4">
<span class="gray db b f4 sans-serif mb4">OUTPUT ON MOBILE</span>
<div class="mw5 ba bw1 b--moon-gray">
<div class="w-100 mb7 bg-near-white ba bw1 b--light-gray pa4">w-third-l w-50-m <strong>w-100</strong></div>
</div>
</div>
<div class="w-50 pv4">
<span class="gray db b f4 sans-serif mb4">OUTPUT ON TABLET</span>
<div class="mw7 ba bw1 b--moon-gray">
<div class="w-50 mb7 bg-near-white ba bw1 b--light-gray pa4">w-third-l <strong>w-50-m</strong> w-100</div>
<div class="w-100 mb5 pa4"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Where do I add these classes? -->
<div id="howtouse" class="flex flex-row flex-wrap">
<figure class="highlight w-100"><strong>Page Part Settings</strong></figure>
<div class="w-100 pt4 ph4">
<h3>So where do I add all these classes anyway?</h3>
<p>I'm glad you asked! The grid sizes, padding, and background colors will need to be added to the <code>Class Field</code> for that particular custom content.</p>
</div>
<div class="w-40-ns w-100 pa4 br bw1 b--light-gray">
<span class="gray db b f4 sans-serif mb4">1. CLICK THE GEAR</span>
<img src="/sitefiles/2542/css/images/styleguide-gear.jpg" style="width: 400px;" />
</div>
<div class="w-60-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">2. ADD YOUR CLASSES</span>
<img src="/sitefiles/2542/css/images/styleguide-class.jpg" style="width: 400px;" />
</div>
</div>
<asp:ContentPlaceHolder ID="cphPageBody" runat="server" visible="true"></asp:ContentPlaceHolder>
<div id="layouts" class="flex flex-row flex-wrap">
<figure class="highlight w-100" ><strong>Layout Examples</strong></figure>
<div class="w-50-ns w-100 pa4 br bw1 b--light-gray">
<p>To the right, you will find the overview of your default template.</p>
<p>Below you will find examples of how you can organize the content on your page.</p>
</div>
<div class="w-50-ns w-100 pa4">
<span class="gray db b f4 sans-serif mb4">OVERALL LAYOUT GUIDE</span>
{% if Module.FieldValues.LayoutGuideImage != "" %}
<a href="{{ Module.FieldValues.LayoutGuideImage }}" target="_blank"><img
src="{{Module.FieldValues.LayoutGuideImage}}" style="width: 400px;" /></a>
{% else %}
<a href="/sitefiles/2542/css/images/styleguide_layout.jpg" target="_blank"><img src="/sitefiles/2542/css/images/styleguide_layout.jpg" style="width: 400px;" /></a>
{% endif %}
</div>
</div>
</div>
</div>
<div id="section-one" class="section-one relative w-100 overflow-hidden">
<div class="flex flex-row-ns flex-wrap flex-column w-100 relative">
{% if Module.FieldValues.LayoutRow1 != "" %}
{{Module.FieldValues.LayoutRow1}}
{%else%}
<div class="w-50-ns w-100 templatecontent pa4 bg-khaki">
<h3>Heading Level Three</h3>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
<span class="gray db b f4 sans-serif mb4">CLASSES USED TO CREATE THIS LAYOUT</span>
<code>
<div class="w-50-ns w-100 pa4 bg-khaki">...</div><br />
</code>
</div>
<div class="w-50-ns w-100 templatecontent pa4 bg-blue invert">
<h4>Heading Level Four</h4>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
<span class="gray db b f4 sans-serif mb4">CLASSES USED TO CREATE THIS LAYOUT</span>
<code>
<div class="w-50-ns w-100 pa4 bg-blue invert">...</div><br />
</code>
</div>
{%endif%}
</div>
</div>
<div id="section-two" class="section-three relative w-100 overflow-hidden">
<div class="flex flex-row-ns flex-wrap flex-column w-100 relative">
{% if Module.FieldValues.LayoutRow2 != "" %}
{{Module.FieldValues.LayoutRow2}}
{%else%}
<div class="w-50-ns w-100 templatecontent pa4 ">
<h5>Heading Level Five</h5>
<p>This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.</p>
<span class="gray db b f4 sans-serif mb4">CLASSES USED TO CREATE THIS LAYOUT</span>
<code>
<div class="w-50-ns w-100 pa4">...</div><br />
</code>
</div>
<div class="w-50-ns w-100 pa4 bg-img">
<img src="/sitefiles/2542/css/images/404.jpg" />
<span class="bg-white-80 gray db b f4 sans-serif mb4">CLASSES USED TO CREATE THIS LAYOUT</span>
<code>
<div class="w-50-ns w-100 pa4 bg-img">...</div><br />
</code>
</div>
{% endif %}
</div>
</div>
<%@ Master Language="VB" Inherits="BaseMasterPage"%>
<!DOCTYPE html>
<html lang="en-us" class="no-js">
<head runat="server">
<!-- #include file ="includes/head.inc" -->
</head>
<body class="default styleguide <%= If(New PublicPage().CurrentPage Is Nothing, "", New PublicPage().CurrentPage.Slug) %>">
<form runat="server">
<!--[if lte IE 8]>
<iframe src="http://www.getabetterbrowser.com" style="display:none;" class="get-a-better-browser"></iframe>
<![endif]-->
<asp:contentplaceholder ID="cphSiteBar" runat="server" visible="true"></asp:contentplaceholder>
<div class="page-wrap">
<div class="header-and-main">
<!-- #include file ="includes/header.inc" -->
<main class="main">
<asp:ContentPlaceHolder ID="cphPageBody" runat="server" visible="true"></asp:ContentPlaceHolder>
</main><!-- /.main -->
</div><!-- /.header-and-main -->
<!-- #include file ="includes/footer.inc" -->
</div><!-- /.page-wrap -->
</form>
<!-- Scripts -->
<script src="/SiteFiles/xxxx/js/helper.js"></script>
</body>
</html>
<!--Add Unused Content Place Holders Below This Line -->
<asp:ContentPlaceHolder ID="cphListSignup" runat="server" visible="false"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphSideMenu" runat="server" visible="false"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphLevel2Menu" runat="server" visible="false"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphBreadCrumb" runat="server" visible="false"></asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="cphSiteSearch" runat="server" visible="false"></asp:ContentPlaceHolder>// specific styling
body.styleguide {
.center {
text-align: inherit;
}
figure {
&.highlight {
padding: 8px 11px;
margin: 50px 0 15px 0;
background-color: #f7f7f7;
border: 1px solid #eee;
position: relative;
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
&:before {
content: '';
display: block;
position: absolute;
width: 4px;
left: -4px;
top: -1px;
bottom: -1px;
background: $primary-color;
}
}
}
.row.show-grid {
margin: 0;
}
.show-grid [class^="w-"] {
font-size: 15px;
background: #f4f4f4;
border: 1px solid #ccc;
padding: 1rem;
}
code {
white-space: normal;
}
}
// styles introduced
.invert {
color: white !important;
}
// list all colors in css/brand/_colors.scss
.dark-color {color: #2f2f2f;}
.neutral-color {color: #ebf1f3;}
.neutral-color-dark {color: #c9c9c9;}
.neutral-color-darker {color: #787878;}
.primary-color {color: #e64f07;}
.primary-color-dark {color: darken($primary-color, 10%);}
.primary-color-light {color: #f9d8c8;}
.primary-color-lighter {color: #fdf3ee;}
.primary-color-lightest {color: #fef4ef;}
.secondary-color {color: #6291a2;}
.secondary-color-dark {color: darken($secondary-color, 10%);}
.secondary-color-light {color: #aac4cc;}
.secondary-color-lighter {color: lighten($secondary-color, 20%);}
.secondary-color-lightest {color: lighten($secondary-color, 30%);}
.text-color {color: #555;}
.text-color-light {color: lighten($text-color, 15%);}
.text-color-lighter {color: lighten($text-color, 30%);}
.text-color-lightest {color: lighten($text-color, 45%);}
.text-color-dark {color: darken($text-color, 10%);}
.text-color-darker {color: darken($text-color, 20%);}
.text-color-darkest {color: darken($text-color, 30%);}
// class^= means the class contains with `bg-`
// class*= means the class contains `your-class`
[class*="bg-"] {
&[class*='dark-color'] {background-color: #2f2f2f;}
&[class*='neutral-color'] {background-color: #ebf1f3;}
&[class*='neutral-color-dark'] {background-color: #c9c9c9;}
&[class*='neutral-color-darker'] {background-color: #787878;}
&[class*='primary-color'] {background-color: #e64f07;}
&[class*='primary-color-dark'] {background-color: darken($primary-color, 10%);}
&[class*='primary-color-light'] {background-color: #f9d8c8;}
&[class*='primary-color-lighter'] {background-color: #fdf3ee;}
&[class*='primary-color-lightest'] {background-color: #fef4ef;}
&[class*='secondary-color'] {background-color: #6291a2;}
&[class*='secondary-color-dark'] {background-color: darken($secondary-color, 10%);}
&[class*='secondary-color-light'] {background-color: #aac4cc;}
&[class*='secondary-color-lighter'] {background-color: lighten($secondary-color, 20%);}
&[class*='secondary-color-lightest'] {background-color: lighten($secondary-color, 30%);}
&[class*='text-color'] {background-color: #555;}
&[class*='text-color-light'] {background-color: lighten($text-color, 15%);}
&[class*='text-color-lighter'] {background-color: lighten($text-color, 30%);}
&[class*='text-color-lightest'] {background-color: lighten($text-color, 45%);}
&[class*='text-color-dark'] {background-color: darken($text-color, 10%);}
&[class*='text-color-darker'] {background-color: darken($text-color, 20%);}
&[class*='text-color-darkest'] {background-color: darken($text-color, 30%);}
}
.bg-img {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}