WELCOME TO THE DEMO PAGE
This demo does not cover every single combination of classes, but it covers some possible scenarios, here's a description of all the switches available in the framework, you will also find a sweet table below.
- CSL-START-[breakpoint] The layout behavior will be enabled at the breakpoint stated in the class, before that each column will occupy 100% of its parent width.
- CSL-STOP-[breakpoint] It stops the layout behavior at the breakpoint stated in the class.
- CSL-WRAP-[breackpoint] Works only on selected layouts, this class will wrap the layouts on 2 rows starting at the breakpoint stated in the class
- CSL-FLIPWRAP When the layout is wrapped in 2 rows, this class simply flip the position of the rows on the stack, no need to state a breakpoint.
See this cool table to see all the classes and the switches available for them.
| CLASS | CSL-REVERSE* | CSL-START | CSL-STOP | CSL-WRAP | CSL-FLIPWRAP* |
|---|---|---|---|---|---|
| csl-2-half | |||||
| csl-2-third | |||||
| csl-2-fourth | |||||
| csl-3-half | |||||
| csl-3-third | |||||
| csl-3-fourth | |||||
| csl-4-fourth | |||||
| csl-5-fifth |
You must specify the breakpoint for Start, Stop and Wrap switches, all breakpoints available: 1219, 989, 769 and 549.
*No breakpoint needed
The Wrap Switch
CSL-3-FOURTH CSL-WRAP-769
The Empire Strikes Back
Luke? Lord Vader has set a trap for him. And we're the bait. Well, he's on his way. Perfect. You fixed us all pretty good, didn't you? My friend! Stop! I've done all I can do. I'm sorry I couldn't do better, but I have my own problems. Yeah, you're a real hero. You certainly have a way with people.
The FlipWrap Switch
CSL-3-FOURTH CSL-WRAP-769 CSL-FLIPWRAP
The Empire Strikes Back
Laugh it up, fuzz ball. But you didn't see us alone in the south passage. She expressed her true feelings for me. My...! Why, you stuck up...half-witted...scruffy-looking...nerf-herder! Who's scruffy-looking? I must have hit her pretty close to the mark to get her all riled up like that, huh, kid? Why, I guess you don't know everything about women yet? Headquarters personnel, report to command center. Take it easy. Excuse us, please.
The Stop Switch
CSL-4-FOURTH CSL-STOP-549
The Start Switch
CSL-3-HALF CSL-START-1219 CSL-STOP-769
A New Hope
All flight trooper, man your stations. All flight troops, man your stations. So...you got your reward and you're just leaving then? That's right, yeah! I got some old debts I've got to pay off with this stuff. Even if I didn't, you don't think I'd be fool enough to stick around here, do you? Why don't you come with us? You're pretty good in a fight. I could use you. Come on! Why don't you take a look around? You know what's about to happen, what they're up against. They could use a good pilot like you. You're turning your back on them.
Are you all right? What's wrong? I felt a great disturbance in the Force...as if millions of voices suddenly cried out in terror and were suddenly silenced. I fear something terrible has happened. You'd better get on with your exercises. Well, you can forget your troubles with those Imperial slugs. I told you I'd outrun 'em. Don't everyone thank me at once. Anyway, we should be at Alderaan about oh-two-hundred hours. Now be careful, Artoo. He made a fair move. Screaming about it won't help you. Let him have it. It's not wise to upset a Wookiee. But sir, nobody worries about upsetting a droid. That's 'cause droids don't pull people's arms out of their socket when they lose. Wookiees are known to do that. I see your point, sir. I suggest a new strategy, Artoo. Let the Wookiee win.
The Empire Strikes Back
Luke? Lord Vader has set a trap for him. And we're the bait. Well, he's on his way. Perfect. You fixed us all pretty good, didn't you? My friend! Stop! I've done all I can do. I'm sorry I couldn't do better, but I have my own problems. Yeah, you're a real hero. You certainly have a way with people.
Laugh it up, fuzz ball. But you didn't see us alone in the south passage. She expressed her true feelings for me. My...! Why, you stuck up...half-witted...scruffy-looking...nerf-herder! Who's scruffy-looking? I must have hit her pretty close to the mark to get her all riled up like that, huh, kid? Why, I guess you don't know everything about women yet? Headquarters personnel, report to command center. Take it easy. Excuse us, please.
The Return of the Jedi
Lord Vader, this is an unexpected pleasure. We're honored by your presence. You may dispense with the pleasantries, Commander. I'm here to put you back on schedule. I assure you, Lord Vader, my men are working as fast as they can. Perhaps I can find new ways to motivate them. I tell you, this station will be operational as planned.
Look. I want you to take her. I mean it. Take her. You need all the help you can get. She's the fastest ship in the fleet. All right, old buddy. You know, I know what she means to you. I'll take good care of her. She-she won't get a scratch. All right? Right. I got your promise now. Not a scratch. Look, would you get going, you pirate. Good luck. You, too.
Let's mix it in a nice way
CSL-3-HALF CSL-REVERSE CSL-WRAP-769 CSL-FLIP CSL-STOP-549
The Empire Strikes Back
Luke? Lord Vader has set a trap for him. And we're the bait. Well, he's on his way. Perfect. You fixed us all pretty good, didn't you? My friend! Stop! I've done all I can do. I'm sorry I couldn't do better, but I have my own problems. Yeah, you're a real hero. You certainly have a way with people.
Laugh it up, fuzz ball. But you didn't see us alone in the south passage. She expressed her true feelings for me. My...! Why, you stuck up...half-witted...scruffy-looking...nerf-herder! Who's scruffy-looking? I must have hit her pretty close to the mark to get her all riled up like that, huh, kid? Why, I guess you don't know everything about women yet? Headquarters personnel, report to command center. Take it easy. Excuse us, please.
Finally some nesting
A 3 column layout nested inside a 2 column layout.
The Emperor knew, as I did, if Anakin were to have any offspring, they would be a threat to him. That is the reason why your sister remains safely anonymous. Leia! Leia's my sister. Your insight serves you well. Bury your feelings deep down, Luke. They do you credit. But they could be made to serve the Emperor.
The main entrance to the control bunker's on the far side of that landing platform. This isn't gonna be easy. Hey, don't worry. Chewie and me got into a lot of places more heavily guarded than this. What's he saying? He says there's a secret entrance on the other side of the ridge.
Anakin was a good friend. When I first knew him, your father was already a great pilot. But I was amazed how strongly the Force was with him. I took it upon myself to train him as a Jedi. I thought that I could instruct him just as well as Yoda. I was wrong. There's still good in him. He is more machine now than man. Twisted and evil. I can't do it, Ben. You cannot escape your destiny. I can't kill my own father. Then the Emperor has already won. You were our only hope. Yoda spoke of another. The other he spoke of is your twin sister. But I have no sister. To protect you both from the Emperor, you were hidden from your father when you were born.
It's a trap!
I can't do it, Artoo. I can't go on alone. Yoda will always be with you. Obi-Wan! Why didn't you tell me? You told me Vader betrayed and murdered my father. You father was seduced by the dark side of the Force. He ceased to be Anakin Skywalker and became Darth Vader. When that happened, the good man who was your father was destroyed. So what I have told you was true... from a certain point of view. A certain point of view! Luke, you're going to find that many of the truths we cling to depend greatly on our own point of view.
Well, I think this is enough demo you got the whole picture, but if you think you have something to add to it, by all means stop by and contribute, I'm thinking on creating something similar with the CSS Grid System although is pretty much supported by all latest browser versions, as of the begining of 2017 unsupported browsers are still mostly used, Grid System Browser Support.