- in development / beta - user assumes risk -
Content in a Block
Row - 3 Column - Block
<![CDATA[
<div class="row">
<div class="col w33 tblW50 mblW100">
<div class="blk">
block 1
</div>
</div>
<div class="col w33 tblW50 mblW100">
<div class="blk">
block 2
</div>
</div>
<div class="col w33 tblW100 mblW100">
<div class="blk">
block 3
</div>
</div>
</div>
]]>
Row - 4 Column - Block
<![CDATA[
<div class="row">
<div class="col w25 tblW50 mblW100">
<div class="blk">
block 1
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="blk">
block 2
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="blk">
block 3
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="blk">
block 4
</div>
</div>
</div>
]]>
Content in a Box
Row - 3 Column - Box
<![CDATA[
<div class="row">
<div class="col w33 tblW50 mblW100">
<div class="box">
box 1
</div>
</div>
<div class="col w33 tblW50 mblW100">
<div class="box">
box 2
</div>
</div>
<div class="col w33 tblW100 mblW100">
<div class="box">
box 3
</div>
</div>
</div>
]]>
Row - 4 Column - Box
<![CDATA[
<div class="row">
<div class="col w25 tblW50 mblW100">
<div class="box">
box 1
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="box">
box 2
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="box">
box 3
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="box">
box 4
</div>
</div>
</div>
]]>
Content in a Mat
Row - 3 Column - Mat
<![CDATA[
<div class="row">
<div class="col w33 tblW50 mblW100">
<div class="mat">
mat 1
</div>
</div>
<div class="col w33 tblW50 mblW100">
<div class="mat">
mat 2
</div>
</div>
<div class="col w33 tblW100 mblW100">
<div class="mat">
mat 3
</div>
</div>
</div>
]]>
Row - 4 Column - Mat
<![CDATA[
<div class="row">
<div class="col w25 tblW50 mblW100">
<div class="mat">
mat 1
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="mat">
mat 2
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="mat">
mat 3
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="mat">
mat 4
</div>
</div>
</div>
]]>
Content in a Panel
Row - 3 Column - Panel
<![CDATA[
<div class="row">
<div class="col w33 tblW50 mblW100">
<div class="pnl">
panel 1
</div>
</div>
<div class="col w33 tblW50 mblW100">
<div class="pnl">
panel 2
</div>
</div>
<div class="col w33 tblW100 mblW100">
<div class="pnl">
panel 3
</div>
</div>
</div>
]]>
Row - 4 Column - Panel
<![CDATA[
<div class="row">
<div class="col w25 tblW50 mblW100">
<div class="pnl">
panel 1
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="pnl">
panel 2
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="pnl">
panel 3
</div>
</div>
<div class="col w25 tblW50 mblW100">
<div class="pnl">
panel 4
</div>
</div>
</div>
]]>
Content in Table
Table (responsive)
<![CDATA[
<div class="row">
<table>
<thead>
<tr>
<th>Id#</th>
<th>First</th>
<th>Last</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr class="hvr9">
<th>100</th>
<td>Mike</td>
<td>Carson</td>
<td>Blue</td>
</tr>
<tr>
<th>200</th>
<td>Bren</td>
<td>Carson</td>
<td>Teal</td>
</tr>
<tr>
<th>300</th>
<td>Joel</td>
<td>Carson</td>
<td>Black</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<button>save</button>
</td>
</tr>
</tfoot>
</table>
</div>
]]>
Navigation
<![CDATA[
<!-- mobile nav add between body and page element -->
<nav>
<div id="NavMobile">
<div id="NavMobileRow">
<a class="btn" href="#NavMobileMenu">
<span class="icon3Bar"></span>
</a>
<p>menu</p>
<ul id="NavMobileMenu" class="nav">
<!-- Html.Partial("_Partial_NavListItems") uncomment this after creating the partial view " _Partial_NavListItems " -->
<li class=" "><a href="#">close menu</a></li>
</ul>
</div>
</div>
</nav>
<!-- main nav -->
<nav>
<div id="NavMain">
<ul class=" nav tab style4">
<!-- Html.Partial("_Partial_NavListItems") uncomment this after creating the partial view " _Partial_NavListItems " -->
</ul>
</div>
</nav>
<!-- list item partial -->
<li class="trans0300 "><a href="/">Home</a></li>
<li class="trans0300 "><a href="/Home/Scaffold">Scaffold</a></li>
<li class="trans0300 "><a href="/Home/Content">Content</a></li>
<li class="trans0300 "><a href="/Home/Style">Style</a></li>
<li class="trans0300 "><a href="/Home/Library">Library</a></li>
]]>
Form Email Sender
Webconfig Setup
<![CDATA[
<!-- Begin Mail Settings -->
<add key="RequestRecipientEmail" value="RecipientOfContactRequest@Domain.com" />
<add key="SubscriptionARecipientEmail" value="RecipientOfSubscriptionRequest@Domain.com" />
<add key="CompanyUrl" value="http://CompanyDomain.com" />
<add key="CompanyName" value="CompanyName" />
<add key="CompanyReplyToEmail" value="CompanyReplyToEmail@CompanyDomain.com" />
<add key="TestEmail" value="TestEmail_IfNotNullWillOverrideEverything@Domain.com" />
<add key="TestHost" value="smtp.live.com" />
<add key="TestPort" value="587" /> <!-- 25 467 587 -->
<add key="TestUserName" value="TestEmailAccountUserName@Domain.com" />
<add key="TestPassword" value="TestEmailAccountPasswordHere" />
<add key="TestEnableSsl" value="true" />
</appSettings>
<system.net>
<mailSettings>
<smtp from="SendingEmailAccount@Domain.com">
<network host="smtp.live.com"
port="587"
userName="SendingEmailAccount@Domain.com"
password="SendingEmailAccountPasswordHere"
enableSsl="true" />
</smtp>
</mailSettings>
</system.net>
<!-- /End Mail Settings -->
]]>
Equal Element Height Script
<![CDATA[
Add this script only to the page bottom that needs it.
<script type="text/javascript">
function setHeight() {
var maxHeight = -1;
var elems = document.getElementsByClassName("eqlHght");
window.onresize(elems.innerText = elems.innerText);
var elemsGroup = elems[1].offsetTo
for (var l = 0; l < elems.length; l++) {
maxHeight = maxHeight >= elems[l].offsetHeight ? maxHeight : elems[l].offsetHeight;
var positionTop = elems.offsetTop;
}
for (var i = 0; i < elems.length; i++) {
elems[i].style.height = maxHeight + "px";
elems[i].parentNode.style.height = maxHeight + "px";
}
}
document.ready(setHeight());
</script>
Add this only to the layout body tag.
<body onresize=" window.location.href = window.location.href ">
]]>
