ballerina-grid - npm Package Compare versions

Comparing version 1.0.0-alpha4 to 1.0.0-beta1

package.json

@@ -5,3 +5,3 @@ {
     "email" : "[e-mail]",
-    "version": "1.0.0-alpha4"
+    "version": "1.0.0-beta1"
 }

README.md

 # ballerina-grid
 Custom CSS responsive table-like grid system.
+
+### Why ballerina?
+
+It's flexible, beautifull and do things that almost no one can do.
+
+## Getting started
+
+You will need an structure that remembers a table, but it's more grid friendly than usual tables.
+
+### Install
+
+You can download the source directly from here and link the CSS files.
+
+**OR**
+
+You can install it via NPM and link the CSS files anyway. :p
+
+By NPM you can control the version of the `ballerina-grid` you are using and also can easly update the package when updates are released!
+
+```
+npm install ballerina-grid --save
+```
+
+### Setting your HTML
+
+#### The container
+
+First of all, will you create a container: `<div class="ballerina">`.
+
+That container supports some optional classes:
+
+| Optional Class | Variations | Description | 
+|---|---|---|
+| `.ballerina-<breakpoint-size>` | `us`, `xs`, `sm`, `md`, `lg` | Responsive classes in which `<sizes>` are breakpoints for turning the ballerina into a flexible table-like or a simple block element. |    
+| `.ballerina-align-<alignment>` | `tpo`, `middle`, `bottom`  | This will vertically align your columns inside a `.ballerina-row` (see next step).  |   
+|  `.ballerina-force` | `null` | Never lets `.ballerina` be turned into a block element. |   
+|  `.ballerina-fluid` | `null` | Makes `.ballerina` less adaptative but gives you more control. (less table behavior and more div behavior) |   
+
+#### The row
+
+Inside your container you can have as many rows as you want: `<div class="ballerina-row">`. Inside your rows you will put your columns.
+
+```html
+<div class="ballerina">
+
+    <div class="ballerina-row">...</div>
+
+    <div class="ballerina-row">...</div>
+
+    <div class="ballerina-row">...</div>
+
+    ...
+    
+</div>
+```
+
+#### The column
+
+Finally the column element is: `<div class="ballerina-col">`.
+
+Columns can have any child you want and **more**, columns can have a `<div class="ballerina">` inside it.
+
+So your final structure will be something like:
+
+```html
+
+<div class="ballerina">
+
+
+    <div class="ballerina-row">
+    
+        <div class="ballerina-col">...</div>
+    
+        <div class="ballerina-col">...</div>
+    
+    </div><!-- /.ballerina-row -->
+    
+
+    <div class="ballerina-row">
+    
+        <div class="ballerina-col">...</div>
+    
+        <div class="ballerina-col">...</div>
+    
+        <div class="ballerina-col">...</div>
+        
+    </div><!-- /.ballerina-row -->
+    
+
+    <div class="ballerina-row">
+    
+        <div class="ballerina-col">
+        
+        
+            <div class="ballerina">
+            
+
+                <div class="ballerina-row">
+
+                    <div class="ballerina-col">...</div>
+                    
+                </div><!-- /.ballerina-row -->
+                
+                
+            </div><!-- /.ballerina -->
+            
+            
+        </div><!-- /.ballerina-col -->
+            
+        <div class="ballerina-col">...</div><!-- /.ballerina-col -->
+        
+    </div><!-- /.ballerina-row -->
+    
+
+    ...
+    
+    
+</div><!-- /.ballerina -->
+```

No alert changes

Improved metrics

Total package byte prevSize

10720

increased by41.26%

Number of lines in readme file

122

increased by3966.67%

No dependency changes