Every CSS/Grid/Responsive framework in my opinion is just too complicated and limiting.
- Want a mixture of fixed AND fluid columns? Nope!
- What 2 columns in header, 5 in the content area and 4 in the footer? Nope! (unless you want to have a 40 (254) column grid)
- Want to center verticly without hacks? Nope!
- Want to calculate optimal widths, gutters, padding, golden ratio and the circumference of the earth in your head? Nope! Get a calculator.
In this design, I go with the idea that the "grid"/table is PURE layout. If you need padding or gutters, add it to your content. It isn't neccessary to design your layout around the idea that columns can be moved around at will. How often do you really do that?
Keep your grid simple, nice even numbers/percentages and add spacing when it is needed, otherwise you will fight frameworks when you want to use the full width of the column;
From what I have seen, all frameworks that live outside of SASS require markup. Here is the progression of styling over the years:
- Tables, auto-height, styling for the win!
- Tables defy the semantic gods and are for n00bs, use divs!
- I'm sippin on my margarita, sitting on a floatie, look how my divs resize with the browser!
- w00t, media queries, lets make CSS complicated: RESPONSIVE! GRIDS! LIGHTS! BUTTONS! MOOOOOOBILLLLLLEEEEE!
- I just want this thing to work on a phone.
I am at #5 at this point. A designer provides a PSD, and it needs to look good. What major problems do these frameworks truly solve that is worth the complication?
This in my opinion reinforces simplicity. If I say the width is 1000px, it is a 1000px, regardless of padding, borders, etc. You can always wrap a container and style it or place padding on the actual content, and not your layout.
IE 6/7 make up a few percent of market share and it isn't worth developing for. IE >= 8 may require some help using common polyfil libraries such as modernizr or respond.js.
Currently, I had no need to customize the design based on tablets, so it makes this library very simple. All definitions by default apply to the desktop and phone will fallback to a single column design. HOWEVER, there is nothing stopping you from using media queries on columns and optimizing further on a table, this library will not lock you into a grid.
By default, any widths/percentages passed into mixins will ONLY apply to the desktop. Any table that is defined as a fixed width will become fluid soon as it becomes to big to display in the browser.
I assume at this point you know how to setup a SASS project, if not, im sorry, just too lazy to tell you how.
Currently, you just need to drop this repo into a folder (call it "tablespoon"?) that is relative to your other .scss files and include this:
@import "tablespoon/tablespoon";
At some point I will turn this into a ruby GEM.
In order to support IE8 (doesn't recognize HTML elements or media queries), you will need to use html5shiv and respond or modernizr which has support for both.
#wrapper{
@include table(1000px);
#col1{
@include column;
width: 700px;
}
#col2{
@include column;
width: 300px;
}
}
#wrapper{
@include table(1000px);
#col1{
@include column;
width: 70%; // 700px
}
#col2{
@include column;
width: 30%; // 300px
}
}
#wrapper{
@include table(1000px);
#col1{
// because no width is defined, this will be fluid.
@include column;
}
#col2{
@include column;
width: 300px;
}
}
#wrapper{
@include table(1000px);
#col1{
// because no width is defined, this will be fluid.
@include column;
#content{
@include table; //defaults to 100%
#left{
@include column;
width: 25%;
}
#right{
@include column;
width: 75%;
}
}
}
#col2{
@include column;
width: 300px;
}
}
In this example, I can define my own behavior based on the device width without being locked into a grid layout or HTML markup.
#wrapper{
@include table(1000px);
#col1{
@include column;
}
#col2{
@include column;
@media screen and (max-width: 768px) {
width: 200px;
}
@media screen and (min-width: 769px) {
width: 300px;
}
}
}
#wrapper{
@include table(1000px); // effective width is 960px due to padding
padding-left: 20px;
padding-right: 20px;
}
I would recommend not going with this approach as typically a slight padding looks good on every width (even on phone), but perhaps you want a smaller amount when on a phone.
#wrapper{
padding-left: 10px; // applies to phone
padding-right: 10px;
@include table(1000px){
padding-left: 20px;
padding-right: 20px;
}
}
This example shows how you could have right rail design that has space between the main content, but only applies on the desktop because when on a phone this will be a single column layout and a 20px padding will look odd.
#wrapper{
@include table(1000px);
padding: 0 20px;
#left{
@include column;
}
#right{
@include column{
padding-left: 20px;
}
width: 300px;
}
}
Sometimes you may not want to move to a single column layout when on a phone, so you can disable that behavior. NOTE: If you have problems with it affecting other elements, try using approach 2 which is much more confined.
#wrapper{
@include table(1000px);
#col{
@include col;
#twocol{
@include table(100%, false);
#left{
@include column;
}
#right{
@include column;
}
}
}
}
Sometimes you may not want to move to a single column layout when on a phone, so you can disable that behavior. NOTE: If you have problems with it affecting other elements, try using approach 2 which is much more confined.
#wrapper{
@include table(1000px);
#col{
@include col;
@include nonresponsive{
#twocol{
@include table(100%);
#left{
@include column;
}
#right{
@include column;
}
}
}
}
}
#wrapper{
display: none;
@include desktop{
display: block;
}
}
#wrapper{
display: block;
@include phone{
display: none;
}
}
#wrapper{
@include desktop{
display: block;
}
@include phone{
display: none;
}
}