From dbca766820526243be7fcd280187fb492262cf1f Mon Sep 17 00:00:00 2001 From: vaporwave98 Date: Tue, 3 Jan 2017 15:50:12 +0100 Subject: [PATCH 01/37] Update changelog --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c2e889..f9d47fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ # Changelog +## 0.3.0 (03-01-2016) +- Changed typography. + [Awesome Typography](https://vaporwave98.github.io/awesome-typography) +- Redo table styles. +- Add headings and paragraph support in hero (ion-hero-header and ion-hero-paragraph are + now depreciated). +- Add new components (ion-select). + ## 0.2.0 (31-12-2016) - Added support for new fonts. - Material Icons now comes bundled with the framework. From df04ad7d67ab158e55a434fdc5204e22a89185f6 Mon Sep 17 00:00:00 2001 From: vaporwave98 Date: Tue, 3 Jan 2017 15:51:06 +0100 Subject: [PATCH 02/37] Change table styles --- stylus/modules/table.styl | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/stylus/modules/table.styl b/stylus/modules/table.styl index 5e9a166..cec8f89 100644 --- a/stylus/modules/table.styl +++ b/stylus/modules/table.styl @@ -1,17 +1,28 @@ .ion-table { - border-collapse: separate; + border-collapse: collapse; border-spacing: 0; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); - tr:first-child { - background-color: getcolor('teal'); + thead { + background-color: #f5f5f5; + + th { + font-weight: 600; + } + } + + tbody { + tr { + border-bottom: 1px solid #eee; + } + + tr:last-child { + border: 0; + } + } - td { - color: table.td-color; - } + td, + th { + padding: 15px; + text-align: left; } - - tr td { - padding: 12px; - } -} +} From f23ab2a2f07896317b1e9a22e629d37c7964cae8 Mon Sep 17 00:00:00 2001 From: vaporwave98 Date: Tue, 3 Jan 2017 15:51:52 +0100 Subject: [PATCH 03/37] Update website table example --- docs/index.html | 89 +++++++++++++++++-------------------------------- 1 file changed, 30 insertions(+), 59 deletions(-) diff --git a/docs/index.html b/docs/index.html index d3ef4a3..fad756c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -167,65 +167,36 @@

Colors

Tables

-
-
-

World Population

- - - - - - - - - - - - - - - - - - - - - -
YearPopulationChange
19905,3 billion1.7%
20006,1 billion1.3%
20106,9 billion1.8%
-

- http://www.geohive.com/earth/his_history3.aspx -

-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
IDOperating system
1Windows
2Mac
3Linux
5Free BSD
6Mike OS
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + +
YearPopulationChange
19905,3 billion1.7%
20006,1 billion1.3%
20106,9 billion1.8%
+ +

+ http://www.geohive.com/earth/his_history3.aspx + 

 <table class="ion-table">

From 364a3d6a732df0d6615bf3caeaacc7fbdb46094a Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:53:18 +0100
Subject: [PATCH 04/37] Change base typography

---
 stylus/base/base.styl | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/stylus/base/base.styl b/stylus/base/base.styl
index 5a90978..dcf310f 100644
--- a/stylus/base/base.styl
+++ b/stylus/base/base.styl
@@ -7,35 +7,36 @@
     -webkit-font-smoothing: antialiased;
 
     p {
-        line-height: 1.5em;
+        line-height: base.line-height;
+        font-size: 1.1em;
     }
 
     h1, h2, h3, h4, h5, h6 {
-        font-weight: 400;
+        font-weight: 300;
     }
 
     h1 {
-        font-size: 2.0em;
+        font-size: 2.6179em;
     }
 
     h2 {
-        font-size: 1.75em;
+        font-size: 2.0581em;
     }
 
     h3 {
-        font-size: 1.5em;
+        font-size: 1.618em;
     }
 
     h4 {
-        font-size: 1.25em;
+        font-size: 1.272em;
     }
 
     h5 {
-        font-size: 1.0em;
+        font-size: 1em;
     }
 
     h6 {
-        font-size: 0.75em;
+        font-size: 0.7862em;
     }
 }
 

From 71976ae0490a411bc7398a09cf9d50e738fed2e8 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:55:01 +0100
Subject: [PATCH 05/37] Move font size to it's own variable

---
 stylus/base/base.styl | 2 +-
 stylus/theme.styl     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/stylus/base/base.styl b/stylus/base/base.styl
index dcf310f..7b3e036 100644
--- a/stylus/base/base.styl
+++ b/stylus/base/base.styl
@@ -1,6 +1,6 @@
 .ion-base {
     color: base.font-color;
-    font: base.font;
+    font: base.font-size base.font;
     margin: 0;
 
     -moz-osx-font-smoothing: grayscale;
diff --git a/stylus/theme.styl b/stylus/theme.styl
index 405b48a..99d4cff 100644
--- a/stylus/theme.styl
+++ b/stylus/theme.styl
@@ -4,8 +4,9 @@
 
 base = {
     font-color: #212121
+    font-size: 1em,
 };
-base['font'] = 1.0em 'Segoe UI', 'San Francisco', 'Helvetica Neue', 'Arial', 'sans-serif';
+base['font'] = 'Segoe UI', 'San Francisco', 'Helvetica Neue', 'Arial', 'sans-serif';
 
 $main-padding = 15px;
 $brand-font-size = 1.7em;

From 71ba68d46a0beba81c1f88e482829043357ca048 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:56:50 +0100
Subject: [PATCH 06/37] Change base font color

---
 stylus/theme.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/theme.styl b/stylus/theme.styl
index 99d4cff..6618c83 100644
--- a/stylus/theme.styl
+++ b/stylus/theme.styl
@@ -3,7 +3,7 @@
 // ====
 
 base = {
-    font-color: #212121
+    font-color: #263238,
     font-size: 1em,
 };
 base['font'] = 'Segoe UI', 'San Francisco', 'Helvetica Neue', 'Arial', 'sans-serif';

From e8a56570c442e89fa84b578401987760b226f2b3 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:58:07 +0100
Subject: [PATCH 07/37] Add line-height variable

---
 stylus/modules/code.styl | 1 +
 stylus/theme.styl        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index e97ea02..cd6f410 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -6,6 +6,7 @@
 	font-family: monospace;
 	font-size: 1.3em;
 	line-height: 1.5em;
+	line-height: base.line-height;
 
 	&.code-block {
 		background-color: code.block-bg;
diff --git a/stylus/theme.styl b/stylus/theme.styl
index 6618c83..e885eb3 100644
--- a/stylus/theme.styl
+++ b/stylus/theme.styl
@@ -5,6 +5,7 @@
 base = {
     font-color: #263238,
     font-size: 1em,
+    line-height: 1.6
 };
 base['font'] = 'Segoe UI', 'San Francisco', 'Helvetica Neue', 'Arial', 'sans-serif';
 

From 3aae21497e995897051c57eda5a554d5bcdad52d Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:58:25 +0100
Subject: [PATCH 08/37] Change code text styles

---
 stylus/modules/code.styl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index cd6f410..64b0ac1 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -4,14 +4,14 @@
 	color: code.color;
 	display: inline-block;
 	font-family: monospace;
-	font-size: 1.3em;
-	line-height: 1.5em;
+	font-size: 1.1em;
 	line-height: base.line-height;
 
 	&.code-block {
 		background-color: code.block-bg;
 		box-sizing: border-box;
 		color: code.block-color;
+		font-size: 1.3em;
 		padding: 15px;
 		white-space: pre-wrap;
 		width: 100%;

From ca4491761d8213d8ae160d7a3519eeee415f2e34 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:59:00 +0100
Subject: [PATCH 09/37] Use headings instead of classes for hero

---
 stylus/modules/hero.styl | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/stylus/modules/hero.styl b/stylus/modules/hero.styl
index de3a08b..8d52244 100644
--- a/stylus/modules/hero.styl
+++ b/stylus/modules/hero.styl
@@ -13,15 +13,23 @@
         margin: 0;
     }
 
-    .ion-hero-header {
-        color: #424242;
-        font-size: 4.5em;
-        font-weight: normal;
-        margin: 0;
-     }
+    h1 {
+      font-size: 8.5em;
+    }
 
-    .ion-hero-paragraph {
-         color: #424242;
-         font-size: 1.6em;
-     }
+    h2 {
+      font-size: 6.5em;
+    }
+
+    h3 {
+      font-size: 4.5em;
+    }
+
+    h4 {
+      font-size: 2.5em;
+    }
+
+    p {
+      font-size: 1.5em;
+    }
 }

From 82fbb5f0d5e53deb4d19f62f06c5ee781786c64a Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 3 Jan 2017 15:59:11 +0100
Subject: [PATCH 10/37] Update webpage

---
 docs/index.html | 35 +++++++++++++++++++++++++----------
 docs/style.css  |  8 ++++++++
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index fad756c..2dd5b63 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,7 +6,7 @@
     
     
     
-    
+    
     
     
     
@@ -40,8 +40,8 @@
 
     

         

-            
kernel.css

-            
simplicity done right

+            
kernel.css

+            
simplicity done right

             Download
         

     

@@ -97,13 +97,21 @@ 
Base

         

         
Headings

 
-        
Heading 1

-        
Heading 2

-        
Heading 3

-        
Heading 4

-        
Heading 5

-        
Heading 6

-        
Paragraph

+        
Heading 1 
2.6179em / 39px

+        
Heading 2 
2.0681em / 31px

+        
Heading 3 
1.618em / 25px

+        
Heading 4 
1.272em / 24px

+        
Heading 5 
1em / 20px

+        
Heading 6 
0.7862em / 16px

+
+        
Paragraph
+            
1.0rem / 16px

+        

+
+        

+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        

 
         
 <p class="p">Hello, World!</p>

@@ -146,6 +154,13 @@ 
Inputs

         
         
 
+        
+
         

         
Colors

 
diff --git a/docs/style.css b/docs/style.css
index ccbdf6a..a198540 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -23,6 +23,14 @@ nav .github-icon {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 
+.heading-font-label {
+    background-color: #eee;
+    border-radius: 5px;
+    display: inline-block;
+    font-size: 12px;
+    padding: 5px;
+}
+
 .block-margin {
     margin-bottom: 68px;
 }

From 457a644c20eb1bfc431b87b3a11c454622002a5b Mon Sep 17 00:00:00 2001
From: Jim Christian 
Date: Thu, 5 Jan 2017 08:57:15 +0100
Subject: [PATCH 11/37] Fix block-margin not aligning properly

---
 docs/style.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/style.css b/docs/style.css
index a198540..c085334 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -6,7 +6,6 @@ main {
     min-height: 100vh;
 }
 
-
 /* Remove border added by code-prettify */
 
 pre {
@@ -32,5 +31,5 @@ nav .github-icon {
 }
 
 .block-margin {
-    margin-bottom: 68px;
+    margin-bottom: 73px;
 }

From 68133f93e0cb296042dff1f019ed4690421e7686 Mon Sep 17 00:00:00 2001
From: Jim Christian 
Date: Thu, 5 Jan 2017 08:57:22 +0100
Subject: [PATCH 12/37] Increase code font-size

---
 stylus/modules/code.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index 64b0ac1..c43aebb 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -4,7 +4,7 @@
 	color: code.color;
 	display: inline-block;
 	font-family: monospace;
-	font-size: 1.1em;
+	font-size: 1.2em;
 	line-height: base.line-height;
 
 	&.code-block {

From c26e4517920e34e05e1f259fb4fa7ae918904b17 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 10 Jan 2017 15:40:32 +0100
Subject: [PATCH 13/37] Remove lies

---
 docs/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index 2dd5b63..077cfae 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -118,7 +118,6 @@ 
Heading 6 
0.7862em / 16px

 
         

         
Inputs

-        
Press the buttons to view it's code.

 
         
         

From a1a7e1312bf282317c6185e0e9693341e9b3858f Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Tue, 10 Jan 2017 15:46:14 +0100
Subject: [PATCH 14/37] Rename comment to kernel.css

---
 stylus/base/util.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/base/util.styl b/stylus/base/util.styl
index 277784c..60473f9 100644
--- a/stylus/base/util.styl
+++ b/stylus/base/util.styl
@@ -1,5 +1,5 @@
 /*
- * Ion Framework utility classes.
+ * kernel.css utility classes.
 */
 
 .ion-anchor {

From d489cd99c9409c02709f7d623e4fa416b9fbc08d Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:22:58 +0100
Subject: [PATCH 15/37] changes to grid

- 16 column grid.
- changes to margin and padding sizes.
---
 stylus/base/grid.styl | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/stylus/base/grid.styl b/stylus/base/grid.styl
index 0e2df62..7640375 100644
--- a/stylus/base/grid.styl
+++ b/stylus/base/grid.styl
@@ -1,15 +1,21 @@
 .ion-grid {
 	display: flex;
 
-	for num in (1...11) {
+	for num in (1...17) {
 		.ion-col-{num} {
 			flex: num;
-			margin: $main-padding;
-			padding: $main-padding 0 $main-padding 0;
 		}
 	}
 }
 
+[class*='ion-col-'] {
+  margin-right: $main-padding * 2;
+}
+
+[class*='ion-col-']:last-of-type {
+  margin-right: 0;
+}
+
 .ion-container {
 	box-sizing: border-box;
 	margin-left: auto;
@@ -29,9 +35,7 @@
 		width: 100%;
 	}
 
-	for num in (1...11) {
-		.ion-grid .ion-col-{num} {
-			margin: $main-padding 0;
-		}
+	[class*='ion-col-'] {
+	  margin-right: 0;
 	}
 }

From c9c0730e3be0fb0bb57b89016f4faae83932ffaa Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:23:37 +0100
Subject: [PATCH 16/37] Add scroll on code-block

---
 stylus/modules/code.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index c43aebb..5da36e8 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -11,6 +11,7 @@
 		background-color: code.block-bg;
 		box-sizing: border-box;
 		color: code.block-color;
+		overflow-x: auto;
 		font-size: 1.3em;
 		padding: 15px;
 		white-space: pre-wrap;

From 21d53bd10a554bd20c94bb6ed5d1bff88a720758 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:23:49 +0100
Subject: [PATCH 17/37] Rename code-block module to ion-code-block

---
 stylus/modules/code.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index 5da36e8..6dd2f47 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -7,7 +7,7 @@
 	font-size: 1.2em;
 	line-height: base.line-height;
 
-	&.code-block {
+	&.ion-code-block {
 		background-color: code.block-bg;
 		box-sizing: border-box;
 		color: code.block-color;

From e59667d26e78d43f1c8f74429df4bb8ba2c2e584 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:25:31 +0100
Subject: [PATCH 18/37] Add ion-vertical-center util class

This can be used for centering text in the hero.
---
 stylus/base/util.styl | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/stylus/base/util.styl b/stylus/base/util.styl
index 60473f9..418ac9a 100644
--- a/stylus/base/util.styl
+++ b/stylus/base/util.styl
@@ -32,3 +32,10 @@
 .ion-center {
 	margin: auto;
 }
+
+.ion-vertical-center {
+	position: relative;
+	text-align: center;
+	transform: translateY(-50%);
+	top: 50%;
+}

From c402ccb09f6002c3f335d615f8c628bee9edd704 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:30:02 +0100
Subject: [PATCH 19/37] const => var in order to increase support for older
 browsers

---
 docs/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 077cfae..b84f576 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -346,11 +346,11 @@ 
Blog

          * Progressbar code
          **/
 
-        const btnProgress = $('#btn-activate-progress');
-        const progress1 = $('#progress-ex1 .ion-progress');
+        var btnProgress = $('#btn-activate-progress');
+        var progress1 = $('#progress-ex1 .ion-progress');
 
-        let triggered = false;
-        let count = 0;
+        var triggered = false;
+        var count = 0;
 
         btnProgress.click(function() {
             triggered = true;

From a4087043d83d4c9436dfa32022843c97b192cb72 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:50:53 +0100
Subject: [PATCH 20/37] Change require order

---
 stylus/style.styl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stylus/style.styl b/stylus/style.styl
index 5459bf4..da07dd7 100644
--- a/stylus/style.styl
+++ b/stylus/style.styl
@@ -7,10 +7,10 @@
 // http://easings.net/en
 
 /* Base requires */
+@require 'base/variables';
+@require 'base/util';
 @require 'base/base';
 @require 'base/grid';
-@require 'base/util';
-@require 'base/variables';
 
 /* Generic requires */
 @require 'generic/button';

From fe20a5e639ee1f3b7f6b750a55a3523e3816c0cf Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:51:07 +0100
Subject: [PATCH 21/37] Extend .ion-section in grid

---
 stylus/base/grid.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stylus/base/grid.styl b/stylus/base/grid.styl
index 7640375..5f48bec 100644
--- a/stylus/base/grid.styl
+++ b/stylus/base/grid.styl
@@ -1,4 +1,5 @@
 .ion-grid {
+	@extend .ion-section;
 	display: flex;
 
 	for num in (1...17) {

From 5e63802f74553a9dfac22948c0f88fbacf3026e0 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 14:51:22 +0100
Subject: [PATCH 22/37] Reduce default paragraph size

---
 stylus/base/base.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stylus/base/base.styl b/stylus/base/base.styl
index 7b3e036..e56ad74 100644
--- a/stylus/base/base.styl
+++ b/stylus/base/base.styl
@@ -8,7 +8,7 @@
 
     p {
         line-height: base.line-height;
-        font-size: 1.1em;
+        font-size: 1.05em;
     }
 
     h1, h2, h3, h4, h5, h6 {

From 995e763355192402337889769d92b0e838eccd61 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:02:00 +0100
Subject: [PATCH 23/37] Rename btn-x2 to btn-lg

---
 stylus/generic/button.styl | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/stylus/generic/button.styl b/stylus/generic/button.styl
index 3692a12..940bd81 100644
--- a/stylus/generic/button.styl
+++ b/stylus/generic/button.styl
@@ -11,22 +11,6 @@
     transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
     text-transform: uppercase;
 
-    &.ion-btn-x2 {
-        background-color: btn-x2.bg;
-        color: #212121;
-        font-size: 1.1em;
-        height: 50px;
-        line-height: 50px;
-
-      &:hover {
-        background-color: darken(btn-x2.bg, 10%);
-      }
-
-      &:active {
-        transform: scale(0.95);
-      }
-    }
-
     &.ion-btn-default {
       background-color: btn-default.bg;
       border-radius: 3px;
@@ -109,6 +93,12 @@
         transform: scale(0.95);
       }
     }
+
+    &.ion-btn-lg {
+        font-size: 1.1em;
+        height: 50px;
+        line-height: 50px;
+    }
 }
 
 a.ion-button {

From 9c6dab483c17de5329ba6abb2fd761544113d785 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:16:53 +0100
Subject: [PATCH 24/37] Update readme issue tracking section

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7f74ed2..374a138 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,9 @@ I have probably made lots of typos :)
 Useful links
 ------------
  * Github page: http://github.com/ionogy/kernel.css
- * Bug reporter: http://...
+ * Issue tracker: https://github.com/ionogy/kernel.css/issues
+
+Please don't hesitate to report any issues you may find.
 
 Documentation
 -------------

From 1b5a638819276a6debbc57fb28795fcf0f2bb4ad Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:17:03 +0100
Subject: [PATCH 25/37] Update webpage

---
 docs/index.html | 218 +++++++++++++++++++++++++++++++++++-------------
 docs/style.css  |  44 +++++++++-
 2 files changed, 205 insertions(+), 57 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index b84f576..f1063d2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -13,7 +13,7 @@
 
 
 
-    

+    

         
@@ -38,42 +38,42 @@
         
     

 
-    

-        

+    

+        

             
kernel.css

             
simplicity done right

-            Download
+            Download
         

     

 
     

         

-            

+            

                 
Built for any kind of job

-                
Whether you're making a website, webapp or a dashboard app, this framework got you covered!

+                
Whether you're making a website, web app or a dashboard app, this framework got you covered!

             

-            

+            

                 
Far from reaching it's potential

                 
If you like this project and would like to help out, you may do so on github. This project is ever improving.

             

-            

+            

                 
Simple to use

                 
The Kernel Framework is designed for everyone from the beginner to the novience. It makes everybody's job easier.

             

         

 
         

-            

+            

                 
Lightweight

-                
We aim to make this a super lightweight, fully fledged framework that wont slow down your website's loading times

+                
We aim to make this a super lightweight, fully fledged framework that wont slow down your website's loading times.

             

-            

+            

                 
A solid foundation for your project

                 
The Kernel Framework does not aim to do all the work for you by any means, it is meant to be a generic foundation that can be used for any type of project.

             

-            

+            

                 
Compatible with other frameworks

-                
Because ion uses prefixes for all its classes (ion-), it can be used with any other CSS framework. Mix and match
+                
Because ion uses prefixes for all its classes (ion-), it can be used with most other CSS framework. Mix and match
                     
                         
                         
@@ -88,9 +88,9 @@ 
Compatible with other frameworks

         

         
Base

 
-        
The ion-base class contains the styles for typography, the headings and paragraphs.

+        
The ion-base class contains the styles for typography, headings and paragraphs.

 
-
<body class="ion-base">
+        
<body class="ion-base">
 ...
 </body>

 
@@ -113,20 +113,99 @@ 
Heading 6 
0.7862em / 16px

             in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         

 
-        
+        
 <p class="p">Hello, World!</p>

 
+        

+        
Grid

+
+        
kernel.css comes with a 16 column grid system.

+
+        

+            

+                
col-12

+            

+            

+                
col-4

+            

+        

+
+        

+            

+                
col-10

+            

+            

+                
col-6

+            

+        

+
+        

+            

+                
col-8

+            

+            

+                
col-8

+            

+        

+
+        

+            

+                
col-6

+            

+            

+                
col-10

+            

+        

+
+        

+            

+                
col-4

+            

+            

+                
col-12

+            

+        

+
+        

+            

+                
col-2

+            

+            

+                
col-14

+            

+        

+
+        

+        
Hero

+
+        

+            
Welcome

+        

+
+        
+<div class="ion-hero">
+    <h3>Welcome</h3>
+</div>

+
+
You may use the "ion-vertical-center" class to vertically center full height hero's.

+
+Example
+
+<div class="ion-hero ion-vertical-center" style="height: 100vh;">
+<h3>Welcome</h3>
+</div>

+
         

         
Inputs

 
-        
-        
-        
-        
-        
-        
+        
+        
+        
+        
+        
+        
 
-        
+        
 <!-- Default Button -->
 <button class="ion-button btn-default">Button</button>
 
@@ -144,6 +223,9 @@ 
Inputs

 
 <!-- Minimal Button -->
 <button class="ion-button btn-minimal">Button</button>
+
+<!-- Large button -->
+Just append the "ion-btn-lg" class to any of the button types.
 
 You may also use the "ion-button" class with anchor tags and button inputs.
 

@@ -164,24 +246,35 @@ 
Inputs

         
Colors

 
         

-            

-            

-            

-            

-            

-            

-            

+            

+            

+            

+            

+            

+            

+            

         

 
-        
+        
 <div class="ion-bg-{color}"></div>

 
         
kernel.css includes predefined color classes. These are great for prototyping your ideas quickly, but you may not want to pollute your dom with a bunch of color classes.

 
+        

+        
Util

+
+        
kernel.css comes bundled with a few useful utility classes.

+        
+<!-- Anchor -->
+<a class="ion-anchor" href="#">
+
+<!-- Horizontal Rule (hr) -->
+<hr class="ion-hr">

+
         

         
Tables

 
-        
+        

@@ -212,21 +305,33 @@ 
Tables
http://www.geohive.com/earth/his_history3.aspx

 
-        
+        
 <table class="ion-table">
-    <tr>
-        <td>ID</td>
-        <td>Operating System</td>
-    </tr>
-    <tr>
-        <td>2</td>
-        <td>Mac</td>
-    </tr>
-    <tr>
-        <td>3</td>
-        <td>Linux</td>
-    </tr>
-</div>
+    <thead>
+        <tr>
+            <th>Year</th>
+            <th>Population</th>
+            <th>Change</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>1990</td>
+            <td>5,3 billion</td>
+            <td>1.7%</td>
+        </tr>
+        <tr>
+            <td>2000</td>
+            <td>6,1 billion</td>
+            <td>1.3%</td>
+        </tr>
+        <tr>
+            <td>2010</td>
+            <td>6,9 billion</td>
+            <td>1.8%</td>
+        </tr>
+    </tbody>
+</table>
 

 
         

@@ -264,7 +369,7 @@ 
Comments:
 Great post, keep it up!
             
         
 
-
+        
 <div class="ion-card ion-card-sm">
     <div class="ion-card-header">
         <h3>Deer</h3>
@@ -279,14 +384,15 @@ 
Comments:
 Great post, keep it up!
         

         
Code

 
-        
The java language was made in 1994 by James Gosling. Compared to other languages it runs in the jvm. Here is a little code snippet of the well known Hello World code sample:

-        System.out.println("Hello World");
-        


-        
And here is the full code sample:

-        
-public static void main(String[] args) {
-    System.out.println("Hello World");
-}

+        
The code class is used for displaying code. The first way to do this is inline code like this, and code blocks: 

+
+        
+Inline code
+<code class="ion-code">...</code>

+
+        
+Code block
+<pre class="ion-code ion-code-block"><code>...</code></pre>

 
         

         
Progressbar

@@ -297,7 +403,7 @@ 
Progressbar

 
         
 
-        
+        
 <div class="ion-progressbar" style="width: 75%">
     <div class="ion-progress"></div>
 </div>

diff --git a/docs/style.css b/docs/style.css
index c085334..18cd18d 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -12,13 +12,21 @@ pre {
     border: 0 !important;
 }
 
+header {
+    border-bottom: 1px solid #eee;
+}
+
 nav .github-icon {
     height: 24px;
     margin-right: 5px;
     vertical-align: middle;
 }
 
-.ion-hero .hero-btn {
+.hero {
+    height: 500px;
+}
+
+.hero .hero-btn {
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
 }
 
@@ -33,3 +41,37 @@ nav .github-icon {
 .block-margin {
     margin-bottom: 73px;
 }
+
+.grid-example {
+    margin: 15px 0;
+}
+
+.grid-example .grid-example-item {
+    background: #eee;
+    border-radius: 5px;
+    margin-right: 20px;
+}
+
+.grid-example .grid-example-item[class*='ion-col-']:last-of-type {
+  margin-right: 0;
+}
+
+.grid-example p {
+    margin: 0;
+    text-align: center;
+}
+
+/* For small screen sizes */
+@media (max-width: 800px) {
+    .block-margin {
+        margin-bottom: 0;
+    }
+
+    .grid-example {
+        margin: 15px 0;
+    }
+
+    .grid-example .grid-example-item {
+        margin: 10px 0;
+    }
+}

From a2b716d17911954c21cc6b42016e0eee9dfb504c Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:18:47 +0100
Subject: [PATCH 26/37] Remove ion-container from hero

Use ion-vertical-center instead.
---
 stylus/modules/hero.styl | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/stylus/modules/hero.styl b/stylus/modules/hero.styl
index 8d52244..196ad5b 100644
--- a/stylus/modules/hero.styl
+++ b/stylus/modules/hero.styl
@@ -2,12 +2,6 @@
     background: linear-gradient(to right, #fafafa, #eeeeee);
     height: 500px;
 
-    .ion-container {
-        position: relative;
-        text-align: center;
-        transform: translateY(-50%);
-        top: 50%;
-    }
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;

From 5c2ea2bf875e1b8471550bbd439204079494fcb0 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:19:05 +0100
Subject: [PATCH 27/37] Use padding for hero instead of a fixed height

---
 stylus/modules/hero.styl | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/stylus/modules/hero.styl b/stylus/modules/hero.styl
index 196ad5b..1df86e4 100644
--- a/stylus/modules/hero.styl
+++ b/stylus/modules/hero.styl
@@ -1,7 +1,8 @@
 .ion-hero {
     background: linear-gradient(to right, #fafafa, #eeeeee);
-    height: 500px;
-
+    box-sizing: border-box;
+    padding: 75px 0;
+    text-align: center;
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;

From ac6c45cf94a78b5cdb015b32e3e7e465664bc1a0 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:20:05 +0100
Subject: [PATCH 28/37] Set table to 100% width by default

---
 stylus/modules/table.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stylus/modules/table.styl b/stylus/modules/table.styl
index cec8f89..8de7000 100644
--- a/stylus/modules/table.styl
+++ b/stylus/modules/table.styl
@@ -1,6 +1,7 @@
 .ion-table {
     border-collapse: collapse;
     border-spacing: 0;
+    width: 100%;
 
     thead {
         background-color: #f5f5f5;

From 4441db204a35d773c650fe0e43bf7503508fef19 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:20:21 +0100
Subject: [PATCH 29/37] Update changelog

---
 CHANGELOG.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9d47fb..fe8e6f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,11 +1,13 @@
 # Changelog
 
-## 0.3.0 (03-01-2016)
+## 0.3.0 (11-01-2016)
 - Changed typography.
   [Awesome Typography](https://vaporwave98.github.io/awesome-typography)
+- Changed to a 16 column grid.
 - Redo table styles.
 - Add headings and paragraph support in hero (ion-hero-header and ion-hero-paragraph are
-  now depreciated).
+  now removed).
+- Rename ion-btn-x2 to ion-btn-lg
 - Add new components (ion-select).
 
 ## 0.2.0 (31-12-2016)

From 25156a0a4343de60371e74df55692a33fb9504c7 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:21:46 +0100
Subject: [PATCH 30/37] Update kernel.css url

---
 docs/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/index.html b/docs/index.html
index f1063d2..4977ad2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -6,7 +6,7 @@
     
     
     
-    
+    
     
     
     

From 9adbf1fef9ca2acae5300c7575859937e647c3c8 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:28:35 +0100
Subject: [PATCH 31/37] Update readme example

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 374a138..3a06cb0 100644
--- a/README.md
+++ b/README.md
@@ -43,15 +43,15 @@ Installation
 ============
 Simple. Just include these tags in your html.
 ```
-
-
+
+
 ```
 
 Navigation code example
 -----------
 ```
 
-  

+  

     
kernel.css

 
     

 
             

-                

-                    
Welcome

-                

+                
Welcome

             

 
             


From d41989d33fb128b86ff04f48e3cdee70ecf30d7a Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 15:56:13 +0100
Subject: [PATCH 35/37] Fix splitview bug

---
 stylus/modules/splitview.styl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stylus/modules/splitview.styl b/stylus/modules/splitview.styl
index 29bb9c3..0f52a89 100644
--- a/stylus/modules/splitview.styl
+++ b/stylus/modules/splitview.styl
@@ -1,5 +1,6 @@
 .ion-splitview {
     @extend .ion-grid;
+    margin: 0;
 
   .ion-splitview-main {
     flex: 1;

From 11305bf02343c0b80ef3b7cfe59a016a88e12022 Mon Sep 17 00:00:00 2001
From: vaporwave98 
Date: Wed, 11 Jan 2017 16:05:44 +0100
Subject: [PATCH 36/37] Update changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a412d53..077c9fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 ## 0.3.0 (11-01-2016)
 - Changed typography.
   [Awesome Typography](https://vaporwave98.github.io/awesome-typography)
-- Changed to a 16 column grid.
+- Switched to a 16 column grid.
 - Redo table styles.
 - Add headings and paragraph support in hero (ion-hero-header and ion-hero-paragraph are
   now removed).

From 2cadc06932f3276fda4e1122a2984ee43bfc4ddd Mon Sep 17 00:00:00 2001
From: Jim Christian 
Date: Wed, 11 Jan 2017 22:41:51 +0100
Subject: [PATCH 37/37] Version 0.3.0

---
 js/kernel.js      | 2 +-
 package.json      | 2 +-
 stylus/style.styl | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/kernel.js b/js/kernel.js
index 4e7580f..05c3883 100644
--- a/js/kernel.js
+++ b/js/kernel.js
@@ -1,5 +1,5 @@
 /*
-    kernel.css v0.2.0
+    kernel.css v0.3.0
     GPL License
     github.com/ionogy/kernel.css
 */
diff --git a/package.json b/package.json
index 981cf1e..872831a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kernel.css",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "The CSS framework built for any kind of task",
     "stylintrc": ".stylintrc",
     "scripts": {
diff --git a/stylus/style.styl b/stylus/style.styl
index da07dd7..83836ff 100644
--- a/stylus/style.styl
+++ b/stylus/style.styl
@@ -1,5 +1,5 @@
 /*!
-    kernel.css v0.2.0
+    kernel.css v0.3.0
     GPL License
     github.com/ionogy/kernel.css
 */


             
                 

                     Year