What's in the MagicGrid?
Yep - it's not about float and clear anymore. And it's not CSS Grid which simply doesn't fit into my design. It's display:flex!
We talk about flawless responsive text-sizing using CSS (calc) method. Resize your browser window-width to see it in action.
Certainly! It's based on MeanMenu and Superfish for handling Drop-Downs.
Based on One-Page design, it scrolls to sections from the menu and back to top from the special icon bottom right.
Originally adopted from Material Design.
Media files like video and images are responsive by default.
Animate on Scroll
It's a responsive table, nothing more nothing less using data-attribute.
Reginald - the Magician
Hi - I'm Reginald, the Magician. Hm - better said the half-magician. You ask me why half? Well, the pain is, that I lost my magic hat. This is a serious problem, cause without this hat, my tricky elements don't have a home.
Hi - I'm Benny ze Bunny. I belong to Reginald, the idiot. You ask me why idiot? He lost his hat. I'm used to live in this hat so to be precise, he lost my home. It probably will turn up again, suspect that we will need a lil bit of help though.
Hi - I'm daOwl. Basically I think I'm accidentially here cause everything I know is a secret. So call me the NSA of the game. Or better call me not - I won't answer you anyway. Except if you got mice. I love mice - the fatter the better.
The Video embed currently works with FitVidsJs, A lightweight, easy-to-use jQuery plugin for fluid width video embeds created by Chris Coyier and Paravel. FitVidsJs is available on GitHub.
Responsive Image Concept
The keyword and underlying script snippet is Picturefill by Scott Jehl. There are different ways doing the MarkUp, so this one uses the picture-element. While legacy browsers don't support the picture-element, Picturefill does the magic. It simply adds an img-TAG, so those browsers will follow this instead.
Trying to syntax-highlight the underlying DOM-code of the example above:
<picture> <source srcset="https://placehold.it/1280x1024/ 1x, https://placehold.it/2560x2048/ 2x" media="(min-width: 1000px)"> <source srcset="https://placehold.it/1024x768/ 1x, https://placehold.it/2048x1024/ 2x" media="(min-width: 800px)"> <source srcset="https://placehold.it/480x320/ 1x, https://placehold.it/960x640/ 2x" media="(max-width: 480px)"> <img srcset="http://placehold.it/800x600/ 1x, http://placehold.it/1600x1200/ 2x" alt="…"> </picture>
MagicList to Table
|The Wizard of Oz||Musical, Fantasy, Comedy-Drama||1939||$240,000|
|Harry Potter||Fantasy Novel||2001||$850,000,000|
|Reginald - the Magician||Concept Art||2015||-$12,90|
The Responsive Table
Probably a few words to it: Semantically spoken, this is a table. We have the "titles" wrapped in the th-TAG (Movie Title, Genre etc.) and content in the td-TAG. This is fine, however the td (table-data?) is prefixed with the th-TAG using magic CSS when we break it down to a list on smaller devices. It automatically means, that we do "content" by CSS and not real HTML. But I may fail - I love this idea. It's based on an example that I found on CodePen.