I discovered Semantic UI a while ago and I was impressed, so I decided to learn it by migrating an existing project I did using another framework (Zurb Foundation). But, I think I started with the wrong project, because it’s a desktop-like application that takes all the space of the browser and has these separate parts:
- Top navigation bar
- Main content area, separated into 2 independent areas:
- Left sidebar
- Main screen. Both areas are independently scrollable
- Footer. It’s collapsable. When it’s on the screen, it shrinks the main content area, so never there are hidden elements below it.
I created this layout using Foundation’s XY Grid that allows to use both horizontal and vertical fluid “cells” so you can take up all the free space in both directions making it ideal for single page apps. The layout markup looks like:
<div class="grid-y medium-grid-frame"> <div class="cell shrink header medium-cell-block-container"> <!-- NAVIGATION BAR --> </div> <div class="cell medium-auto medium-cell-block-container"> <div class="grid-x grid-padding-x"> <div class="cell medium-4 medium-cell-block-y"> <!-- SIDEBAR --> </div> <div class="cell medium-8 medium-cell-block-y"> <!-- MAIN CONTENT --> </div> </div> </div> <div class="cell shrink footer"> <!-- FOOTER --> </div> </div>
I’ve been investigating Semantic’s grid system and it’s perfect for defining responsive columns, but I see nothing for responsive rows…
Is it possible to create such a layout with it? Thanks!