CSL The impolite documentation

So, what the heck is this thing?

It stands for: CSS Smart Layout, neato huh?
It is a CSS layout framework based on the fabulous, maybe tricky Flex-box thing, I bet you've heard about it, if not just click the link, but damn it don't forget to come back to the damn page. Anyways, I also made the framework based in the most common layouts used in web design and tried my best to make it intuitive as hell, so that's pretty much it.

Why in hell did I bother?

Well, I tried a couple of css frameworks out there and while they're pretty sweet, I needed something simpler with no extra bits, I think is pretty cool you gotta try it, geez the most simple layout just uses one single class and that's it, you have a nice responsive layout which you don't have to worry about adding extra classes for when it reaches smaller screens, check the freaking Demo if you don't believe me.

And how on earth does this thing work?

Ok, so the framework is pretty damn simple, you put your layout containers inside a parent element to which you will apply the layout class and switches as you need.

In case you need a more deeper explanation this is how you should do it, you start by creating an HTML element which we will call PARENT it could be a div, section, etc. Now to this parent you add a csl class like csl-2-fourth or csl-3-third, depending on what class you're using you need to add the number of elements which will act as your layout columns, the CSL class in the parent will set the behavior of your layout across the different view ports, but there's other pretty cool classes I call switches that help you to manipulate your layout to your needs, I'll include a couple of informative and very professional drawings so you can see what I mean.

This behavior is possible using the SWITCHES: csl-reverse, csl-start-*, csl-stop-*, csl-wrap-*, csl-flipwrap. I will go over these in the Demo page.

Class Anatomy

Now a little bit of "Anatomy" so you can remember the classes easily, let's take the following class csl-2-fourth for example:
There are 3 parts, the first one is just like an identifier, so don't worry about it.
The second one is the number of columns your layout must have, in this case is 2.
And the third part is the width of the first column based on its parent container, in this case 1/4, so I'm just using the denominator fourth, BOOM there you have it!
What? The second column?
Well the other column takes the remaining space available, easy huh?

Wait what? what about a 3 columns layout?

Ok, let's do one more csl-3-third:
So with this class we have 3 columns and the first one is 1/3 right?
Now the other 2 columns get distributed equally... so you have first, second and third column with a width of 1/3.

Now, I ain't typing more examples, I'll show you with more pofessional graphics... boxes, so you can see it, but before, let's get to some rules yeah!!

The freaking rules

The first rule is:
BREAKPOINTS: There are 4 breakpoints at 1219px, 989px, 769px and 549px, remember these numbers, and don't whine about it, they're just 4 numbers.

Second rule:
YOU CAN NEST! Hell yeah son!, just keep in mind that when resizing the browser, the nested layouts will change based on the width of the document not its parent, I know you're smart but it doesn't hurt to mention it.
So IF using a Switch class does not help you to achieve the layout you need, remember you can nest!

Fourth rule...
I honestly have no idea what other rule could there be, so I'll leave you with the little boxes, I'll go get a beer, I'll check on you at the demo page, Cheers!

And yeah I just skipped Third rule on purpose... and yeah, there's no third rule either.

Now with nice little boxes

2 COLUMNS LAYOUT

CSL-2-HALF

50%

50%

CSL-2-THIRD

33.33%

66.66%

CSL-2-FOURTH

25%

75%

So you may ask, what if I want a layout with first column of 66% and the second one with 33%?, well let's add this little class to it: csl-reverse

CSL-2-THIRD CSL-REVERSE

66.66%

33.33%

I bet you're like WTF???, I know, I usually blow people's mind with my stuff, anyways I'll show you all the reversed layouts, which I think is just a couple more.

CSL-2-FOURTH CSL-REVERSE

75%

25%

3 COLUMNS LAYOUT

CSL-3-HALF

50%

25%

25%

CSL-3-HALF CSL-REVERSE

25%

25%

50%

CSL-3-THIRD

33.33%

33.33%

33.33%

CSL-3-FOURTH

25%

50%

If you wonder why I decided to go with this layout for this class, I'll give you a flashback: "most common layouts based in web design".

25%

4 COLUMNS LAYOUT

CSL-4-FOURTH

25%

25%

25%

25%

5 COLUMNS LAYOUT

CSL-5-FIFTH

20%

20%

20%

20%

20%

So these are pretty much all the classes/layouts with their respective reverse behaviors, now go to the Demo page to see all the available switches and how they work!