Adding documentation and exchange column name.

README.md

@@ -5,7 +5,51 @@ GRID system in pure CSS, simple, flexible and scalable for larger projects.
 
 ## Documentation
 
-Coming Soon...
+### Container
+Centralize content of your page using the `.container`.
+
+	<div class=".container">
+		<!-- contents here -->
+	</div>
+
+### Grid
+The grid is a basic system, creating columns `.column` and lines `.row`.
+
+	<div class="row">
+		<div class="column">
+			.column
+		</div>
+	</div>
+	<div class="row">
+		<div class="column column-3">
+			.column .column-3
+		</div>
+		<div class="column column-3">
+			.column .column-3
+		</div>
+		<div class="column column-3">
+			.column .column-3
+		</div>
+		<div class="column column-3">
+			.column .column-3
+		</div>
+	</div>
+	<div class="row">
+		<div class="column column-6">
+			.column .column-6
+		</div>
+		<div class="column column-6">
+			.column .column-6
+		</div>
+	</div>
+	<div class="row">
+		<div class="column column-8">
+			.column .column-4
+		</div>
+		<div class="column column-4">
+			.column .column-4
+		</div>
+	</div>
 
 ## Versioning
 

src/simba.css

@@ -57,7 +57,7 @@
 /* 
   Columns 
 */
-.col {
+.column {
   display: inline-block;
   vertical-align: top;
   min-height: 1px;
@@ -69,50 +69,50 @@
   *display: inline;
 }
 
-.col-1 {
+.column-1 {
   width: 8.333333333333332%;
 }
 
-.col-2 {
+.column-2 {
   width: 16.666666666666664%;
 }
 
-.col-3 {
+.column-3 {
   width: 25%;
 }
 
-.col-4 {
+.column-4 {
   width: 33.33333333333333%;
 }
 
-.col-5 {
+.column-5 {
   width: 41.66666666666667%;
 }
 
-.col-6 {
+.column-6 {
   width: 50%;
 }
 
-.col-7 {
+.column-7 {
   width: 58.333333333333336%;
 }
 
-.col-8 {
+.column-8 {
   width: 66.66666666666666%;
 }
 
-.col-9 {
+.column-9 {
   width: 75%;
 }
 
-.col-10 {
+.column-10 {
   width: 83.33333333333334%;
 }
 
-.col-11 {
+.column-11 {
   width: 91.66666666666666%;
 }
 
-.col-12 {
+.column-12 {
   width: 100%;
 }