2.0

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');
 

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%;}

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;}

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<listm.length;i++){
+		m = Math.floor(Math.random()*280-140);
+        listm[i].style.margin = m + "px";
+    }
+	for(var i=0;i<listtrx.length;i++){
+		tr = Math.floor(Math.random()*70-35);
+		kx = Math.floor(Math.random()*45-45);
+		listtrx[i].style.transform = "rotate(" + tr + "deg) skew(" + kx + "deg)";
+    }
+});

source/methods/variables.css

@@ -26,6 +26,9 @@
   --pull-down: -1em;
   --push-down: 1em;
 
+  /* bento grid element border-radius */
+  --rounding: 1rem;
+
   /* isogrid variable */
   --isocols: 3;