From d347ef49dff02805faa9629c41e63cb3f67b00c4 Mon Sep 17 00:00:00 2001 From: Pine Creative Labs Date: Sat, 24 Feb 2024 18:47:25 -0500 Subject: [PATCH] 2.0 --- source/blueprintgrid.css | 7 ++++--- source/methods/bento-grid.css | 11 +++++++++++ source/methods/chaos-grid.css | 16 ++++++++++++++-- source/methods/js/bento-grid.js | 11 +++++++++++ source/methods/js/chaos-grid.js | 17 +++++++++++++++++ source/methods/variables.css | 3 +++ 6 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 source/methods/bento-grid.css create mode 100644 source/methods/js/bento-grid.js create mode 100644 source/methods/js/chaos-grid.js diff --git a/source/blueprintgrid.css b/source/blueprintgrid.css index 38be320..c0d14c2 100644 --- a/source/blueprintgrid.css +++ b/source/blueprintgrid.css @@ -1,17 +1,18 @@ -/* Blueprint Grid 1.3 +/* Blueprint Grid 2.0 * https://www.blueprintgrid.com * Author: Brad Fogelstrom * License: MIT */ -@import url('variables.css'); - /* B3Grid */ @import url('methods/b3grid.css'); /* CSS Grid */ @import url('methods/css-grid.css'); +/* Bento Grid */ +@import url('methods/bento-grid.css'); + /* cHaOs GrId */ @import url('methods/chaos-grid.css'); diff --git a/source/methods/bento-grid.css b/source/methods/bento-grid.css new file mode 100644 index 0000000..15e8543 --- /dev/null +++ b/source/methods/bento-grid.css @@ -0,0 +1,11 @@ +/* Bento Grid */ +@import url('variables.css'); + +.bentogrid { display: block; padding: 0; margin: 0; } +.bentogrid>*{ + box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; +} +.bentogrid.soften>*{ + border-radius: var(--rounding); -webkit-border-radius: var(--rounding); +} +.bentogrid>*>a{display: block; width: 100%; height: 100%;} \ No newline at end of file diff --git a/source/methods/chaos-grid.css b/source/methods/chaos-grid.css index cf4b6cb..7a93cad 100644 --- a/source/methods/chaos-grid.css +++ b/source/methods/chaos-grid.css @@ -1,8 +1,8 @@ /* ChAoS aNtI-gRiD gRiD */ @import url('variables.css'); -.chaos-grid { - width: 100%; position: relative; +.chaos-grid {width: 100%; position: relative;} +.chaos-grid,.chaos-grid>*{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .chaos-grid>a,.chaos-grid>article,.chaos-grid>blockquote,.chaos-grid>code, @@ -16,7 +16,19 @@ .chaos-grid>iframe,.chaos-grid>nav,.chaos-grid>p,.chaos-grid>pre, .chaos-grid>section{min-width: 10vw;} +/* animate elements upon load +@keyframes chaoSlideIn { + 0% {transform: translateX(-100%);} + 100% {transform: translateX(0);} +}*/ +@keyframes chaoSlideIn { + 0% {transform: rotate(-20%);} + 100% {transform: rotate(0);} +} +.chaos-grid.slidein>*{animation: 1s ease-out 0s 1 chaoSlideIn;} + /* positioniong */ +.chaos-grid.randomize > * {/*position: absolute; top: 100px; left: 100px; */ position: relative;} .chaos-grid.relative > *:nth-child(odd){position: relative; z-index: 1;} .chaos-grid.relative > *:nth-child(even){position: absolute; z-index: 2;} .chaos-grid.absolute > *:nth-child(odd){position: absolute; z-index: 1;} diff --git a/source/methods/js/bento-grid.js b/source/methods/js/bento-grid.js new file mode 100644 index 0000000..62fc7b0 --- /dev/null +++ b/source/methods/js/bento-grid.js @@ -0,0 +1,11 @@ +/* BENTO GRID */ +class b{constructor(t){this.config={target:".bentogrid",minCellWidth:100,cellGap:0,aspectRatio:1/1,breakpoints:[],balanceFillers:!1,breakpointReference:"target",...t},this.gridContainer=typeof this.config.target=="string"?document.querySelector(this.config.target):this.config.target,this.gridItems=void 0,this.fillers=void 0,this.setElements(),this.prevTotalColumns=null,this.prevColumnCount=null,this.hideOriginalFillers(),this.setupGrid(),this.updateGrid(),this.handleResponsiveBehavior()}setElements(){this.gridItems=Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>t.hasAttribute("data-bento")).filter(t=>t.offsetParent!==null),this.fillers=Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>!t.hasAttribute("data-bento")).filter(t=>!t.style.gridColumn)}getBreakpoint(){const t=this.config.breakpointReference==="target"?this.gridContainer.clientWidth:window.innerWidth;let r={...this.config};const c=a=>{a.columns?delete r.minCellWidth:a.minCellWidth&&delete r.columns};c(r);const C=Object.keys(this.config.breakpoints).map(Number).sort((a,w)=>a-w);for(const a of C)t>=a&&(r={...r,...this.config.breakpoints[a]},c(this.config.breakpoints[a]));return r}setupGrid(){const t=this.getBreakpoint(),r=t.columns||Math.floor((this.gridContainer.clientWidth+t.cellGap)/(t.minCellWidth+t.cellGap));this.gridContainer.style.display="grid",this.gridContainer.style.gridTemplateColumns=`repeat(${r}, minmax(${t.minCellWidth}px, 1fr))`,this.gridContainer.style.gridGap=`${t.cellGap}px`;const a=(this.gridContainer.clientWidth-(r-1)*t.cellGap)/r/t.aspectRatio;return this.gridContainer.style.setProperty("--bento-row-height",`${a}px`),r}hideOriginalFillers(){this.fillers.forEach(t=>{t.style.display="none"})}removeClonedFillers(){Array.from(this.gridContainer.querySelectorAll(":scope > *")).filter(t=>!t.hasAttribute("data-bento")).filter(t=>!!t.style.gridColumn).forEach(t=>{t.remove()})}updateGrid(){const t=this.setupGrid();this.prevTotalColumns!==t&&this.removeClonedFillers();const r=[];let c=0;for(let n=0;nt&&(i=0,e++));return{column:i,row:e}}function a(n,l,s,i){for(let e=n;e{const l=n.getAttribute("data-bento").split("x"),s=parseInt(l[0]),i=parseInt(l[1]),e=C(s,i);n.style.gridColumn=`${e.column+1} / span ${s}`,n.style.gridRow=`${e.row+1} / span ${i}`,w(e.column,e.row,s,i),c=Math.max(c,e.row+i)}),this.gridContainer.style.gridTemplateRows=`repeat(${c}, minmax(var(--bento-row-height), 1fr))`,this.gridItems.forEach(n=>{const l=parseInt(n.style.gridRow.split(" / ")[0]),s=parseInt(n.style.gridRow.split(" / ")[1].split(" ")[1]);c=Math.max(c,l+s-1)}),(()=>{let n=0,l=[];for(let s=0;s0?(o=this.fillers[n].cloneNode(!0),n=(n+1)%this.fillers.length,o.style.display="block"):o=document.createElement("div"),o.classList.add("bento-filler"),o.style.gridColumn=`${i+1} / span ${e}`,o.style.gridRow=`${s+1} / span ${d}`,this.config.balanceFillers){const f=Array.from(this.gridItems).filter(p=>!p.hasAttribute("data-bento-no-swap")).filter(p=>{const g=parseInt(p.style.gridColumn.split(" / ")[0]),m=parseInt(p.style.gridRow.split(" / ")[0]),y=parseInt(p.style.gridColumn.split(" / ")[1].split(" ")[1]),v=parseInt(p.style.gridRow.split(" / ")[1].split(" ")[1]);return y===e&&v===d&&(g!==i+1||m!==s+1)});if(f.length>0){const p=(h,u)=>Math.abs(h.column-u.column)+Math.abs(h.row-u.row),g=(h,u)=>h.length===0?0:h.reduce((R,I)=>R+p(I,u),0)/h.length,m=f.reduce((h,u)=>{const G=g(l,{column:parseInt(u.style.gridColumn.split(" / ")[0])-1,row:parseInt(u.style.gridRow.split(" / ")[0])-1}),R=g(l,{column:parseInt(h.style.gridColumn.split(" / ")[0])-1,row:parseInt(h.style.gridRow.split(" / ")[0])-1});return G>R?u:h},f[0]),y=m.style.gridColumn,v=m.style.gridRow;m.style.gridColumn=o.style.gridColumn,m.style.gridRow=o.style.gridRow,o.style.gridColumn=y,o.style.gridRow=v,l.push({column:parseInt(o.style.gridColumn.split(" / ")[0])-1,row:parseInt(o.style.gridRow.split(" / ")[0])-1})}}w(i,s,e,d),this.gridContainer.appendChild(o)}})(),this.prevTotalColumns=t,this.emitCalculationDoneEvent()}handleResponsiveBehavior(){const t=()=>{clearTimeout(this.resizeObserver._timeoutId),this.resizeObserver._timeoutId=setTimeout(()=>{const r=this.setupGrid();r!==this.prevColumnCount&&this.updateGrid(),this.prevColumnCount=r},10)};this.config.breakpointReference==="window"?this.resizeObserver={observe:()=>{window.addEventListener("resize",t)},unobserve:()=>{window.removeEventListener("resize",t)}}:this.resizeObserver=new ResizeObserver(t),this.resizeObserver.observe(this.gridContainer)}recalculate(){this.setElements(),this.updateGrid()}emitCalculationDoneEvent(){const t=new CustomEvent("calculationDone",{detail:{gridContainer:this.gridContainer}});this.gridContainer.dispatchEvent(t)}} +new b({ + cellGap:16, + target:".bentogrid", + balanceFillers:!0, + columns:2, + aspectRatio:0, + breakpoints:{400:{minCellWidth:288,cellGap:14,aspectRatio:4/3},680:{aspectRatio:1}}, + breakpointReference:"target" +}); \ No newline at end of file diff --git a/source/methods/js/chaos-grid.js b/source/methods/js/chaos-grid.js new file mode 100644 index 0000000..f9d060f --- /dev/null +++ b/source/methods/js/chaos-grid.js @@ -0,0 +1,17 @@ +/* cHaOs GrId RANDOMIZE */ +window.addEventListener("load", function randomize(){ + var m; + var tr; + var kx; + var listm = document.querySelectorAll('.chaos-grid.randomize > *'); + var listtrx = document.querySelectorAll('.chaos-grid.randomize.tilt > *'); + for(var i=0;i