Update themes

deploy.sh

@@ -5,6 +5,17 @@ SOURCE_BRANCH="master"
 TARGET_BRANCH="gh-pages"
 
 function doCompile {
+    cd site/_themes
+    yarn
+    yarn build
+    mv dist/js ../assets/js/themes
+    cd ../assets/js/themes
+    FILE=../../../_includes/themes.html
+    echo "" > $FILE
+    for f in *.js; do
+        echo "<script src=/assets/js/themes/$f></script>" >> $FILE
+    done
+    cd ../../../../
     bundle exec jekyll build
 }
 

site/.gitignore

@@ -0,0 +1,2 @@
+_includes/themes.html
+assets/js/themes

site/_data/themes.yml

@@ -1,29 +0,0 @@
-- name: bootstrap4
-  title: Bootstrap v4
-  description: The most popular HTML, CSS, and JavaScript framework.
-  url: https://getbootstrap.com/
-
-- name: bootstrap3
-  title: Bootstrap v3
-  description: The most popular HTML, CSS, and JavaScript framework.
-  url: https://getbootstrap.com/docs/3.4/
-
-- name: semantic
-  title: Semantic UI
-  description: UI component framework based around useful principles from natural language.
-  url: http://semantic-ui.com
-
-- name: bulma
-  title: Bulma
-  description: Modern CSS framework based on Flexbox.
-  url: http://bulma.io
-
-- name: materialize
-  title: Materialize
-  description: A modern responsive front-end framework based on Material Design.
-  url: https://materializecss.com/
-
-- name: foundation
-  title: Foundation
-  description: The most advanced responsive front-end framework in the world.
-  url: https://foundation.zurb.com/

site/_includes/docs-navbar.html

@@ -45,14 +45,6 @@
           Blog
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link"
-          href="https://github.com/wenzhixin/element-table"
-          target="_blank">
-          Element Table
-          <span class="badge badge-warning">New</span>
-        </a>
-      </li>
     </ul>
   </div>
 

site/_includes/opencollective.html

@@ -7,7 +7,7 @@
 
     <div>
       <a href="https://edubirdie.com/write-my-essay" target="_blank">
-        <img height="64" src="assets/images/edu-birdie.png" alt="Write my essay services from Edubirdie">
+        <img height="64" src="{{ site.baseurl }}/assets/images/edu-birdie.png" alt="Write my essay services from Edubirdie">
       </a>
     </div>
   </div>

site/_includes/scripts.html

@@ -14,3 +14,7 @@ $(function () {
 
 <script src="{{ site.baseurl }}/assets/js/docs.min.js?m=1"></script>
 {% include analytics.html %}
+
+{%- if page.group == "themes" -%}
+{% include themes.html %}
+{%- endif -%}

site/_includes/stylesheet.html

@@ -7,6 +7,6 @@
 {% endif %}
 {% if page.layout != "examples" %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
-<link href="{{ site.baseurl }}/assets/css/style.css?m=2" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/style.css?m=3" rel="stylesheet">
 {% endif %}
 {%- endif -%}

site/_layouts/simple.html

@@ -2,12 +2,14 @@
 layout: default
 ---
 
-<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
+<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light {{ page.group }}">
   <div class="pt-md-3 pb-md-4">
     <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
     <p class="bd-lead">{{ page.description | smartify }}</p>
   </div>
-  {% include ads.html %}
+  {%- if page.group != "themes" -%}
+    {% include ads.html %}
+  {%- endif -%}
 </header>
 
 <main class="bd-content p-5" id="content" role="main">

site/_themes/.eslintrc.js

@@ -0,0 +1,75 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/recommended',
+    'eslint:recommended'
+  ],
+  rules: {
+    'indent': ['error',
+      2,
+      {
+        'SwitchCase': 1,
+        'MemberExpression': 1,
+        'ArrayExpression': 1,
+        'FunctionDeclaration': { 'parameters': 'first' },
+        'CallExpression': { 'arguments': 1 },
+        'ImportDeclaration': 'first',
+        'ObjectExpression': 1
+      }
+    ],
+    'no-sequences': 'error',
+    'linebreak-style': 'off',
+    'quotes': ['error', 'single'],
+    'semi': ['error', 'never'],
+    'semi-style': ['error', 'last'],
+    'semi-spacing': ['error', { 'before': false, 'after': true }],
+    'camelcase': 'off',
+    'default-case': 'error',
+    'no-new-func': 'error',
+    'no-void': 'error',
+    'array-bracket-spacing': ['error', 'never'],
+    'no-tabs': 'error',
+    'no-var': 'error',
+    'one-var': ['error', 'never'],
+    'prefer-const': 'error',
+    'no-trailing-spaces': 'error',
+    'operator-assignment': ['error', 'always'],
+    'dot-location': ['error', 'property'],
+    'no-alert': 'error',
+    'no-else-return': ['error', { allowElseIf: false }],
+    'no-case-declarations': 'off',
+    'no-unused-vars': 'error',
+    'no-multi-spaces': 'error',
+    'valid-jsdoc': 'warn',
+    'eqeqeq': 'error',
+    'guard-for-in': 'warn',
+    'no-multi-str': 'error',
+    'no-return-await': 'error',
+    'no-return-assign': 'error',
+    'no-throw-literal': 'error',
+    'no-undef-init': 'error',
+    'no-use-before-define': 'warn',
+    'key-spacing': ['error', { 'beforeColon': false, 'afterColon': true, 'mode': 'strict' }],
+    'keyword-spacing': ['error', { 'before': true, 'after': true }],
+    'space-before-blocks': ['error', { 'functions': 'always', 'keywords': 'always', 'classes': 'always' }],
+    'spaced-comment': ['error', 'always'],
+    'space-infix-ops': 'error',
+    'arrow-spacing': ['error', { 'before': true, 'after': true }],
+    'no-useless-constructor': 'warn',
+    'comma-dangle': ['error', 'never'],
+    'space-before-function-paren': ['error', 'always'],
+    'no-param-reassign': 'off',
+    'object-curly-spacing': ['error', 'always'],
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  globals: {
+    '$': true
+  }
+}

site/_themes/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

site/_themes/README.md

@@ -0,0 +1,29 @@
+# themes1
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

site/_themes/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

site/_themes/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "themes",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.4.3",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-plugin-eslint": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

site/_themes/public/themes.html

@@ -0,0 +1 @@
+<!-- built files will be auto injected -->

site/_themes/src/App.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <Categories
+      :categories="categories"
+      @active="onActive"
+    />
+
+    <List
+      v-for="(value, key) in themes"
+      v-show="current === 'all' || current === key"
+      :key="key"
+      :title="categories[key]"
+      :themes="value"
+    />
+  </div>
+</template>
+
+<script>
+import Categories from './components/Categories'
+import List from './components/List'
+
+export default {
+  name: 'App',
+  components: {
+    Categories,
+    List
+  },
+  data () {
+    return {
+      current: 'all',
+      categories: {
+        all: 'All Themes',
+        admin: 'Admin & Dashboards',
+        css: 'CSS Frameworks',
+        vue: 'Vuejs',
+        others: 'Others'
+      },
+      themes: {
+        admin: [
+          {
+            name: 'Light Bootstrap Dashboard Pro',
+            desc: 'Responsive Bootstrap 4 Admin Template.',
+            img: '/assets/images/light-bootstrap.jpg',
+            url: 'https://secure.2checkout.com/affiliate.php?ACCOUNT=CREATIV&AFFILIATE=117417&PATH=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Flight-bootstrap-dashboard-pro%3FAFFILIATE%3D117417',
+            demo: 'https://secure.2checkout.com/affiliate.php?ACCOUNT=CREATIV&AFFILIATE=117417&PATH=https%3A%2F%2Fdemos.creative-tim.com%2Flight-bootstrap-dashboard-pro%2Fexamples%2Ftables%2Fbootstrap-table.html%3FAFFILIATE%3D117417',
+            price: '$39'
+          },
+          {
+            name: 'Paper Dashboard Pro',
+            desc: 'Premium Bootstrap Admin Template.',
+            img: '/assets/images/pager-dashboard.jpg',
+            url: 'https://secure.2checkout.com/affiliate.php?ACCOUNT=CREATIV&AFFILIATE=117417&PATH=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fpaper-dashboard-pro%3FAFFILIATE%3D117417',
+            demo: 'https://secure.2checkout.com/affiliate.php?ACCOUNT=CREATIV&AFFILIATE=117417&PATH=https%3A%2F%2Fdemos.creative-tim.com%2Fpaper-dashboard-pro%2Fexamples%2Ftables%2Fbootstrap-table.html%3FAFFILIATE%3D117417',
+            price: '$39'
+          },
+          {
+            name: 'Remark',
+            desc: 'Responsive Bootstrap 4 Admin Template.',
+            img: 'https://themeforest.img.customer.envatousercontent.com/files/256697282/Preview.__large_preview.png?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=c4340f8d5e70cd6fb77fd5b2f670b486',
+            url: 'https://1.envato.market/j0mdP',
+            demo: 'https://1.envato.market/PEbGe',
+            price: '$24'
+          },
+          {
+            name: 'Ubold',
+            desc: 'Admin & Dashboard Template.',
+            img: 'https://themeforest.img.customer.envatousercontent.com/files/273195428/01_ubold.__large_preview.jpg?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=a1318683a895fcf026cecd3e0b74d97b',
+            url: 'https://1.envato.market/5EnJ2',
+            demo: 'https://1.envato.market/kEWdL',
+            price: '$29'
+          },
+          {
+            name: 'Metronic',
+            desc: 'Bootstrap 4, Angular 8, React Admin Dashboard Theme.',
+            img: 'https://themeforest.img.customer.envatousercontent.com/files/276839308/plyushka.__large_preview.jpg?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=b7f0504d8697450845aa1d2f71a8c80b',
+            url: 'https://1.envato.market/KmzbN',
+            demo: 'https://1.envato.market/7qMPg',
+            price: '$35'
+          },
+          {
+            name: 'Pages',
+            desc: 'Admin Dashboard Template with Angular 6, Bootstrap 4 & HTML.',
+            img: 'https://themeforest.img.customer.envatousercontent.com/files/253934566/preview.__large_preview.png?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=bcc481514196e409152ae30e8668f0eb',
+            url: 'https://1.envato.market/LB26M',
+            demo: 'https://1.envato.market/q9yMY',
+            price: '$24'
+          }
+        ],
+        css: [
+          {
+            name: 'Bootstrap v4',
+            desc: 'The most popular HTML, CSS, and JavaScript framework.',
+            img: '/assets/images/bootstrap4.jpg',
+            url: '/docs/getting-started/introduction/',
+            demo: 'https://examples.bootstrap-table.com/',
+            price: ''
+          },
+          {
+            name: 'Bootstrap v3',
+            desc: 'The most popular HTML, CSS, and JavaScript framework.',
+            img: '/assets/images/bootstrap3.jpg',
+            url: '/themes/bootstrap3/',
+            demo: 'https://examples.bootstrap-table.com/index.html?bootstrap3',
+            price: ''
+          },
+          {
+            name: 'Semantic UI',
+            desc: 'UI component framework based around useful principles from natural language.',
+            img: '/assets/images/semantic.jpg',
+            url: '/themes/semantic/',
+            demo: 'https://examples.bootstrap-table.com/index.html?semantic',
+            price: ''
+          },
+          {
+            name: 'Bulma',
+            desc: 'Modern CSS framework based on Flexbox.',
+            img: '/assets/images/bulma.jpg',
+            url: '/themes/bulma/',
+            demo: 'https://examples.bootstrap-table.com/index.html?bulma',
+            price: ''
+          },
+          {
+            name: 'Materialize',
+            desc: 'A modern responsive front-end framework based on Material Design.',
+            img: '/assets/images/materialize.jpg',
+            url: '/themes/materialize/',
+            demo: 'https://examples.bootstrap-table.com/index.html?materialize',
+            price: ''
+          },
+          {
+            name: 'Foundation',
+            desc: 'The most advanced responsive front-end framework in the world.',
+            img: '/assets/images/foundation.jpg',
+            url: '/themes/foundation/',
+            demo: 'https://examples.bootstrap-table.com/index.html?foundation',
+            price: ''
+          }
+        ],
+        vue: [
+          {
+            name: 'Element Table',
+            desc: 'An extended table to integration with bootstrap-table and element-ui.',
+            img: '/assets/images/element-table.jpg',
+            url: 'https://element.bootstrap-table.com/',
+            demo: 'https://element.bootstrap-table.com/',
+            price: ''
+          }
+        ],
+        others: [
+          {
+            name: 'Fresh Bootstrap Table',
+            desc: 'Fresh Bootstrap Table Template.',
+            img: '/assets/images/fresh-table.jpg',
+            url: 'https://secure.2checkout.com/affiliate.php?ACCOUNT=CREATIV&AFFILIATE=117417&PATH=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Ffresh-bootstrap-table%3FAFFILIATE%3D117417',
+            demo: 'https://wenzhixin.github.io/fresh-bootstrap-table/compact-table.html',
+            price: ''
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    onActive (current) {
+      this.current = current
+    }
+  }
+}
+</script>
+
+<style>
+  .bs-tooltip-top .arrow::before {
+    border-top-color: #FAE5A8;
+  }
+  .tooltip-inner {
+    background: #FAE5A8;
+    color: #724729;
+  }
+</style>

site/_themes/src/components/Categories.vue

@@ -0,0 +1,80 @@
+<template>
+  <ul class="categories-list">
+    <li
+      v-for="(value, key) in categories"
+      :key="key"
+      :class="{ active: current === key }"
+      @click="onClick(key)"
+    >
+      <a href="javascript:">
+        <span>{{ value }}</span>
+      </a>
+    </li>
+    <div class="clearfix" />
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    categories: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      current: 'all'
+    }
+  },
+  methods: {
+    onClick (key) {
+      this.current = key
+      this.$emit('active', key)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  ul.categories-list {
+    list-style-type: none;
+    margin-top: -88px;
+    z-index: 9999;
+    padding: 20px 15px;
+    position: relative;
+    border: 0;
+    z-index: 1;
+    background-color: #5d4a8e;
+    border-radius: 8px;
+    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3), 0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+    width: 100%;
+  }
+
+  ul.categories-list>li {
+    float: left;
+    display: block;
+    padding: 3px 0;
+  }
+
+  ul.categories-list>li>a {
+    display: block;
+    text-align: center;
+    padding: 12px 12px;
+    font-weight: 600;
+    border-radius: 30px;
+    font-size: 12px;
+    margin-left: 0px;
+    margin-right: 10px;
+    text-decoration: none;
+    color: white;
+    text-transform: uppercase;
+    transition: background .2s;
+  }
+
+  ul.categories-list>li>a:hover,
+  ul.categories-list>li.active>a {
+    color: #6d4eba;
+    background: white;
+  }
+</style>

site/_themes/src/components/List.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="landing-title">
+        <h2 class="title">
+          {{ title }}
+        </h2>
+      </div>
+    </div>
+
+    <div
+      v-for="(theme, i) in themes"
+      :key="i"
+      class="col-xs-12 col-sm-6 col-md-4 col-lg-4"
+    >
+      <div class="card card-small">
+        <div class="thumbnail">
+          <img
+            :src="theme.img"
+            alt="No Image"
+          >
+          <a
+            :href="theme.url"
+            target="_blank"
+            class="thumb-cover"
+          />
+          <b class="actions">
+            <a
+              :href="theme.url"
+              target="_blank"
+              class="btn btn-neutral btn-round btn-fill"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="More Details"
+            >
+              <i
+                class="fa fa-align-left"
+              />
+            </a>
+            <a
+              :href="theme.demo"
+              class="btn btn-neutral btn-fill btn-round"
+              target="_blank"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Live Preview"
+            >
+              <i class="fa fa-laptop" />
+            </a>
+          </b>
+        </div>
+        <div class="card-info">
+          <a
+            :href="theme.url"
+            target="_blank"
+          >
+            <h3>
+              {{ theme.name }}
+              <div
+                v-if="theme.price"
+                class="time pull-right premium-product"
+              >
+                {{ theme.price }}
+              </div>
+              <div
+                v-else
+                class="time pull-right free"
+              >
+                FREE
+              </div>
+            </h3>
+            <p>{{ theme.desc }}</p>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const $ = window.$
+
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    themes: {
+      type: Array,
+      required: true
+    }
+  },
+
+  mounted () {
+    $('[data-toggle="tooltip"]').tooltip()
+    $(this.$el).find('a').click(() => {
+      setTimeout(() => {
+        $('[data-toggle="tooltip"]').tooltip('hide')
+      }, 200)
+    })
+  }
+}
+</script>
+
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+
+  .title {
+    font-size: 28px;
+    font-weight: 300;
+    margin: 7px 0;
+    font-weight: normal;
+    color: #777;
+    margin-bottom: 20px;
+  }
+
+  .free {
+    color: #777;
+    font-size: 15px;
+  }
+
+  .card {
+    border-radius: 8px;
+    position: relative;
+    margin-bottom: 60px;
+    border: 0;
+  }
+
+  .card .thumbnail {
+    border: 0 none;
+    padding: 0;
+    margin: 0;
+    min-height: 250px;
+    position: relative;
+    background: transparent
+  }
+
+  .card-small .thumbnail {
+    min-height: 200px;
+  }
+
+  .card .thumbnail img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .card .thumbnail>img {
+    border-radius: 8px 8px;
+    box-shadow: 0 25px 20px -21px rgba(0, 0, 0, 0.57)
+  }
+
+  .card .details {
+    top: 0;
+    display: block;
+    height: 60px;
+    padding: 10px 15px 0;
+    position: absolute;
+    width: 100%;
+    border-radius: 8px 8px 0 0
+  }
+
+  .card .header,
+  .card .main,
+  .card .footer {
+    display: block
+  }
+
+  .card .time {
+    color: #777777;
+    font-size: 15px;
+    margin-top: 2px;
+    text-transform: uppercase
+  }
+
+  .card .time.premium-product {
+    color: #444444;
+    font-size: 19px;
+    margin: 1px
+  }
+
+  .card .numbers {
+    color: #FFFFFF;
+    float: right;
+    margin-top: 6px;
+    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.34)
+  }
+
+  .card .numbers .downloads,
+  .card .numbers .comments-icon {
+    margin-left: 6px;
+    font-size: 15px;
+    font-weight: 500
+  }
+
+  .card .numbers .fa {
+    font-size: 18px
+  }
+
+  .card .description {
+    color: #FFFFFF;
+    margin-top: 40px;
+    height: 125px;
+    font-size: 18px;
+    opacity: 0.7
+  }
+
+  .card a:hover .description {
+    opacity: 1
+  }
+
+  .card .actions .btn {
+    margin-left: 5px;
+    margin-right: 5px;
+    top: 50%;
+    position: relative;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%)
+  }
+
+  .card .actions .btn-round:not(.btn-radius) {
+    font-size: 18px;
+    padding: 14px 14px;
+    line-height: 1;
+    display: inline-block;
+    width: 48px;
+    height: 48px
+  }
+
+  .btn-neutral.btn-fill {
+    color: #666666 !important;
+    background-color: white;
+    opacity: 1;
+    filter: alpha(opacity=100);
+  }
+
+  .btn-round {
+    border-width: 1px;
+    border-radius: 30px !important;
+    opacity: 0.79;
+    padding: 9px 18px;
+  }
+
+  .card .thumb-cover {
+    padding: 15px 20px;
+    height: 100%;
+    top: 0;
+    position: absolute;
+    opacity: 0;
+    display: block;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 3;
+    content: "";
+    left: 0;
+    border-radius: 8px
+  }
+
+  .card .actions {
+    position: absolute;
+    z-index: 3;
+    top: 50%;
+    left: 0;
+    text-align: center;
+    width: 100%;
+    height: 0;
+    opacity: 0;
+    transition: all .5s ease;
+    -webkit-transition: all .5s ease;
+    -moz-transition: all .5s ease
+  }
+
+  .card:hover .thumb-cover,
+  .card:hover .actions {
+    opacity: 1
+  }
+
+  .card-small .actions {
+    height: 55px;
+    font-size: 14px
+  }
+
+  .card:hover .actions {
+    opacity: 1
+  }
+
+  .card .title {
+    margin-top: 45px;
+    min-height: 115px
+  }
+
+  .card a .title h3 {
+    color: #FFFFFF;
+    font-size: 24px;
+    font-weight: 400;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.57)
+  }
+
+  .card .user {
+    font-weight: 400;
+    color: #FFFFFF;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.23);
+    line-height: 20px;
+    display: block
+  }
+
+  .card .user .name {
+    line-height: 35px;
+    margin-left: 10px;
+    font-size: 16px;
+    float: left
+  }
+
+  .card .user .user-photo {
+    width: 35px;
+    height: 35px;
+    border: 2px solid #FFFFFF;
+    border-radius: 50%;
+    overflow: hidden;
+    float: left
+  }
+
+  .card .user-photo img {
+    width: 33px
+  }
+
+  .card-info {
+    padding: 15px;
+    border-radius: 0 0 12px 12px
+  }
+
+  .card-info [class^='circle-'] {
+    float: left;
+    margin-right: 5px
+  }
+
+  .card-info a:not(.btn) {
+    color: #434343
+  }
+
+  .card-info a:not(.btn):hover {
+    color: #232323
+  }
+
+  .card-info .actions a {
+    color: #777777
+  }
+
+  .card-info .actions a:hover {
+    color: #555555
+  }
+
+  .card-info .actions .blue-text {
+    color: #00bbff
+  }
+
+  .card-info .actions .blue-text:hover {
+    color: #3883c4
+  }
+
+  .card-info h3 {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    font-size: 18px
+  }
+
+  .card-small .card-info h3 {
+    font-size: 18px
+  }
+
+  .card-info p {
+    font-size: 14px;
+    margin: 0;
+    color: #666666;
+    min-height: 50px
+  }
+
+  .card-info .label {
+    background: transparent;
+    border: 1px solid;
+    border-radius: 14px;
+    padding: 5px 10px;
+    font-size: 10px;
+    text-transform: uppercase;
+    position: relative;
+    top: -4px
+  }
+
+  .card-info .label.label-danger {
+    background: transparent
+  }
+
+  .card-info .label .fa {
+    font-size: 12px
+  }
+
+  @media (max-width: 800px) {
+    .card.card-bundle .thumbnail {
+      min-height: 150px
+    }
+
+    .card.card-bundle .details .framework-logo {
+      padding-top: 20px
+    }
+
+    .card.card-bundle .details .framework-logo img {
+      width: 40px;
+      height: 40px
+    }
+
+    .card.card-bundle .details .framework-logo img.default,
+    .card.card-bundle .details .framework-logo img.material {
+      width: 30px;
+      height: 30px
+    }
+
+    .card.card-bundle .details .framework-logo p {
+      padding-top: 5px;
+      font-size: 20px
+    }
+  }
+
+  @media (max-width: 1100px) {
+    .card.card-bundle .details .bundle-details {
+      padding: 10px
+    }
+
+    .card.card-bundle .details .bundle-details i {
+      font-size: 20px
+    }
+
+    .card.card-bundle .details .bundle-details span {
+      font-size: 20px
+    }
+  }
+
+  @media (min-width: 801px) and (max-width: 1100px) {
+    .card.card-bundle .details .framework-logo {
+      padding-top: 25px
+    }
+
+    .card.card-bundle .details .framework-logo img {
+      width: 50px;
+      height: 50px
+    }
+
+    .card.card-bundle .details .framework-logo img.default,
+    .card.card-bundle .details .framework-logo img.material {
+      width: 40px;
+      height: 40px
+    }
+  }
+
+  .card.card-bundle .details {
+    text-align: center;
+    height: auto;
+    color: #FFF;
+    height: 100%
+  }
+
+  .card.card-bundle .details .bundle-details {
+    position: absolute;
+    width: 100%;
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 24px;
+    margin-right: auto;
+    margin-left: auto
+  }
+
+  .card.card-bundle .details .bundle-details i {
+    font-size: 30px
+  }
+
+  .card.card-bundle .details .bundle-details span {
+    display: block;
+    font-size: 35px;
+    font-weight: 300
+  }
+
+  .card.card-bundle .details .bundle-details p {
+    font-size: 12px;
+    font-weight: 500
+  }
+
+  .card.card-bundle .details .framework-logo {
+    position: absolute;
+    width: 100%;
+    padding-bottom: 5px;
+    padding-top: 40px;
+    left: 0;
+    right: 0;
+    top: 0;
+    margin-right: auto;
+    margin-left: auto
+  }
+
+  .card.card-bundle .details .framework-logo img {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%
+  }
+
+  .card.card-bundle .details .framework-logo img.default,
+  .card.card-bundle .details .framework-logo img.material {
+    width: 50px;
+    height: 50px;
+    margin-left: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px
+  }
+
+  .card.card-bundle .details .framework-logo p {
+    padding-top: 20px;
+    font-size: 30px;
+    font-weight: 400
+  }
+
+  .card.card-bundle .mask {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    opacity: .8;
+    border-radius: 8px
+  }
+
+  .card .authors-container {
+    width: 38px
+  }
+
+  .card .authors-container[data-collaborators="2"] {
+    width: 60px
+  }
+
+  .card .authors-container[data-collaborators="3"] {
+    width: 80px
+  }
+
+  .card .authors-container[data-collaborators="4"] {
+    width: 100px
+  }
+
+  .card .authors-container .author:nth-child(2) {
+    margin-left: -14px
+  }
+
+  .card .authors-container .author:nth-child(3) {
+    margin-left: -14px
+  }
+
+  .card .authors-container .author:nth-child(4) {
+    margin-left: -14px
+  }
+
+  .card .authors-container {
+    display: inline-block
+  }
+
+  .card .authors-container>.author>.account-photo {
+    width: 36px;
+    height: 36px
+  }
+
+  .card .author>.account-photo.account-product-owner {
+    border-color: #ff9500
+  }
+</style>

site/_themes/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

site/_themes/vue.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  productionSourceMap: false,
+  publicPath: process.env.NODE_ENV === 'production' ? '/assets/js/themes/' : './',
+  css: { extract: false },
+  chainWebpack: config => {
+    config
+      .plugin('html')
+      .tap(args => {
+        if (process.env.NODE_ENV === 'production') {
+          args[0].filename = 'themes.html'
+          args[0].template = './public/themes.html'
+        }
+        return args
+      })
+  },
+  devServer: {
+    open: false,
+    host: '0.0.0.0',
+    https: false,
+    hotOnly: false,
+    proxy: {
+      '/assets': {
+        target: 'http://localhost:9001'
+      },
+      '/themes': {
+        target: 'http://localhost:9001'
+      }
+    }
+  }
+}

site/assets/css/style.css

@@ -105,100 +105,11 @@
   color: #ffffff;
 }
 
-.theme-card {
-  margin-bottom: 1rem;
-  display: block;
-  font-size: 14px;
-  -webkit-perspective: 1000px;
-  perspective: 1000px;
-}
-
-.theme-cards__title {
-  margin-bottom: 0;
-  font-size: 20px;
-}
-
-.theme-card__body {
-  position: relative;
-  display: block;
-  -webkit-transition: all .2s ease-out;
-  transition: all .2s ease-out;
-  height: 0;
-  padding-bottom: 74.5%;
-  background-color: #E5E9EF;
-  border-radius: 8px;
-  -webkit-box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.06);
-  box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 0, 0, 0.06);
-  -webkit-transition: all .5s ease-out;
-  transition: all .5s ease-out;
-}
-
-.theme-card__body img,
-.theme-card__body .theme-card__img {
-  border-radius: 8px;
-  width: 100% !important;
-}
-
-.theme-card__body a.d-block {
-  height: 0;
-  padding-bottom: 74.5%;
-  overflow: hidden;
-}
-
-.theme-card__body:hover .theme-card__body__overlay,
-.theme-card__body:focus .theme-card__body__overlay {
-  opacity: 1;
-  visibility: visible;
-}
-
-.theme-card__body__overlay {
-  position: absolute;
-  right: 10px;
-  bottom: 10px;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.theme-card__footer {
-  padding: 15px 8px;
-  color: #343434;
-}
-
-@media (max-width: 991px) {
-  .theme-card__footer {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
-}
-
-@media (min-width: 576px) {
-  .theme-card__footer__item+.theme-card__footer__item {
-    text-align: right;
-  }
-}
-
-.theme-card__title,
-.theme-card__title:hover,
-.theme-card__title:focus {
-  font-weight: 500;
-  color: inherit;
-  font-size: 18px;
-}
-
-.theme-card__info {
-  font-size: 13px;
-  color: #838E95;
-  position: relative;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.theme-card__info a {
-  color: #838E95;
-}
-
 .fa-link {
   font-size: 20px;
   color: #333;
 }
+
+header.themes .bd-lead {
+  max-width: 100%;
+}

site/themes/index.md

@@ -1,33 +1,8 @@
 ---
 layout: simple
-title: CSS Frameworks
-description: A list of the integration with some of the most widely used CSS frameworks.
+title: Themes and Templates
+description: Bootstrap Table can help you to build UI Kits, Templates and Dashboards. You can see how developers and designers are using Bootstrap Table in production and real world web applications.
 group: themes
 ---
 
-<div class="row">
-  {% for theme in site.data.themes %}
-  <div class="col-md-6">
-    <div class="theme-card">
-      <div class="theme-card__body">
-        <a class="d-block" href="https://examples.bootstrap-table.com?{{ theme.name }}">
-          <img width="600" height="450" src="{{ site.baseurl }}/assets/images/{{ theme.name }}.png">
-        </a>
-        <div class="theme-card__body__overlay">
-          <a class="btn btn-brand btn-sm" href="{{ site.baseurl }}/themes/{{ theme.name }}">Getting started</a>
-          <a class="btn btn-brand btn-sm" href="https://examples.bootstrap-table.com?{{ theme.name }}">Examples</a>
-        </div>
-      </div>
-      <div class="theme-card__footer">
-        <div class="theme-card__footer__item">
-          <a class="theme-card__title mr-1" href="https://examples.bootstrap-table.com?{{ theme.name }}">{{ theme.title }}</a>
-          <a class="float-right" href="{{ theme.url }}" target="_blank">
-            <i class="fa fa-link"></i>
-          </a>
-          <p class="theme-card__info">{{ theme.description }}</p>
-        </div>
-      </div>
-    </div>
-  </div>
-  {% endfor %}
-</div>
+<div id="app"></div>