Total Float is NOT a CSS grid framework. Total Float is a boilerplate of rules defining a simple theory one can use to build complex CSS grid structures upon. These rules lead to a extremely small CSS and strict markup.
There are tons of CSS grid frameworks out there and the world could sure live without one more. Many of them predefine columns for you and many of them take away the pain of dealing with older browsers. Hopefully one day we will see a full grid module in CSS. Until then, we need CSS grid frameworks.
Building a CSS grid are not that hard and that's probably the reason why there are so many out there. The intention to Total Float is to show a very simple way of building your own CSS grid well suited to construct advanced grids.
Total Float conforms to a component based thought where structure and content are separated. The structural grid is defined by columns. Content placed inside this grid is defined as components.
The idea behind Total Float is that everything which defines the structure floats to the left. When everything floats to the left, everything is stacked horizontally until it reaches full width. When full width is reached the next element will "float below" and start a new horizontal stack below the stack it did not fit into. Components are stacked vertically.
Did you get the idea? Lets run trough some examples for a better understanding:
<body>
<div class="page d_100">
<div class="col d_30"> </div>
<div class="col d_70"> </div>
</div>
</body>The above markup defines some structural elements with the name page and col. Don't think about those names now. We'll get back to them. The page element is set to be 100% by the d_100 class. The first col element inside the page is set, by the d_30 class, to be 30% wide. The width of the first col element is then 30% of the parrent page element. The second col is set, by the d_70 class, to be 70% of the width of the parrent page element.
This gives us two columns floating side by side like this:
As you see, it's about multiplying until you get full width of the parent element.
In the above example each col sums up (30% + 70%) to 100% which is full width of the parent page element. If we want to add a third column we must subtract from one, or both, of the cols so we can add up:
<body>
<div class="page d_100">
<div class="col d_20"> </div>
<div class="col d_60"> </div>
<div class="col d_20"> </div>
</div>
</body>We now have three columns where the left and right col elements take up 20% of the page element and the center col element take up 60% of the page element. It looks like this:
These examples calculate structures based on percentages. This can be done by static pixel values also. We'll come back to that. Let's look at a couple of more complex examples first.
Lets see what happens if we exceed the full width:
<body>
<div class="page d_100">
<div class="col d_20"> </div>
<div class="col d_60"> </div>
<div class="col d_20"> </div>
<div class="col d_100"> </div>
</div>
</body>Adding a new col element, with the class name d_100, will force the new col element to appear below the other col elements:
This are in theory how Total Float works.
It's time to take a look at the CSS we are using. It looks like this:
/* Structure */
.page, .col, .group{
overflow: hidden;
float: left;
}
/* Clearing */
br, .first{
clear: left;
}
/* Widths */
.d_100{width: 100%;}
.d_95{width: 95%;}
.d_90{width: 90%;}
.d_85{width: 85%;}
.d_80{width: 80%;}
.d_75{width: 75%;}
.d_70{width: 70%;}
.d_65{width: 65%;}
.d_60{width: 60%;}
.d_55{width: 55%;}
.d_50{width: 50%;}
.d_45{width: 45%;}
.d_40{width: 40%;}
.d_35{width: 35%;}
.d_30{width: 30%;}
.d_25{width: 25%;}
.d_20{width: 20%;}
.d_15{width: 15%;}
.d_10{width: 10%;}
.d_5{width: 5%;}
The main idea of Total Float are to define some simple rules developers can confirm to for building structures. These rules are as follow:
Each rule are explained in more detail further down in this document.