Everytime I build a responsive website, I start from my own set of base files whether they're a part of a bigger Umbraco baseline or trimmed right back. This is the default HTML page for that set of files. This is not a complete solution, this is intended as a bloat free starting point for my own projects.
First off, lets get some foundations laid out. This framework uses a 12 column grid system and it's broken into multiple breakpoints. Before you even think "Why no mobile first", it's just a trend, give yourself a slap and consider every breakpoint and user equally. "Mobile first" favours mobile users, don't forget the tablet users, or low end laptop users, or desktop users, or yourself, I bet you're not running 1024x768?
Equivalent | Shortname | Pixel Widths |
---|---|---|
Desktop | 1920px and bigger | |
Laptop | .lap |
1232px to 1025px |
Tablet Large | .tbl |
1024px to 811px |
Tablet Small | .tbs |
810px to 601px |
Mobile Large | .mbl |
600px to 401px |
Mobile Small | .mbs |
400px and smaller |
The markup is pretty simple, each content block is wrapped with a <div class="container">
or <div class="fluidContainer">
.
These two wrappers are very similar; .container
has a max-width of 1180px and steps down in widths until it becomes fuild at "Mobile Large" while .fluidContainer
has a max width 1920px and is fluid all the way down to "Mobile Small".
Each container is then broken down into <div class="row">
's. Each row should then contain columns adding up to 12. The width of each column is defined by its .span#
class. For instance, .span6
would give you a column half the containers width. A column with .span3
would give you a column quarter of the containers width and adding a second .span3
would complete the row.
.span6
.span3
.span3
This all leaves you with the following markup:
<div class="container"> <div class="row"> <div class="column span6"></div> <div class="column span3"></div> <div class="column span3"></div> </div> </div>
To start a new row simply open up another <div class="row"></div>
. This row could be more of a sidebar layout like so:
.span6
.span3
.span3
.span8
.span4
Your HTML should now look something like this:
<div class="container"> <div class="row"> <div class="column span6"></div> <div class="column span3"></div> <div class="column span3"></div> </div> <div class="row"> <div class="column span8"></div> <div class="column span4"></div> </div> </div>
Perhaps you just want some extra whitespace to the side of a column? As the grid works left to right, if you want whitespace on the right, just stop adding columns. If you want to add some whitespace to the left then you just simply need to use an offset class like .offset4
. Combine that with a .span8
and you'll get a sidebarless sidebar:
.span8
.offset4
The HTML very simply looks like this:
<div class="container"> <div class="row"> <div class="column span8 offset4"></div> </div> </div>
Or you could use it to center a narrower column:
.span6
.offset3
Every example in blue above is actually a nested row with columns. This main column is a .span12
within a row
in turn within a .container
, then each example is a new row with its own columns adding up to twelve. An example of this could be: (technically now triple nested)
.span8
.span6
.span3
.span3
.span4
.span6
.span6
Clearly the above examples have bumped padding and background colours for demonstration purposes. The natural output is much subtler and shouldn't end up with any weird double padding etc. The HTML for the above example would look like:
<div class="container"> <div class="row"> <div class="column span8"> <div class="row"> <div class="column span6"></div> <div class="column span3"></div> <div class="column span3"></div> </div> </div> <div class="column span4"> <div class="row"> <div class="column span6"></div> <div class="column span6"></div> </div> </div> </div> </div>
This is where those shortnames from the table above come in. Say I have a narrow sidebar layout such as:
.span6
.span3
That sidebar is going to start getting very tight when you get to tablet devices but the main column is free flowing text so you could balance it a little better. In this case you'd apply .tblSpan8
and .tblSpan4
to each column respectively, better balancing the columns from that point smaller. That leaves you with the overall HTML looking like so:
.span6 & .tblSpan8
.span3 & .tblSpan4
Keep reducing the window/viewport until you see a landscape tablet in the lower left. You'll spot this example then looks different to its otherwise identical one above.
That's pretty much the basics. You can see a bunch of column combinations below. Get playing with it and you'll soon get into the flow of how it works. I'd love to hear if you've found this framework useful and used it in a project. Grab me on rob[at]mohunky.com or on Twitter @mohunky.
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span6 within .span5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.span6 within .span5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.span12 within .span7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.
Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.
Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span2
.span2
.span2
.span2
.span2
.span2
.span3
.span3
.span3
.span3
.span4
.span4
.span4
.span1
.span5
.span5
.span1
.span6
.span6
.span7
.span5
.span5
.span7
.span1
.span2
.span1
.span1
.span7
.span4
.span8
.span3
.span9
.span2
.span10
.span1
.span11
.span12
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span6 within .span5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.span6 within .span5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.span12 within .span7
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Adipiscing vitae proin sagittis nisl. Adipiscing elit duis tristique sollicitudin. Eu ultrices vitae auctor eu augue ut lectus arcu. Tristique risus nec feugiat in fermentum posuere urna. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet cursus sit amet dictum. Morbi tempus iaculis urna id volutpat lacus laoreet. Rhoncus mattis rhoncus urna neque. Elit at imperdiet dui accumsan sit amet. Neque vitae tempus quam pellentesque nec. Volutpat odio facilisis mauris sit amet massa. Tempus egestas sed sed risus. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae.
Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Sit amet venenatis urna cursus eget. Leo vel fringilla est ullamcorper eget nulla. Sagittis vitae et leo duis ut diam quam nulla. Pellentesque dignissim enim sit amet venenatis. Risus in hendrerit gravida rutrum quisque non tellus orci ac. Accumsan in nisl nisi scelerisque. Aliquam faucibus purus in massa. Diam in arcu cursus euismod quis viverra nibh. Nunc pulvinar sapien et ligula ullamcorper. Mauris nunc congue nisi vitae suscipit tellus mauris. Mattis molestie a iaculis at erat pellentesque adipiscing. Egestas maecenas pharetra convallis posuere. Malesuada fames ac turpis egestas maecenas pharetra convallis.
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span1
.span2
.span2
.span2
.span2
.span2
.span2
.span3
.span3
.span3
.span3
.span4
.span4
.span4
.span1
.span5
.span5
.span1
.span6
.span6
.span7
.span5
.span5
.span7
.span1
.span2
.span1
.span1
.span7
.span4
.span8
.span3
.span9
.span2
.span10
.span1
.span11
.span12
50% split left column
50% split left column