tylertate / semantic.gs

The Semantic CSS Grid
tylertate.github.io/semantic.gs/
Apache License 2.0
1.59k stars 245 forks source link

Mixed and vertical layouts #76

Open ghost opened 12 years ago

ghost commented 12 years ago

Are there any plans to introduce mixed vertical and horizontal layouts, i.e.: fixed nav-fluid content-fixed banners or fixed header-fluid items-fixed footer

Here's my shot at it in LESS:

.hxfx-123 ( @leftWidth, @rightWidth, @leftGutter: 0px, @rightGutter: 0px, @centerHasPadding: 0px) { padding-left: @leftWidth + @leftGutter; padding-right: @rightWidth + @rightGutter + 2 * @centerHasPadding; .lc { width: @leftWidth; margin-left: -@leftWidth - @leftGutter; float: left; } .cc { width: 100%; float: left; } .rc { width: @rightWidth; margin-right: -@rightWidth - @rightGutter - 2 * @centerHasPadding; float: right; } }

.vxfx-123 ( @firstHeight, @thirdHeight, @secondOverflow: hidden) { position: relative; .fr { height: @firstHeight; } .sr { position: absolute; top: @firstHeight; bottom: @thirdHeight; left: 0; right: 0; overflow: @secondOverflow; } .tr { height: @thirdHeight; position: absolute; bottom: 0; left: 0; right: 0; } }