Fluid responsive layouts allow you to build one site for every device. From mobile phones to desktop computers, you site looks fantastic. And the dirty work is already done for you using CSS media queries.
Slice keeps your code semantic. Clean and easy to use. The less you have to write, the faster you can launch your creation. Slice is here to assist you, not determine the fate of your design.
100% Open Source framework. It's hosted, developed, and maintained on Github. Download the files, or fork it on Gihub. The files are yours, and when you make something awesome with it, show me, I'd love to see it.
Slice was built on a percentage base. Forget column numbers and just divide or 'slice' your page columns up in percentages or give it an even distributuion.
The markup is pretty simple. For even column layouts, choose your number of even slices, and replace the markup AFTER the col to the slice you chose. For example, I chose 'three-even' from the layout options below. Leave the 'col' in place as that determines you are going to use a column. You'll notice the 'sections' between the div tags. You'll need to add the appropriate amount of 'sections' based on the layout you chose. In my case, I need three. Feel free to give any ID's or classes to these sections.
<div class="col three-even"> <section> left content </section> <section> middle content </section> <section> right content </section> </div>
For the two column slices, you'll need to choose a layout from the list below and replace the markup AFTER the col to the slice you chose. Leave the 'col' in place as that determines you are going to use a column. You'll notice the 'sections' between the div tags, for these layouts, you'll only need two 'section' tags. The first section is the left portion, and the second is the right portion of your content. Feel free to give any ID's or classes to these sections.
<div class="col ten-ninety"> <section> Content - Left 10% </section> <section> Content - Right 90% </section> </div>