<h2>Split</h2> <h3>Simple split</h3> <ul> <li>Limited to 2 elements</li> </ul> <div class="split --responsive"> <div>a</div> <div>b</div> </div> <h3>Split using table layout</h3> <ul> <li>Unlimited elements</li> <li>You have controll over vertical alignment</li> </ul> <div class="split --table --responsive"> <div>a</div> <div>b</div> <div>c</div> <div>d<br>e<br>f<br></div> </div> <h2>Join</h2> <div class="join --responsive"> <span>Home</span> <span>About</span> <span>Contact</span> </div> <h2>Sample usage</h2> <div class="split --table --responsive"> <div> <a class="logo" href="#">Site name</a> </div> <ul class="nav join --small"> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div>
$spacing-unit: 30px; $breakpoint: 480px; .clearfix, %clearfix { &:after { content: ""; display: table; clear: both; } } // Split object .split { @extend %clearfix; > * { float: left; } > * + * { float: right; } &.\--table { display: table; width: 100%; table-layout:fixed; text-align: center; &:after { content: none; } > * { float: none; display: table-cell; vertical-align: middle; } > :first-child { text-align: left; } > :last-child { text-align: right; } } &.\--responsive { @media screen and (max-width: $breakpoint) { display: block; text-align: center; > * { float: none; display: inline-block; } > * + * { display: block; margin-top: $spacing-unit/2; } > :first-child, > :last-child { text-align: inherit; } } } } // Join object .join { list-style-type: none; > * { display: inline-block; vertical-align: top; } > * + * { margin-left: $spacing-unit; } &.\--middle > * { vertical-align: middle; } &.\--bottom > * { vertical-align: bottom; } &.\--tiny > * + * { margin-left: $spacing-unit/4; } &.\--small > * + * { margin-left: $spacing-unit/2; } &.\--large > * + * { margin-left: $spacing-unit*2; } &.\--force { @extend %clearfix; > * { float: left; } } &.\--responsive { @media screen and (max-width: $breakpoint) { text-align: center; > * { float: none; display: inline-block; } > * + * { display: block; margin-left: 0; margin-top: $spacing-unit/2; } } } } // **************** // Styling // **************** body { font-family: Helvetica, Arial, sans-serif; color: #666; max-width: 720px; margin: 30px auto; border: 1px solid #e5e5e5; padding: 1em; } h2 { margin-top: 0; margin-bottom: 30px; color: #222; border-left: 5px solid #87D37C; padding-left: 15px; & ~ h2 { margin-top: 30px; } } h3 { color: #444; margin: 0 0 15px 0; border-left: 5px solid #ccc; padding-left: 15px; & ~ h3 { margin-top: 30px; } } p, ul { color: #999; line-height: 18px; font-size: 12px; margin-bottom: 30px; font-weight: 300; } ul { list-style-position: inside; padding-left: 20px; } p + ul { margin-top: -20px; } .logo { text-decoration: none; color: #5C97BF; font-size: 24px; font-weight: bold; } .nav { margin: 0; list-style-type: none; a { text-decoration: none; color: #666; &:hover { text-decoration: underline; } } }