Reginald - the MagicGrid

A super-simple framework specially created as a PlugIn for Pinegrow WebEditor (since V4). But it certainly works standalone as well. It's a mostly private work, cause I don't think the world is necessarily in need of having it. I mainly created for quick and unobtrusive web prototyping.

What's in the MagicGrid?

Flexbox

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!

Adaptive Text

We talk about flawless responsive text-sizing using CSS (calc) method. Resize your browser window-width to see it in action.

Responsive Nav

Certainly! It's based on MeanMenu and Superfish for handling Drop-Downs.

Scrolling

Based on One-Page design, it scrolls to sections from the menu and back to top from the special icon bottom right.

Color

Originally adopted from Material Design.

Responsive Video

Media files like video and images are responsive by default.

Animate on Scroll

Some small animation should be allowed. TMG uses the AOS JavaScript library.

Magic Table

It's a responsive table, nothing more nothing less using data-attribute.

Grid Example

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.

Benny-ze-Bunny

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.

DaSecrecyOwl

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.

Video embed

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

A picturefill example
A picturefill example
A picturefill example

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>

Material Design Formular (Not Functional)

MagicList to Table

Movie Title Genre Year Gross
The Wizard of Oz Musical, Fantasy, Comedy-Drama 1939 $240,000
Catweazle Television Series 1970 n.a
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.