add sass/scratch.scss and associated sass files

Resources/public/sass/contrib/gridle/grid-bootstrap.scss

@@ -0,0 +1,48 @@
+// Import gridle :
+@import 'gridle/gridle';
+
+
+// basic configuration :
+@include gridle_setup( (
+	context : 12,
+	gutter-width : 30px,
+	html-states-classes : true
+) );
+
+// register states :
+@include gridle_register_default_mobile_first_states();
+
+/*
+ * Optional :
+ * Change generation class names pattern (for example to match bootstrap naming conventions or generate with your own names) :
+ * Check documentation (http://gridle.org/documentation#name-pattern) for full list
+ *
+ * %- 		= separator sign (configurable by $gridle-class-separator) (no need to add separators if you doesn't want them)
+ * %state 	= the state name (mobile, ipad, etc...)
+ * %count  	= the column count (1, 2, 3, 4, etc...)
+ */
+$gridle-grid-name-pattern : ('col','%-','%state','%-','%count');
+$gridle-parent-name-pattern : ('row','%-','%state');
+$gridle-prefix-name-pattern : ('col','%-','%state','%-','offset','%-','%count');
+$gridle-push-name-pattern : ('col','%-','%state','%-','push','%-','%count');
+$gridle-pull-name-pattern : ('col','%-','%state','%-','pull','%-','%count');
+$gridle-show-name-pattern : ('visible','%-','%state');
+$gridle-hide-name-pattern : ('hidden','%-','%state');
+
+
+/**
+ * Mobile first approach :
+ */
+[class*="col-"] {
+	width:100%; // 100% by default
+}
+
+
+// Generate classes :
+@include gridle_generate_classes();
+
+// Max size :
+.container {
+	margin:0 auto;
+	max-width:1200px;
+}