diff --git a/CHANGELOG.md b/CHANGELOG.md index 2c2e889..077c9fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Changelog +## 0.3.0 (11-01-2016) +- Changed typography. + [Awesome Typography](https://vaporwave98.github.io/awesome-typography) +- 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). +- Rename ion-btn-x2 to ion-btn-lg +- Add new components (ion-select). +- Alert is no longer fixed by default. + ## 0.2.0 (31-12-2016) - Added support for new fonts. - Material Icons now comes bundled with the framework. diff --git a/README.md b/README.md index 7f74ed2..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
@@ -38,42 +38,42 @@
-
-
-

kernel.css

-

simplicity done right

- Download +
+
+

kernel.css

+

simplicity done right

+ 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,26 +88,113 @@

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>

 
         

         
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>

 
+        

+        
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

 
@@ -118,7 +205,7 @@ 
Inputs

         
         
 
-        
+        
 <!-- Default Button -->
 <button class="ion-button btn-default">Button</button>
 
@@ -136,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.
 

@@ -145,102 +235,103 @@ 
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.

 
         

-        
Tables

+        
Util

 
-        

-            

-                
World Population

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

-                

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

-            

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

+        
+<!-- Anchor -->
+<a class="ion-anchor" href="#">
 
-            

-                
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                    
-                        
-                        
-                    
-                
IDOperating system
1Windows
2Mac
3Linux
5Free BSD
6Mike OS

-            

-        

+<!-- Horizontal Rule (hr) -->
+<hr class="ion-hr">

 
-        
+        

+        
Tables

+
+        
+            
+                
+                    
+                    
+                    
+                
+            
+            
+                
+                    
+                    
+                    
+                
+                
+                    
+                    
+                    
+                
+                
+                    
+                    
+                    
+                
+            
+        
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">
-    <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>
 

 
         

@@ -278,7 +369,7 @@ 
Comments:
 Great post, keep it up!
-
+        
 <div class="ion-card ion-card-sm">
     <div class="ion-card-header">
         <h3>Deer</h3>
@@ -293,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

@@ -311,7 +403,7 @@ 
Progressbar

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

@@ -360,11 +452,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;
diff --git a/docs/style.css b/docs/style.css
index ccbdf6a..18cd18d 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -6,23 +6,72 @@ main {
     min-height: 100vh;
 }
 
-
 /* Remove border added by code-prettify */
 
 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);
 }
 
+.heading-font-label {
+    background-color: #eee;
+    border-radius: 5px;
+    display: inline-block;
+    font-size: 12px;
+    padding: 5px;
+}
+
 .block-margin {
-    margin-bottom: 68px;
+    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;
+    }
 }
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/base/base.styl b/stylus/base/base.styl
index 5a90978..e56ad74 100644
--- a/stylus/base/base.styl
+++ b/stylus/base/base.styl
@@ -1,41 +1,42 @@
 .ion-base {
     color: base.font-color;
-    font: base.font;
+    font: base.font-size base.font;
     margin: 0;
 
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
     p {
-        line-height: 1.5em;
+        line-height: base.line-height;
+        font-size: 1.05em;
     }
 
     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;
     }
 }
 
diff --git a/stylus/base/grid.styl b/stylus/base/grid.styl
index 0e2df62..5f48bec 100644
--- a/stylus/base/grid.styl
+++ b/stylus/base/grid.styl
@@ -1,15 +1,22 @@
 .ion-grid {
+	@extend .ion-section;
 	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 +36,7 @@
 		width: 100%;
 	}
 
-	for num in (1...11) {
-		.ion-grid .ion-col-{num} {
-			margin: $main-padding 0;
-		}
+	[class*='ion-col-'] {
+	  margin-right: 0;
 	}
 }
diff --git a/stylus/base/util.styl b/stylus/base/util.styl
index 277784c..418ac9a 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 {
@@ -32,3 +32,10 @@
 .ion-center {
 	margin: auto;
 }
+
+.ion-vertical-center {
+	position: relative;
+	text-align: center;
+	transform: translateY(-50%);
+	top: 50%;
+}
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 {
diff --git a/stylus/modules/alert.styl b/stylus/modules/alert.styl
index 1ce85c4..ba904d6 100644
--- a/stylus/modules/alert.styl
+++ b/stylus/modules/alert.styl
@@ -5,7 +5,6 @@
 	height: 40px;
 	line-height: 40px;
 	padding-left: 15px;
-	position: fixed;
 	width: 100%;
 	z-index: 999;
 
diff --git a/stylus/modules/code.styl b/stylus/modules/code.styl
index e97ea02..6dd2f47 100644
--- a/stylus/modules/code.styl
+++ b/stylus/modules/code.styl
@@ -4,13 +4,15 @@
 	color: code.color;
 	display: inline-block;
 	font-family: monospace;
-	font-size: 1.3em;
-	line-height: 1.5em;
+	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;
+		overflow-x: auto;
+		font-size: 1.3em;
 		padding: 15px;
 		white-space: pre-wrap;
 		width: 100%;
diff --git a/stylus/modules/hero.styl b/stylus/modules/hero.styl
index de3a08b..1df86e4 100644
--- a/stylus/modules/hero.styl
+++ b/stylus/modules/hero.styl
@@ -1,27 +1,30 @@
 .ion-hero {
     background: linear-gradient(to right, #fafafa, #eeeeee);
-    height: 500px;
-
-    .ion-container {
-        position: relative;
-        text-align: center;
-        transform: translateY(-50%);
-        top: 50%;
-    }
+    box-sizing: border-box;
+    padding: 75px 0;
+    text-align: center;
 
     h1, h2, h3, h4, h5, h6 {
         margin: 0;
     }
 
-    .ion-hero-header {
-        color: #424242;
-        font-size: 4.5em;
-        font-weight: normal;
-        margin: 0;
-     }
+    h1 {
+      font-size: 8.5em;
+    }
+
+    h2 {
+      font-size: 6.5em;
+    }
 
-    .ion-hero-paragraph {
-         color: #424242;
-         font-size: 1.6em;
-     }
+    h3 {
+      font-size: 4.5em;
+    }
+
+    h4 {
+      font-size: 2.5em;
+    }
+
+    p {
+      font-size: 1.5em;
+    }
 }
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;
diff --git a/stylus/modules/table.styl b/stylus/modules/table.styl
index 5e9a166..8de7000 100644
--- a/stylus/modules/table.styl
+++ b/stylus/modules/table.styl
@@ -1,17 +1,29 @@
 .ion-table {
-    border-collapse: separate;
+    border-collapse: collapse;
     border-spacing: 0;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    width: 100%;
 
-    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;
-    }
-}
+}
diff --git a/stylus/style.styl b/stylus/style.styl
index 5459bf4..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
 */
@@ -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';
diff --git a/stylus/theme.styl b/stylus/theme.styl
index 405b48a..e885eb3 100644
--- a/stylus/theme.styl
+++ b/stylus/theme.styl
@@ -3,9 +3,11 @@
 // ====
 
 base = {
-    font-color: #212121
+    font-color: #263238,
+    font-size: 1em,
+    line-height: 1.6
 };
-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;
diff --git a/test/index.html b/test/index.html
index 93041a5..8323a32 100644
--- a/test/index.html
+++ b/test/index.html
@@ -59,9 +59,7 @@
-
-
Welcome
-
+

Welcome