Permalink
Browse files

Add debug grid

  • Loading branch information...
1 parent a0bcb94 commit 8caeaf5b6dfabd02db6504f1546d8301a8e728d8 @jxnblk jxnblk committed Sep 8, 2016
@@ -0,0 +1,2 @@
+
+css
No changes.
@@ -0,0 +1,7 @@
+
+Utility style for showing a 8 x 8px background grid.
+
+```html
+<div class="p3 debug-grid">.debug-grid</div>
+```
+
@@ -0,0 +1,14 @@
+/* Basscss Debug Grid */
+
+.debug-grid {
+ background-image:
+ linear-gradient(transparent 7px, var(--debug-grid-color) 8px),
+ linear-gradient(90deg, transparent 7px, var(--debug-grid-color) 8px);
+ background-position: calc(50% - 4px) top;
+ background-size: 8px 8px;
+}
+
+:root {
+ --debug-grid-color: rgba(0, 255, 255, .25);
+}
+
@@ -0,0 +1,31 @@
+{
+ "name": "basscss-debug-grid",
+ "version": "1.0.0",
+ "description": "Debug utility to create an 8px by 8px background grid for Basscss",
+ "scripts": {
+ "prepublish": "mkdir -p css && postcss index.css -u postcss-custom-properties -u autoprefixer -o css/debug-grid.css"
+ },
+ "devDependencies": {
+ "autoprefixer": "^6.3.1",
+ "postcss-cli": "^2.5.0",
+ "postcss-custom-properties": "^5.0.1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/basscss/addons.git"
+ },
+ "keywords": [
+ "css",
+ "oocss",
+ "fcss",
+ "functional-css",
+ "atomic",
+ "basscss"
+ ],
+ "author": "Brent Jackson",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/basscss/addons/issues"
+ },
+ "homepage": "https://github.com/basscss/addons"
+}

0 comments on commit 8caeaf5

Please sign in to comment.