- in development / beta - user assumes risk -

Html Code Snippets


Content in a Block

Row - 3 Column - Block

<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

<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

<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

<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

<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

<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

<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

<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)

<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

<!-- 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

<!-- 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

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 ">
Scaffolding
Content Containers