Documentation done

JDurman · Apr 8, 2017 · 2833dbe · 2833dbe
1 parent 3de85e2
commit 2833dbe
Show file tree

Hide file tree

Showing 33 changed files with 163 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * **New component: Input**
 * **New component: Field**
+* Documentation done
 
 ## 0.0.3
 

diff --git a/README.md b/README.md
@@ -2,15 +2,15 @@
 
 Buefy is a lightweight library of responsive UI components for [Vue.js](https://vuejs.org/) based on [Bulma](http://bulma.io/) framework and design.
 
-It focus on simplicity and performance with no *over-animations*.
+It focus on usability and performance with no *over-animations*.
 
 ## Features
 
 * Keep your current Bulma theme / variables easily
 
 * Supports both [Material Design Icons](https://material.io/icons/) and [FontAwesome](http://fontawesome.io/)
 
-* Very lightweight with none internal dependencies (only Vue & Bulma)
+* Very lightweight with none internal dependencies aside from Vue & Bulma
 
 * Semantic code output
 
@@ -24,7 +24,9 @@ Browse the [online documentation here](https://buefy.github.io).
 
 ## Install
 
-Not public yet.
+```
+npm install buefy
+```
 
 ## Quick Start
 

diff --git a/docs/App.vue b/docs/App.vue
@@ -26,9 +26,7 @@
 </script>
 
 <style lang="scss">
-    @import "~highlight.js/styles/atelier-cave-light.css";
     @import "./assets/main.scss";
-    @import "../src/scss/buefy-theme";
 
     pre {
         white-space: pre-wrap;
@@ -64,4 +62,42 @@
             vertical-align: top;
         }
     }
+
+    ::selection {
+        background: lighten($primary, 5%);
+        color: $primary-invert;
+    }
+
+    .home {
+        .logo-rounded,
+        .subtitle,
+        .npm {
+            margin-bottom: 32px;
+        }
+        .logo-rounded {
+            background: $light;
+            display: inline-flex;
+            padding: 40px;
+            border-radius: 32px;
+            box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+            img {
+                width: 320px;
+            }
+            @include mobile {
+                padding: 32px;
+                img {
+                    width: 220px;
+                }
+            }
+        }
+        .button + .button {
+            margin-left: 0.5rem;
+        }
+        .npm {
+            display: inline-flex;
+            font-size: 1.1em;
+            color: lighten($primary, 20%);
+            background: darken($primary, 20%);
+        }
+    }
 </style>
diff --git a/docs/assets/buefy-light.png b/docs/assets/buefy-light.png
diff --git a/docs/assets/buefy.png b/docs/assets/buefy.png
diff --git a/docs/assets/main.scss b/docs/assets/main.scss
@@ -12,3 +12,10 @@ $sides: ('top', 'left', 'bottom', 'right');
         }
     }
 }
+
+@import "~highlight.js/styles/atelier-cave-light.css";
+
+@import "~bulma/sass/utilities/_all";
+@import "../../src/scss/utils/_theme-variables";
+@import "~bulma";
+@import "../../src/scss/buefy";
diff --git a/docs/pages/Home.vue b/docs/pages/Home.vue
@@ -1,52 +1,101 @@
 <template>
-    <section>
-        <div class="hero is-primary is-fullheight">
+    <section class="home">
+        <div class="hero is-fullheight is-primary">
             <div class="hero-head">
-                <app-header twitter-button-class="is-light"></app-header>
+                <app-header home></app-header>
             </div>
 
             <div class="hero-body">
                 <div class="container has-text-centered">
-                    <transition-group
+                    <!--<transition-group
                         appear
-                        mode="out-in"
-                        appear-active-class="zoomIn"
-                        enter-active-class="zoomIn"
-                        leave-active-class="zoomOut">
+                        appear-active-class="zoomIn home-animation"
+                        enter-active-class="zoomIn home-animation"
+                        leave-active-class="zoomOut home-animation"
+                        move-class="move">-->
 
-                        <h1 key="title" class="title is-1 home-animation">Buefy</h1>
-                        <h1 key="install" class="title is-1 home-animation">Buefy</h1>
-                        <h1 key="logo" class="title is-1 home-animation">Buefy</h1>
+                        <div key="img" class="logo-rounded home-hero">
+                            <img src="../assets/buefy.png" alt="Buefy">
+                        </div>
+                        <h2 key="subtitle" class="subtitle home-hero"><strong>Lightweight</strong> UI components for <strong>Vue.js</strong> based on <strong>Bulma</strong></h2>
+                        <pre key="npm" class="npm home-hero"><code>npm install buefy</code></pre>
+                        <div key="buttons" class="buttons">
+                            <router-link class="button is-medium is-primary is-inverted home-hero" to="/documentation/quick-start">
+                                <span>Quick Start</span>
+                            </router-link>
+                            <a class="button is-medium is-primary is-outlined is-inverted home-hero" href="https://github.com/rafaelpimpa/buefy" target="_blank">
+                                <b-icon pack="fa" icon="github"></b-icon> <span>GitHub</span>
+                            </a>
+                        </div>
 
-                    </transition-group>
+                    <!--</transition-group>-->
                 </div>
             </div>
         </div>
 
+        <section class="hero">
+            <div class="hero-body">
+                <div class="container">
+                    <nav class="columns">
+                        <div class="column has-text-centered features">
+                            <b-icon pack="fa" icon="github" size="is-large"></b-icon>
+                            <p class="title is-4"><strong>Free</strong></p>
+                            <p class="subtitle">Open source on <strong><a href="https://github.com/rafaelpimpa/buefy" target="_blank">GitHub</a></strong></p>
+                        </div>
+                        <div class="column has-text-centered features">
+                            <b-icon icon="devices" size="is-large"></b-icon>
+                            <p class="title is-4"><strong>Responsive</strong></p>
+                            <p class="subtitle"><strong>Every</strong> component is responsive</p>
+                        </div>
+                        <div class="column has-text-centered features">
+                            <b-icon icon="new_releases" size="is-large"></b-icon>
+                            <p class="title is-4"><strong>Modern</strong></p>
+                            <p class="subtitle">
+                                Built with <strong><a href="https://vuejs.org/" target="_blank">Vue.js</a></strong>
+                                and <strong><a href="http://bulma.io/" target="_blank">Bulma</a></strong>
+                            </p>
+                        </div>
+                        <div class="column has-text-centered features">
+                            <b-icon pack="fa" icon="paper-plane-o" size="is-large"></b-icon>
+                            <p class="title is-4"><strong>Lightweight</strong></p>
+                            <p class="subtitle">No other internal dependencies</p>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </section>
+
         <app-footer></app-footer>
     </section>
 </template>
 
 <script>
     import AppHeader from '../template/Header'
     import AppFooter from '../template/Footer'
+    import ScrollReveal from 'scrollreveal'
 
     export default {
         name: 'app',
         components: {
             AppHeader,
             AppFooter
         },
-        data() {
-            return {
-                toggle: false
-            }
+        mounted() {
+            const sr = ScrollReveal({
+                duration: 600,
+                delay: 200
+            })
+            sr.reveal('.home-hero', { delay: 0, origin: 'top' }, 200)
+            sr.reveal('.features', 200)
         }
     }
 </script>
 
-<style>
+<style lang="scss">
     .home-animation {
         animation-duration: 750ms;
     }
+    .move {
+        transition: transform 1s;
+    }
 </style>
diff --git a/docs/pages/documentation/Documentation.vue b/docs/pages/documentation/Documentation.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <app-header twitter-button-class="is-twitter"></app-header>
+        <app-header></app-header>
 
         <div class="hero is-primary">
             <div class="hero-body">

diff --git a/docs/pages/documentation/form/Switch.vue b/docs/pages/documentation/form/Switch.vue
@@ -8,7 +8,7 @@
             <div class="column">
                 <div class="block">
                     <b-switch>Default</b-switch>
-                    <b-switch v-model="bSwitch">{{ bSwitch }}</b-switch>
+                    <b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
                     <b-switch disabled>Disabled</b-switch>
                     <b-switch disabled checked>Disabled Checked</b-switch>
                 </div>
@@ -19,7 +19,7 @@
                         <b-switch>Default</b-switch>
                     </div>
                     <div class="field">
-                        <b-switch v-model="bSwitch">{{ bSwitch }}</b-switch>
+                        <b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
                     </div>
                     <div class="field">
                         <b-switch disabled>Disabled</b-switch>
@@ -103,7 +103,7 @@
     export default {
         data() {
             return {
-                bSwitch: true,
+                isSwitched: true,
                 props: [
                     {
                         name: '<code>v-model</code>',
@@ -152,7 +152,7 @@
                 template: `
                     <div class="block">
                         <b-switch>Default</b-switch>
-                        <b-switch v-model="bSwitch">{{ bSwitch }}</b-switch>
+                        <b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
                         <b-switch disabled>Disabled</b-switch>
                         <b-switch disabled checked>Disabled Checked</b-switch>
                     </div>
@@ -163,7 +163,7 @@
                             <b-switch>Default</b-switch>
                         </div>
                         <div class="field">
-                            <b-switch v-model="bSwitch">{{ bSwitch }}</b-switch>
+                            <b-switch v-model="isSwitched">{{ isSwitched }}</b-switch>
                         </div>
                         <div class="field">
                             <b-switch disabled>Disabled</b-switch>
@@ -187,7 +187,7 @@
                 export default {
                     data() {
                         return {
-                            bSwitch: true
+                            isSwitched: true
                         }
                     }
                 }`

diff --git a/docs/pages/documentation/installation/Customization.vue b/docs/pages/documentation/installation/Customization.vue
@@ -6,7 +6,7 @@
         <hr>
 
         <h3 class="subtitle"><span class="mr-8">1</span> Install Buefy and Bulma via npm</h3>
-        <pre class="content" v-highlight><code class="bash">Not public yet.</code></pre>
+        <pre class="content" v-highlight><code class="bash">npm install buefy</code></pre>
         <p class="content">or clone the repository: <a href="https://github.com/rafaelpimpa/buefy" target="_blank">https://github.com/rafaelpimpa/buefy</a></p>
         <pre class="content" v-highlight><code class="bash">npm install bulma</code></pre>
         <p>or clone the repository: <a href="https://github.com/jgthms/bulma" target="_blank">https://github.com/jgthms/bulma</a></p>

diff --git a/docs/pages/documentation/installation/QuickStart.vue b/docs/pages/documentation/installation/QuickStart.vue
@@ -3,7 +3,7 @@
         <h1 class="title is-spaced">Quick Start</h1>
 
         <h2 class="subtitle"><span class="mr-8">1</span> Install via npm</h2>
-        <pre v-highlight><code class="bash">Not public yet.</code></pre>
+        <pre v-highlight><code class="bash">npm install buefy</code></pre>
 
         <hr>
 

diff --git a/docs/template/Footer.vue b/docs/template/Footer.vue
@@ -9,12 +9,12 @@
                 <b-field>
                     <p class="control">
                         <a class="button" href="https://github.com/rafaelpimpa/buefy" target="_blank">
-                            <b-icon class="mr-4" pack="fa" icon="github"></b-icon> GitHub
+                            <b-icon pack="fa" icon="github"></b-icon> <span>GitHub</span>
                         </a>
                     </p>
                     <p class="control">
                         <a class="button is-twitter" href="https://twitter.com/rafaelpimpa" target="_blank">
-                            <b-icon class="mr-4" pack="fa" icon="twitter"></b-icon> Twitter
+                            <b-icon pack="fa" icon="twitter"></b-icon> <span>Twitter</span>
                         </a>
                     </p>
                 </b-field>

diff --git a/docs/template/Header.vue b/docs/template/Header.vue
@@ -2,7 +2,10 @@
     <header class="nav">
         <div class="container">
             <div class="nav-left">
-                <router-link to="/" exact class="nav-item title is-4 is-brand"><strong>Buefy</strong></router-link>
+                <router-link to="/" exact class="nav-item is-brand">
+                    <img v-if="home" src="../assets/buefy-light.png" alt="Buefy">
+                    <img v-else src="../assets/buefy.png" alt="Buefy">
+                </router-link>
             </div>
             <div class="nav-center">
                 <a class="nav-item" href="https://github.com/rafaelpimpa/buefy" target="_blank">
@@ -24,7 +27,7 @@
                 <router-link to="/documentation" class="nav-item">Documentation</router-link>
 
                 <div class="nav-item">
-                    <a class="button is-outlined" :class="twitterButtonClass" @click="tweet">
+                    <a class="button is-outlined" :class="home ? 'is-light' : 'is-twitter'" @click="tweet">
                         <b-icon pack="fa" icon="twitter" class="mr-4"></b-icon> Tweet
                     </a>
                 </div>
@@ -37,7 +40,9 @@
     import { EventBus } from '../main'
 
     export default {
-        props: ['twitterButtonClass'],
+        props: {
+            home: Boolean
+        },
         data() {
             return {
                 isMenuActive: false
@@ -49,7 +54,7 @@
                 const height = 400
                 const left = (window.screen.width - width) / 2
                 const top = (window.screen.height - height) / 2
-                const url = `https://twitter.com/share?url=${encodeURI(window.location.href)}&text=Buefy: lightweight Bulma UI components for Vue.js&hashtags=buefy&via=rafaelpimpa`
+                const url = `https://twitter.com/share?url=${encodeURI(window.location.href)}&text=Buefy: lightweight UI components for Vue.js based on Bulma&hashtags=buefy&via=rafaelpimpa`
                 const opts = `status=1,width=${width},height=${height},top=${top},left=${left}`
 
                 window.open(url, '', opts)

diff --git a/index.html b/index.html
@@ -5,7 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.">
 
-    <title>Buefy: lightweight Bulma UI components for Vue.js</title>
+    <link rel="apple-touch-icon-precomposed" sizes="57x57"  href="/static/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon-precomposed" sizes="114x114"  href="/static/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon-precomposed" sizes="72x72"  href="/static/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon-precomposed" sizes="144x144"  href="/static/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon-precomposed" sizes="60x60"  href="/static/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon-precomposed" sizes="120x120"  href="/static/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon-precomposed" sizes="76x76"  href="/static/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152"  href="/static/apple-touch-icon-152x152.png">
+    <link rel="icon" type="image/png"  href="/static/favicon-196x196.png" sizes="196x196">
+    <link rel="icon" type="image/png"  href="/static/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png"  href="/static/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png"  href="/static/favicon-16x16.png" sizes="16x16">
+    <link rel="icon" type="image/png"  href="/static/favicon-128.png" sizes="128x128">
+    <link rel="shortcut icon" href="/static/favicon.ico">
+    <meta name="application-name" content="Buefy: lightweight UI components for Vue.js based on Bulma">
+
+    <title>Buefy: lightweight UI components for Vue.js based on Bulma</title>
 
     <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">