Introducing slice
A rediculously easy framework for rediculously awesome people.
Responsive fluid layout | Semantic | 100% open source
Slice is for anybody who wants to use it.
Whether you're a newbie or a seasoned dev, Slice can help in your next project.
Responsive Layout
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.
Semantic
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.
Open Source
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 Framework is completely open-source and perfect for new developers and helpful for veteran devs too. Check it out on github, feel free to rework and transform the code to make it work for you.
Documentation & Layout
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.
Two Column Slices
Markup
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>
One
100%
Two-Even
50%
50%
Three-Even
33.33%
33.33%
33.33%
Four-Even
25%
25%
25%
25%
Five-Even
20%
20%
20%
20%
20%
Six-Even
16.667%
16.667%
16.667%
16.667%
16.667%
16.667%
Seven-Even
14.28%
14.28%
14.28%
14.28%
14.28%
14.28%
14.28%
Eight-Even
12.5%;
12.5%;
12.5%;
12.5%;
12.5%;
12.5%;
12.5%;
12.5%;
Nine-Even
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
Ten-Even
10%
10%
10%
10%
10%
10%
10%
10%
10%
10%
Even Column Slices
Markup
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>