griddy - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

package.json

 {
   "name": "griddy",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Grid system plugin for stylus",
@@ -5,0 +5,0 @@ "main": "plugin.js",

plugin.js

 
-var version = require('../package.json').version;
+var version = require('./package.json').version;
 
@@ -4,0 +4,0 @@ var plugin = function () {

README.md

@@ -5,2 +5,8 @@ # Griddy
 
+## Examples
+
+* [12 columns grid](http://tancredi.github.io/griddy/examples/12-col-grid.html)
+* [10 columns grid](http://tancredi.github.io/griddy/examples/10-col-grid.html)
+* [Custom class grid](http://tancredi.github.io/griddy/examples/custom-class.html)
+
 ## Plugin setup
@@ -20,6 +26,6 @@
 var stylus = require('stylus'),
-	griddy = require('griddy')
+    griddy = require('griddy')
 
 function compile (src) {
-	return stylus(src).set('filename', path).use(griddy());
+    return stylus(src).set('filename', path).use(griddy());
 }
@@ -36,26 +42,64 @@ ```
 
-## Mixins
+## Usage
 
+Apply the mixin `grid-system` to any selector to define a grid system.
+
 * `grid-system(cols = 12, gutter = 20px, child = '.col', all-columns = true, separate = '-', breakpoint = 400px)`
 
+#### Parameters
+
+* `cols` - Number of total columns
+* `gutter` - Horizontal space between columns and vertical space between rows
+* `child` - Child selector suffix (Or full selector, if all-columns is set to false)
+* `all-columns` - Generate selectors for all numbers of spans, using `[selector][separate][spans]` convention
+* `separate` - String separating `child` prefix from spans count, used when `all-columns` is set to true
+* `breakpoint` - Max-size for responsive media query (Columns will break to full-width under specified size)
+
 ## Example
 
+#### Stylus
+
 ```
+@import 'griddy'
+
 .row
-	grid-system(12, 20px, '.col')
+    grid-system(12, 20px, '.col')
 ```
 
+#### HTML
+
+```html
+<div class="row">
+    <div class="col-3">
+
+        <!-- [ … ] -->
+
+    </div>
+    <div class="col-9">
+
+        <!-- [ … ] -->
+
+    </div>
+</div>
 ```
-	<div class="row">
-		<div class="col-3">
 
-			<!-- [ … ] -->
+## Custom class
 
-		</div>
-		<div class="col-9">
+#### Stylus
 
-			<!-- [ … ] -->
+```
+@import 'griddy'
 
-		</div>
-	</div>
+.split-3
+    grid-system(3, 10px, '.thirds', true, ' thirds-')
 ```
+
+#### HTML
+
+```html
+<div class="split-3">
+    <div class="thirds thirds-1"> [...] </div>
+    <div class="thirds thirds-1"> [...] </div>
+    <div class="thirds thirds-1"> [...] </div>
+</div>
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17035

increased by730.57%

Number of package files

12

increased by200%

Lines of code

297

increased by3200%

Number of lines in readme file

103

increased by74.58%

No dependency changes