Create your own Grid Library?

Showcase
1

Hi guys,

long thought about posting this. Why? Hm - cause I think it’s not worth talking about another grid-framework. There are enough out there we could use. And furthermore, they’re somehow better: better developed by a team of wise css architects.

But you know what? If you never tried to build something, what makes you an expert? What makes you deciding which one to chose? Eating the best fish or the second best?

Coming from FreewayPro (a DTP-based web application), I ran couples of screencasts about placing elements on a page. People there foremost struggled in understanding “position”. Their world persists of “drop and drag”. By doing those screencasts, I developed an own “model” which could be seen as a pre-grid system. I called it TheGrid. After FreewayPro ran out of business, I certainly sought for an alternative (not that I really needed one - I wanted it). One of my screencast subscribers pointed me to Pinegrow. To be honest, I’ve never heard of it before.

I was thrilled, cause I saw the chance just to enhance my (poor) skills. Away from “drop&drag visual thing” to hand-craft. And I was interested in seeing whether “TheGrid” works in other apps as well or not. I was amazed seeing it did work as well (certainly). But to be honest, somehow with poor code. While Freeway handled all and everything by ID, I had to find out a way to turn all of this into reusable classes.

So one piece came to the other. And “TheGrid” grew slowly. And one thought came to the other. I think I restarted all this several times. My biggest concerns were how to make it reusable for any new project built on TheGrid. Long story short: CodeKit for concatenating, compiling and minifying stuff (and its internal framework feature).

Did I lose you cause you’re bored? I understand. So let’s showcase something. At this (early) stage, the following is incomplete and has some nonsense text in it.

Don’t judge me too hard, preferably do it even harder. I can take it (I think I’m a big boy). Regarding this, I have even tons of questions and I’d love having a discussion about design and craft, advanced techniques in Pinegrow.

Thank you very much for your attention - and, oh - nearby forgot sharing the result (so far):

https://clients.updog.co/Reginald-theMagicGrid/index.html

Cheers

Thomas

3 Likes
2

Very interesting!
I will follow the progress of the Reginald MagicGrid project with great interest.

3

! well, that’s some work.
I’m impressed. Love the color scheme too :slight_smile:
mmm missing his magic hat?

anything along the lines of
https://csshat.com/

:slight_smile: a stylish hat

4

Hi guys,

thanks for your comments so far - appreciated.

Here comes the big question no. 1 @Emmanuel (perhaps):

When you use a pre-defined framework, say Materialize, you have a lot of extended input possibilities (which you haven’t got starting from scratch - certainly) in the PROP panel. Are those things in PROP panel “Developers Area only” or can those things be added by an average mortal as well? And if so - how?

I’m asking, cause it would be nice to have the color-concept much quicker by hand. As mentioned above, I’m using the most useful things cross-framework. And colors is one of the features I like from Materialize. Currently I’m classifying them according to their documentation - but a drop-down with color names and preview would be awesome.

Cheers

Thomas

5

OMG cool!

OK, I think I figured it out (the way to do - not really how to do). Certainly! It’s creating a PlugIn - the like GitHub - matjaztrontelj/Pinegrow960Grid: Pinegrow plugin for 960 Grid as a starting point. Admittedly it’s (setting this day to day zero) above my head and will end in tons of question.

To cite my friend @schpengle

“Now it’s really work!”

Cheers

Thomas

6

Yes, @thomas, I opened your grid up in Pinegrow to view it and see the classes etc. That was A LOT of work you have done there! I dont think Ihave ever noticed so many breakpoints in a grid view. Obviously some of it was a bit out of my comfort zone, but I am looking forward to having a bit of time to explore it all and the technologies you have intergrated into it - maybe in the NEW PG 3.0 Interface soon! woo hoo! :slight_smile:

Good luck with it and yes, it looks like the Plugin is the way to go for you.

I just downloaded your site with sitesucker to play with

7

Hi Ian,

obviously time to create a screencast explaining the simplicity of this approach (when I got time).

My responsive design thinking is pretty easy:

When design sucks (or starts to suck), it’s time for a breakpoint.

Coming from this simple thing in mind, all you need is the freedom to set it wherever you want. It certainly doesn’t make much sense setting them each pixel (or each 10 Pixel). Reginald starts (mobile-first) by 500px and allows you to set it every 100px up to 2000px (max). Cause it’s based on classifying, you certainly need them by hand.

So just as an example (the three characters) have the following class applied to it’s module:

<div class="tmg__module--Flex tmg-three-900"></div>

It’ll mean in words: The element displays flex and breaks at a browser window width of 900px from 1 column to three columns. Change the last number to any between 500-2000 to see it happen, e.g.

<div class="tmg__module--Flex tmg-three-600"></div>

Meanwhile, I even managed some magic (however more accidental). Time to learn JavaScript.

Cheers

Thomas

And I’d like to mention, even if I second myself, that Pinegrow WebDesigner is the coolest app under this sun!

8

The breakpoints via simple the class assignments is interesting. I am curious, given the vast number of grid systems out there, were you inspired by or did you see this approach used in another one, if so which?

Also congratulations on your move from Freeway to Pinegrow, along with your continued thirst and quest for further learning. I really applaud that.

Do Freeway people still buy and use your Lounge tutorials? Perhaps you can persuade some more Freeway folks to Pinegrow when version 3 releases. :wink:

9

I enjoyed this presentation I’ve been interested in grids for many years since a student intern of mine suggested building one 15 years ago. We didn’t do it, but I’ve been observing the progress of grids somewhat since. I’ve been on a quest for the perfect WCM and I think grids are an important part of the quest. I’ve tried the very simple WCM, the very complex (enterprise level) and everything in between. I’ve learned that the coder’s dream is the marketer’s nightmare and vice versa. Designers have a very different perspective too. I once thought that CQ5 (now Adobe Experience Manager) would work for everyone, but it turned out to be so difficult and expensive that it didn’t work for anyone. The strength was their flexibility (owing in part to the grid) but it was poorly understood, and most coders treated it like Drupal and customized it beyond recognition. The enterprise level offerings are all bloated and complex, requiring extensive (=expensive) customizations.

Brandcast.com is an up and coming WCM that has done some interesting things with the grid system. You can build a page with amazing flexibility and speed. My money is on them to mow Adobe’s grass, but at the moment they are really only serving the designer market. They lack the ability to manage more than a score of pages (although that’s changing soon) and they are just now getting into reuseable content blocks, which is another key peice of the perfect WCM puzzle. They have to grow up to be able to serve the marketing community. That is where the real value is, because that is where the real money is. They are also the coder’s nightmare. The code is completely off limits. The upside of that is, unbreakable. The downside is no customization.

The flat-file system - my latest hot topic - has been at the other extreme of the spectrum. Coder’s dream. They’ve been catering to coders without realizing that marketing drives everything. Ease-of-use is the holy grail for marketers. Publish, test, iterate, repeat.

I’m looking at Pinegrow as a bridge between all of these extremes. We have stood up an enterprise level flat-file website (test only) using Pinegrow, GitHub, and a few other tools. It was very inexpensive and took a couple of days (more server work needs to be done to go live). It passed security review with flying colors.

As I look at what Pinegrow is now, and where it is going, I see what it can become; flexible, powerful, easy-to-use - a tool that can work for anyone. It might be inevitable. :slight_smile:

10

That’s pretty simple to answer: TheMagicGrid isn’t really magic - it’s just a collection of all the things I found during my last five years of dealing with adaptive content. So one part is inspired, adopted and adapted from Flexpoint - Better responsive grid system[quote=“Pinegrow_User, post:8, topic:915”]

Also congratulations on your move from Freeway to Pinegrow, along with your continued thirst and quest for further learning. I really applaud that.
[/quote]

Thanks - sounds good. But this doesn’t really happen just by moving to Pinegrow. Since two or three years or so, I changed my workflow entirely. Freeway was just the “construction” part - all the rest (styling and other fun) already happened in Brackets and CodeKit. So replacing the “constructional” part wasn’t that hard.

No - they don’t. An interesting thing to share is, that a huge part (if not the majority) NEVER were part of FreewayTalk community. Lot’s of them weren’t even in need to learn the shared stuff. They often subscribed just because of curiosity and fun.

The only real reason for creating Reginald is to bridge the existing gap between “starting from _blank” and using the “full-featured whistle-and-bells frameworks”. At the current point, PG it’s a real game-changer. The most important argument to fight for Pinegrow is, that it doesn’t create an app depending document. It’s simply HTML, CSS and JS - that’s it.

Cheers

Thomas

11

@Thomas,

Thanks for the response and the link. In all my research of grid frameworks, I cant say I ever came across or payed attention to that particular one.

12

Nice work Thomas!

For anyone looking to experiment with “grid” options, here is an interesting site that will create responsive grid code that you can cut and paste to use. There is also a playground section.

http://www.responsivegridsystem.com/

Cheers,

Vince

13

You shouldn’t invest too much time in grids based on float and clear and the like as in the above link provided. Since extending browser support for CSS Grid recently, it’s now time to review your strategies towards either CSS Grid or Flexbox. In fact, both of them share way more opportunities as any classic “hack” provided ever.

Meanwhile I even accomplished having a PlugIn making work with Reginald incredible easy and quick. As already mentioned, the focus is just on a handful of properties and elements.

Reginald-theMagicGrid-PlugIn.jpg1720×873 266 KB

Cheers

Thomas

2 Likes
14

Awesome!
Can’t wait to try your plugin :slight_smile:

15

Nice job on creating a plugin.

True.

However, just make sure to understand visitor device and browser demographics and polyfill as required. Especially with CSS Grid, as it was only introduced into browsers a few months back, in March of 2017. But indeed things are gonna be much cleaner and expansive moving forward.

16

Hi Thomas. I agree. The problem is there are still many legacy browsers in the wild and some mobile issues that do not support responsive designs with the new frameworks properly. Saturation in now about 95pct supported but as we have seen over the last few days with this crypto worm, there are still many systems that are not up to date.

Congratulations on getting the plugin working! I haven’t had time to play with that as I’ve been dwelling in wordpress headaches.

Cheers,

Vince

17

Hm - certainly there will be legacy browsers but 95% is a good number. I’m doing responsive design since mid 2012 or so. I simply lost concerns along those five years. CSS Grid, writing today won’t be my real friend ever (I love to change my attitude if necessary), cause it reminds me more on “table-like” design. Flexbox is it and I love to see the world green:

http://caniuse.com/#search=CSS3%20Media%20Queries

The PlugIn? Don’t mistake me here, but I’m not sure if I ever roll it out. I simply can’t write JS. All I can do is somehow interpreting it - a real trial and error exercise. Sure - it works for me, but I can’t expect from you guys getting it to work as well. At least not without a documentation (or video). Furthermore I can’t expect you guys rushing in, ironing the kinks out, can I?

Cheers

Thomas

18

Looks like you are about to get more attention. :wink:

Reginald Pinegrow Retweeted.jpg959×844 270 KB

19

Yep - it was time for my yearly tweet having had the choice between

Brought out garbage staring at the bikini-butt of my neighbor - obviously it’s meteorologic summer!

and

hashtag ReginaldMagicGrid

decided the latter.

I’d like to wrap all this in a small screencast. Doesn’t make much sense doing it in 2.9 though - so I wait excitedly on V3 (Beta Tester calling).

Cheers

Thomas

20

Visitors using legacy browsers like IE8 are used to seeing the sub-optimal view of pages. Mobile users will see a traditional stacked layout. Someone watching Game of Thrones on an old black and white tv can still watch, it just won’t be as nice as the person watching the same show on latest 70 inch. Progressive Enhancement.

Building Production Ready CSS Grid Layout (Sitepoint)

  1. Create accessible HTML with a sound hierarchical and semantic structure.
  2. Create a responsive single-column layout for all screen widths.
  3. Apply advanced layouts and functionality (grid, flex, JavaScript, etc.).

This should result in an accessible solution that works in all browsers on all platforms, while taking advantage of the latest technologies.

Is It Really Save to Start Using CSS Grid Layout? (Rachel Andrew)

1 Like