Some of you already know how amazing SubtractJS 1.0 is, but now I have something else to add to it. With SubtractJS 1.0.1, you can add an additional class "sj-margin-box-model" to make it easy to set up percentage-based sections.
For example, here is a box split into 4 row of 25 percent each, with margins and borders.
<style>
.fourRow{
height: 25%;
border: 1px solid black;
margin: 2px;
padding: 2px;
}
</style>
<div style="background: #CCCCCC; height: 100px; position: relative; width: 200px;">
<div class="sj-fill-top sj-margin-box-model fourRow"></div>
<div class="sj-fill-top sj-margin-box-model fourRow"></div>
<div class="sj-fill-top sj-margin-box-model fourRow"></div>
<div class="sj-fill-top sj-margin-box-model fourRow"></div>
</div>
<style>
.fiveCol{
width: 20%;
border: 1px solid black;
margin: 2px;
padding: 2px;
}
</style>
<div style="background: #CCCCCC; height: 100px; position: relative; width: 200px;">
<div class="sj-fill-left sj-margin-box-model fiveCol"></div>
<div class="sj-fill-left sj-margin-box-model fiveCol"></div>
<div class="sj-fill-left sj-margin-box-model fiveCol"></div>
<div class="sj-fill-left sj-margin-box-model fiveCol"></div>
<div class="sj-fill-left sj-margin-box-model fiveCol"></div>
</div>
Get the update via NuGet or download it from CodePlex at (Link Unavailable)