Merge branch 'dev'

Ionogy · May 20, 2017 · 9cfaae7 · 9cfaae7
2 parents 1d6b243 + 0e223f4
commit 9cfaae7
Show file tree

Hide file tree

Showing 19 changed files with 436 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.5.0 (20-05-2017)
+- Add labels, tags and tabs.
+- Redo typography to make them more generic (the old ones are in the .ion-modern class).
+- Add .ion-modern class, which have more modern looking font.
+- Add new utils (ion-fixed-top, ion-fixed-bottom, .ion-visible-lg ...)
+- Extend ion-base to work with more html tags.
+- Add material-icons sizing classes.
+- Add progressbar object.
+- Add support for rtl (right-to-left) languages.
+
+## 0.4.1 (12-03-2017)
+- Fix button display issues.
+- Fix default notice text being hard to read.
+
 ## 0.4.0 (08-03-2017)
 - Replace the alert module with a notice module.
 - Add ion-visible-sm util class.

diff --git a/README.md b/README.md
@@ -43,8 +43,8 @@ Installation
 ============
 Simple. Just include these tags in your html.
 ```
-<link rel="stylesheet" type="text/css" href="https://ionogy.com/kernel.css/v0.4.0/kernel.min.css" />
-<script type="text/javascript" src="https://ionogy.com/kernel.css/v0.4.0/kernel.js"></script>
+<link rel="stylesheet" type="text/css" href="https://ionogy.com/kernel.css/v0.4.1/kernel.min.css" />
+<script type="text/javascript" src="https://ionogy.com/kernel.css/v0.4.1/kernel.js"></script>
 ```
 
 Navigation code example
@@ -102,6 +102,8 @@ in /test directory which uses the css file in /build, to test your changes.
 
 Please run the "npm run lint" script before you commit any changes.
 
+You can run "npm run release" to create a release directory.
+
 Contributing design
 -------------------
 

diff --git a/docs/index.html b/docs/index.html
@@ -6,15 +6,13 @@
     <meta name="description" content="The CSS framework built for any kind of task">
     <meta name="theme-color" content="#2979ff">
     <meta property="og:title" content="The kernel.css Framework">
-    <link rel="stylesheet" type="text/css" href="https://ionogy.com/kernel.css/v0.4.0/kernel.min.css" />
+    <link rel="stylesheet" type="text/css" href="https://ionogy.com/kernel.css/v0.5.0/kernel.min.css" />
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
 </head>
 
 <body class="ion-base">
-    <div class="ion-notice ion-info"><strong>Notice: </strong> kernel.css is still early in it's development, as such some features may not work as expected.<i class="material-icons">close</i></div>
-
     <header class="ion-header ion-header-sm">
         <button class="nav-toggle">
             <i class="material-icons">menu</i>
@@ -44,37 +42,37 @@
         <div class="ion-container ion-vertical-center">
             <h3>kernel.css</h3>
             <p>simplicity done right</p>
-            <a class="ion-button ion-btn-default ion-btn-lg hero-btn" draggable="false" href="https://github.com/Ionogy/kernel.css/releases"><i class="material-icons" style="vertical-align: middle; font-size: 24px; padding-right: 10px; color: rgba(0, 0, 0, 0.54);">&#xE2C4;</i>Download</a>
+            <a class="ion-button ion-btn-primary ion-btn-lg" draggable="false" href="https://github.com/Ionogy/kernel.css/releases"><i class="material-icons" style="vertical-align: middle; font-size: 24px; padding-right: 10px;">&#xE2C4;</i>Download</a>
         </div>
     </div>
 
     <main class="ion-container">
         <div class="ion-grid">
             <div class="ion-col-1 feature">
-                <h2>Built for any kind of job</h2>
+                <h3 class="block-spacing">Built for any kind of job</h3>
                 <p>Whether you're making a website, web app or a dashboard app, this framework got you covered!</p>
             </div>
             <div class="ion-col-1 feature">
-                <h2>Far from reaching it's potential</h2>
+                <h3 class="block-spacing">Far from reaching it's potential</h3>
                 <p>If you like this project and would like to help out, you may do so on <a href="https://github.com/Ionogy/kernel.css" class="ion-anchor">github</a>. This project is ever improving.</p>
             </div>
             <div class="ion-col-1 feature">
-                <h2 class="block-margin">Simple to use</h2>
+                <h3 class="block-spacing">Simple to use</h3>
                 <p>The Kernel Framework is designed for everyone from the beginner to the novience. It makes everybody's job easier.</p>
             </div>
         </div>
 
         <div class="ion-grid">
             <div class="ion-col-1 feature">
-                <h2 class="block-margin">Lightweight</h2>
+                <h3 class="block-spacing">Lightweight</h3>
                 <p style="hyphens: auto;">We aim to make this a super lightweight, fully fledged framework that wont slow down your website's loading times.</p>
             </div>
             <div class="ion-col-1 feature">
-                <h2>A solid foundation for your project</h2>
+                <h3 class="block-spacing">A solid foundation for your project</h3>
                 <p>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.</p>
-            </div>
+            </div class="block-spacing">
             <div class="ion-col-1 feature">
-                <h2>Compatible with other frameworks</h2>
+                <h3>Compatible with other frameworks</h3>
                 <p>Because kernel.css uses prefixes for all it's css classes (<code class="ion-code">ion-</code>), it can be used with most other CSS framework. Mix and match
                     <svg style="height: 22px; vertical-align: middle; margin-left: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
                         <circle cx="32" cy="32" r="30" fill="#ffdd67" />
@@ -97,7 +95,7 @@ <h3>Base</h3>
 &lt;/body&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Headings</h2>
+        <h3>Headings</h3>
 
         <h1>Heading 1 <div class="heading-font-label"><code>2.6179em / 41px</code></div></h1>
         <h2>Heading 2 <div class="heading-font-label"><code>2.0681em / 33px</code></div></h2>
@@ -119,7 +117,7 @@ <h6>Heading 6 <div class="heading-font-label"><code>0.7862em / 12px</code></div>
 <code>&lt;p class="p"&gt;Hello, World!&lt;/p&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Grid</h2>
+        <h3>Grid</h3>
 
         <p>kernel.css comes with a 16 column grid system.</p>
 
@@ -178,10 +176,10 @@ <h2>Grid</h2>
         </div>
 
         <hr class="ion-hr">
-        <h2>Hero</h2>
+        <h3>Hero</h3>
 
         <div class="ion-hero">
-            <h3>Welcome</h3>
+            <h4>Welcome</h4>
         </div>
 
         <pre class="ion-code ion-code-block prettyprint">
@@ -200,7 +198,7 @@ <h3>Welcome</h3>
 &lt;/div&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Inputs</h2>
+        <h3>Inputs</h3>
 
         <div class="ion-grid">
             <div class="ion-col-1">
@@ -260,7 +258,7 @@ <h2>Inputs</h2>
         </select>
 
         <hr class="ion-hr">
-        <h2>Notices</h2>
+        <h3>Notices</h3>
 
         <p>Use notices to inform your users of something important. There are multiple types of notices; ion-info, ion-warning and ion-alert.</p>
 
@@ -276,7 +274,7 @@ <h2>Notices</h2>
         <div class="ion-notice ion-alert ion-section"><strong>Alert: </strong> This is an alert!<i class="material-icons">close</i></div>
 
         <hr class="ion-hr">
-        <h2>Colors</h2>
+        <h3>Colors</h3>
 
         <div class="ion-grid">
             <div class="ion-col-1 color ion-bg-red"></div>
@@ -294,7 +292,62 @@ <h2>Colors</h2>
         <p>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.</p>
 
         <hr class="ion-hr">
-        <h2>Utils</h2>
+        <h3>Tabs</h3>
+
+        <div class="ion-tabs">
+            <ul>
+                <li><a>Tab #1</a></li>
+                <li><a>Tab #2</a></li>
+                <li><a>Tab #3</a></li>
+            </ul>
+
+            <div class="ion-tab">
+                <p>Tab #1</p>
+            </div>
+
+            <div class="ion-tab">
+                <p>Tab #2</p>
+            </div>
+
+            <div class="ion-tab">
+                <p>Tab #3</p>
+            </div>
+        </div>
+
+        <pre class="ion-code ion-code-block prettyprint">
+<code>&lt;div class="ion-tabs"&gt;
+    &lt;ul&gt;
+        &lt;li&gt;&lt;a&gt;Test&lt;/a&gt;&lt;/li&gt;
+        &lt;li&gt;&lt;a&gt;Test #2&lt;/a&gt;&lt;/li&gt;
+    &lt;/ul&gt;
+
+    &lt;div class="ion-tab"&gt;
+        &lt;p>test #1/p&gt;
+    &lt;/div&gt;
+
+    &lt;div class="ion-tab"&gt;
+        &lt;p&gt;test #2&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+            <hr class="ion-hr">
+            <h2>Labels</h2>
+
+            <a href="#" class="ion-label">Label</a>
+            <a href="#" class="ion-label ion-safe">Label Safe</a>
+            <a href="#" class="ion-label ion-info">Label Info</a>
+            <a href="#" class="ion-label ion-warning">Label Warning</a>
+            <a href="#" class="ion-label ion-alert">Label</a>
+
+            <hr class="ion-hr">
+            <h2>Tags</h2>
+
+            <a class="ion-tag" href="#">Biceps</a>
+            <a class="ion-tag" href="#">Biceps</a>
+            <a class="ion-tag" href="#">Biceps</a>
+
+        <hr class="ion-hr">
+        <h3>Utils</h3>
 
         <p>kernel.css comes bundled with a few useful utility classes.</p>
         <pre class="ion-code ion-code-block prettyprint">
@@ -331,7 +384,7 @@ <h2>Utils</h2>
 &lt;div class="ion-visible-sm"&gt;...&lt;/div&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Tables</h2>
+        <h3>Tables</h3>
 
         <table class="ion-table">
             <thead>
@@ -394,14 +447,14 @@ <h2>Tables</h2>
 </code></pre>
 
         <hr class="ion-hr">
-        <h2>Cards</h2>
+        <h3>Cards</h3>
 
         <div class="ion-grid">
             <div class="ion-col-1">
                 <div class="ion-card ion-card-sm">
                     <div class="ion-card-header">
                         <h2>Desolate landscape</h2>
-                        <img src="https://source.unsplash.com/n1fUGApCY0U/800x600" alt="Desert landscape">
+                        <img src="https://source.unsplash.com/n1fUGApCY0U/800x600" alt="Desolate landscape">
                     </div>
 
                     <div class="ion-card-content">
@@ -441,7 +494,7 @@ <h2>Comments:</h2> Great post, keep it up!
 &lt;/div&gt;</pre>
 
         <hr class="ion-hr">
-        <h2>Code</h2>
+        <h3>Code</h3>
 
         <p>The code class is used for displaying code. The first way to do this is inline code <code class="ion-code">like this</code>, and code blocks: </p>
 
@@ -454,7 +507,7 @@ <h2>Code</h2>
 <code>&lt;pre class="ion-code ion-code-block"&gt;&lt;code&gt;...&lt;/code&gt;&lt;/pre&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Progressbar</h2>
+        <h3>Progressbar</h3>
 
         <div class="ion-progressbar" id="progress-ex1">
             <div class="ion-progress"></div>
@@ -468,7 +521,7 @@ <h2>Progressbar</h2>
 &lt;/div&gt;</code></pre>
 
         <hr class="ion-hr">
-        <h2>Examples</h2>
+        <h3>Examples</h3>
 
         <h3>Blog</h3>
         <p><a href="./examples/splitview/index.html" class="ion-anchor">/examples/splitview</a></p>
@@ -504,7 +557,7 @@ <h3>Blog</h3>
 
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-    <script src="https://ionogy.com/kernel.css/v0.4.0/kernel.js"></script>
+    <script src="https://ionogy.com/kernel.css/v0.5.0/kernel.js"></script>
     <script type="text/javascript">
         'use strict';
 
@@ -531,6 +584,18 @@ <h3>Blog</h3>
                 requestAnimationFrame(progressLoop);
             })();
         });
+
+        /**
+        * Change header on scroll.
+        **/
+
+        $(window).scroll(function() {
+            if ($(window).scrollTop() > $('.hero').height()) {
+                $('header').addClass('header-hover');
+            } else {
+                $('header').removeClass('header-hover');
+            }
+        });
     </script>
 </body>
 

diff --git a/docs/style.css b/docs/style.css
@@ -6,6 +6,11 @@ main {
     min-height: 100vh;
 }
 
+.header-hover {
+    border: none;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
+    transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
 
 /* Remove border added by code-prettify */
 
@@ -15,6 +20,7 @@ pre {
 
 header {
     border-bottom: 1px solid #eee;
+    position: fixed;
 }
 
 nav .github-icon {
@@ -24,7 +30,13 @@ nav .github-icon {
 }
 
 .hero {
-    height: 500px;
+    height: 600px;
+    background-color: #fff;
+    border-bottom: 1px solid #eee;
+}
+
+.hero h3 {
+    font-weight: 300;
 }
 
 .hero .hero-btn {
@@ -40,8 +52,8 @@ nav .github-icon {
     padding: 5px;
 }
 
-.block-margin {
-    margin-bottom: 73px;
+.block-spacing {
+    height: 50px;
 }
 
 .color {
@@ -74,7 +86,7 @@ nav .github-icon {
 /* For small screen sizes */
 
 @media (max-width: 800px) {
-    .block-margin {
+    .block-spacing {
         margin-bottom: 0;
     }
     .grid-example {
@@ -84,3 +96,16 @@ nav .github-icon {
         margin: 10px 0;
     }
 }
+
+.ion-code-block .str { color: #27ae60; }
+.ion-code-block .kwd { color: #2980b9; }
+.ion-code-block .com { color: #c0392b; }
+.ion-code-block .typ { color: #8e44ad; }
+.ion-code-block .lit { color: #066; }
+.ion-code-block .pun, .ion-code-block .opn, .ion-code-block .clo { color: #660; }
+.ion-code-block .tag { color: #2980b9; }
+.ion-code-block .atn { color: #606; }
+.ion-code-block .atv { color: #080; }
+.ion-code-block .dec, .ion-code-block .var { color: #606; }
+.ion-code-block .fun { color: #800; }
+.ion-code-block .pln { color: #2c3e50; }