Modernizr Demo with Prefix Free

Whedon Ipsum

She is the slayer. Men watch the action movie, they eat of the beef, and enjoy to look at the scenery. A vampire in love with a Slayer. It's rather poetic, in a maudlin sort of way. I recognize the council has made a decision, but given that it's a silly decision, I've elected to ignore it. Well, a gathering is brie, mellow song stylings; shindig, dip, less mellow song stylings, perhaps a large amount of malt beverage; and hootenanny, well, it's chock full of hoot, just a little bit of nanny. Men, with your sales. Say Skywalker, and I smack ya. I dislike that Anya. She's newly human and strangely literal. The gentlemen are coming by.

So, I'm wondering, do the other cookie animals feel sorta ripped? What, you think this isn't real just because of all the vampires, and demons, and ex-vengeance demons, and the sister that used to be a big ball of universe-destroying energy? Somebody put her tiny little thinking cap on! Planet's coming up a mite fast. Actually, I was fired from a fry-cook opportunity.

I would appreciate it if one person on this boat would not assume I'm an evil, lecherous hump. One of my personalities happens to be a multiple personality, but that doesn't make me a multiple personality. Buffy's having fun with Spike. From beneath you, it devours. You're the Slayer, and we're, like, the Slayerettes! All the protein, vitamins and carbs of your grandma's best turkey dinner, plus fifteen percent alcohol.

CSS using Prefix Free

.columns4 {
    column-count: 4;
    column-rule: 1px outset #000000;
}

@media all and (max-width:800px){
    #sampleContent {
    column-count: 3;
    column-gap: 20px;
    column-rule: 1px outset #000000;
  }
}

@media all and (max-width:600px){
    #sampleContent {
    column-count: 2;
    column-gap: 20px;
    column-rule: 1px outset #000000;
  }
}

@media all and (max-width:300px){
    #sampleContent {
    column-count: 1;
  }
}
  
  

CSS without Prefix Free

.columns4 {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
   
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
   
    -webkit-column-rule: 1px outset #000000; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #000000; /* Firefox */
    column-rule: 1px outset #000000;
}


@media all and (max-width:800px){
    #sampleContent {
      -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
   
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
   
    -webkit-column-rule: 1px outset #000000; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #000000; /* Firefox */
    column-rule: 1px outset #000000;
  }
}

@media all and (max-width:600px){
    #sampleContent {
      -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
   
    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;
   
    -webkit-column-rule: 1px outset #000000; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #000000; /* Firefox */
    column-rule: 1px outset #000000;
  }
}

@media all and (max-width:300px){
    #sampleContent {
      -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}