Possibilities & ease of use

Intro

Fractionflex is based on css flexboxes. It's a small stylesheet with a lot of potential.

A common practice occuring on the internet is the use of flex with percentages. Believe me, that’s the hard way. Why would you describe 5/12 as 41.66666667%, (with all rounding and margin problems), when you only need one integer?

Flex is brilliant because it works with integers. I found out you only need 25 integers to make all fraction-classes shown here.

This makes fractionflex small, fast and uses less resources.

You only have to count to 1

Fractionflex has 66 fraction classes. You only have to count to 1.

Fractionflex works with al possible fractions you will find in the times tables up to twelve adding up to 1.

For example times table five: 1/5 + 4/5 = 1.

So, Fractionflex has the following classes for this times table:
.fr1-5 .fr2-5 .fr3-5 .fr4-5

For times table five you don't need more classes in order to count to 1.

Columnwidth
Fractionflex fractions

Endless nesting

Nested-columns

All Fractionflex fractions-classes represent an integer. All calculations of fractions are done by browsers in the same way.

It's accurate, so you don't have to worry about the rounding of numbers, margins and floats by browsers anymore. That's why you can nest columns endlessly in fractionflex without breaking the concept.

 

The "holy grail" for webdesigners

You can fill the whole screen with ease. Even when there's no content in it.

fill-height
places-content

21 different ways to place content

There are eight different classes to place content in different ways. Nine positions in one column. And 2 x 6 ways to place items individually, either horizontal or vertical. (see How to)

Small and fast

Fractionflex is so small that it even fits spelled out in the head section. For example, this whole page is only 18.3 kb and loads in less than 180 ms. Test it here!

 

Browser compatiblility:

Fractionflex is mostly based on the first specifications of flexbox(with -prefixes-). It has overcome know issues and has a global support of 97,3%

Chrome 21
Chrome
2012

Firefox 8
Firefox
2011

Explorer 10
Internet Explorer
2012

Safari 6.1
Safari
2012

Opera 12.1
Opera
2012

Android 3
Android
2011

viewportrow = 1column fr2-5column fr3-5 * expansion relative to 12-columns gridfr1-1fr1-2fr1-3 to fr2-3fr1-4 to fr3-4fr1-5 to fr4-5*fr1-6 to fr5-6fr1-7 to fr6-7*fr1-8 to fr7-8*fr1-9 to fr8-9*fr1-10 to fr9-10*fr1-11 to fr10-11*fr1-12 to fr11-12Fractionflex fractions viewportrow = 1column fr2-5column fr3-5row = 1column fr1-2column fr1-2 viewportflex-row fill-heightflex-rowflex-row 9 positions in one columnseveral options within content INDEX