Written by:  Donald Boulton

👏 0

Just Having Fun

🍸 This website is built with ❤️ as static HTML from React components, in a Node Modular WebPack Docker Container build; data with GraphQL. Including determining Users Identity with React Netlify Identity. User Data stored in a FaunaDB User Membership database, todo's and site reviews etc... FAAS (Functions-as-a-Service) backend. Just about finished with the full data structure for my FaunaDB.

Redesign March 15th 2020

I was using Bluma for most of my Flex layout and styling. Incorporating Styled components and styled icons for most of my Components. Over riding Bluma was increasing my .css overhead and pissing me off so I came up with....

A Physics-based Grid Cell - Item layout redesign

Hooks window.matchMedia

Using Styled Components 💅 with custom React Hooks screen 🔗 window.matchMedia mediaQuery's 💍, using window.matchMedia browser support.


In embodiments of 🔗 calc 🔗 vmin vmax screen matchMedia query algorithm to a 🔗 physics-based grid, cell, item layout. Using matchMedia browser screen query's that displays a grid layout interface that includes items within cells in a grid cell layout, and the Browser implements a physics-based window.matchMedia algorithm as a computer screen grid layout that can receive a redesign input based on screen size media query's to manipulate items within a cell in the grid layout interface.

The physics-based screen algorithm is implemented to then determine one or more of the cell items that are proximate to the manipulated cell based on edge relations between an edge of the manipulated cell and respective edges of the one or more grid items.

The screen matchMedia query algorithm can then reconfigure the one or more proximate cells based on the redesign input to the manipulated items and the edge relations between the edges of the cells and/or there items.

This is a work in progress, If you can help or have any comments use Mansbooks PubliusLogic discussions at 🔗 Slack or 🔗 GitHub Issues for discussions.

Netlify Server

Served on Netlify via a continuous deployment (CD) workflow. Pull requests are automatically built into preview apps, while commits to the master branch trigger the production build and deploy onto Netlify CDN edge node infrastructure. Since the whole site is just a bunch of static files copied onto multiple CDN nodes around the world, time to first byte (TTFB) is consistently fast at around 1ms to 2ms. Instant Notifications through my Slack Bots or GMail and phone notifications using Netlify Functions for my - workspace.


Still have a few glitches in the layout responsive design and I need to refactor out some of my old Dark/Light Mode styling as sass, to conversions to Component and Global JavaScript style sheets. And to fully being able to use the Physics based Grid system in a more efficient and effective manner.

Covid-19 Logic Posts

Playtime is over for me and all of you. The future of Mankind is at stake. Time to Pay Attention. I am going to drill all of you hard and its all out of Father Gods Love and Truth's, you need more than the Devils Covid-19 wake up call. You need to Grow up and some Divine Spiritual leadership is what your going to get, like it or not.


Bring your team together with Slack, Work collaboration hub.

MailChimp Newsletters
MailChimp Newsletters

Enjoyed this post? Subscribe!
Css Tricks

Front-End UI, Javascript & Functions, HTML Tips, and More!