homepage widgets, icons, navbar menu fixes

2026-07-27 05:24:38 +04:00 · 2019-10-23 19:59:27 +02:00
parent 00dcd2d9d5
commit 52ef3248ca
110 changed files with 600 additions and 630 deletions
@@ -133,46 +133,46 @@ button_variants:

 socials:
  - name: facebook
-    icon: social/facebook
+    icon: brand/facebook
    title: Facebook
  - name: twitter
-    icon: social/twitter
+    icon: brand/twitter
    title: Twitter
  - name: google
-    icon: social/google
+    icon: brand/google
    title: Google
  - name: youtube
-    icon: social/youtube
+    icon: brand/youtube
    title: Youtube
  - name: vimeo
-    icon: social/vimeo
+    icon: brand/vimeo
    title: Vimeo
  - name: dribbble
-    icon: social/dribbble
+    icon: brand/dribbble
    title: Dribbble
  - name: github
-    icon: social/github
+    icon: brand/github
    title: Github
  - name: instagram
-    icon: social/instagram
+    icon: brand/instagram
    title: Instagram
  - name: pinterest
-    icon: social/pinterest
+    icon: brand/pinterest
    title: Pinterest
  - name: vk
-    icon: social/vk
+    icon: brand/vk
    title: VK
  - name: rss
-    icon: social/rss
+    icon: brand/rss
    title: RSS
  - name: flickr
-    icon: social/flickr
+    icon: brand/flickr
    title: Flickr
  - name: bitbucket
-    icon: social/bitbucket
+    icon: brand/bitbucket
    title: Bitbucker
  - name: tabler
-    icon: social/tabler
+    icon: brand/tabler
    title: Tabler

 months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
@@ -24,5 +24,13 @@ bs.init({
    ignoreInitial: true,
  },
  notify: false,
-  open: false
+  open: false,
+  snippetOptions: {
+    rule: {
+      match: /<\/head>/i,
+      fn: function (snippet, match) {
+        return snippet + match;
+      }
+    }
+  }
 });
@@ -3,4 +3,4 @@ title: Card with footer buttons
 columns: 2
 ---

-{% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
+{% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
@@ -3,4 +3,4 @@ title: Card with side image
 columns: 2
 ---

-{% include_cached cards/card-image.html title="Card with side image" %}
+{% include cards/card-image.html title="Card with side image" %}
@@ -1 +0,0 @@
-{}
@@ -1,350 +1,350 @@
 brand:
-  android: \f101
-  apple: \f102
-  asana: \f103
-  atlassian: \f104
-  basecamp: \f105
-  behance: \f106
-  bing: \f107
-  bitbucket: \f108
-  bitcoin: \f109
-  blogger: \f10a
-  bootstrap: \f10b
-  buddy: \f10c
-  circleci: \f10d
-  codepen: \f10e
-  codeship: \f10f
-  css3: \f110
-  digitalocean: \f111
-  disqus: \f112
-  docker: \f113
-  dribbble: \f114
-  dropbox: \f115
-  facebook: \f116
-  figma: \f117
-  flickr: \f118
-  foursquare: \f119
-  git: \f11a
-  github: \f11b
-  gitlab: \f11c
-  google: \f11d
-  googleplus: \f11e
-  gravatar: \f11f
-  hipchat: \f120
-  html5: \f121
-  instagram: \f122
-  invision: \f123
-  javascript: \f124
-  kickstarter: \f125
-  linkedin: \f126
-  medium: \f127
-  meetup: \f128
-  messenger: \f129
-  netflix: \f12a
-  pagekit: \f12b
-  paypal: \f12c
-  pinterest: \f12d
-  producthunt: \f12e
-  rss: \f12f
-  sass: \f130
-  sentry: \f131
-  skype: \f132
-  slack: \f133
-  snapchat: \f134
-  spotify: \f135
-  strava: \f136
-  stripe: \f137
-  tabler: \f138
-  telegram: \f139
-  tumblr: \f13a
-  twitter: \f13b
-  typescript: \f13c
-  uber: \f13d
-  uikit: \f13e
-  vimeo: \f13f
-  vk: \f140
-  wechat: \f141
-  whatsapp: \f142
-  wordpress: \f143
-  ycombinator: \f144
-  youtube: \f145
+  - brand/android
+  - brand/apple
+  - brand/asana
+  - brand/atlassian
+  - brand/basecamp
+  - brand/behance
+  - brand/bing
+  - brand/bitbucket
+  - brand/bitcoin
+  - brand/blogger
+  - brand/bootstrap
+  - brand/buddy
+  - brand/circleci
+  - brand/codepen
+  - brand/codeship
+  - brand/css3
+  - brand/digitalocean
+  - brand/disqus
+  - brand/docker
+  - brand/dribbble
+  - brand/dropbox
+  - brand/facebook
+  - brand/figma
+  - brand/flickr
+  - brand/foursquare
+  - brand/git
+  - brand/github
+  - brand/gitlab
+  - brand/google
+  - brand/googleplus
+  - brand/gravatar
+  - brand/hipchat
+  - brand/html5
+  - brand/instagram
+  - brand/invision
+  - brand/javascript
+  - brand/kickstarter
+  - brand/linkedin
+  - brand/medium
+  - brand/meetup
+  - brand/messenger
+  - brand/netflix
+  - brand/pagekit
+  - brand/paypal
+  - brand/pinterest
+  - brand/producthunt
+  - brand/rss
+  - brand/sass
+  - brand/sentry
+  - brand/skype
+  - brand/slack
+  - brand/snapchat
+  - brand/spotify
+  - brand/strava
+  - brand/stripe
+  - brand/tabler
+  - brand/telegram
+  - brand/tumblr
+  - brand/twitter
+  - brand/typescript
+  - brand/uber
+  - brand/uikit
+  - brand/vimeo
+  - brand/vk
+  - brand/wechat
+  - brand/whatsapp
+  - brand/wordpress
+  - brand/ycombinator
+  - brand/youtube
 fe:
-  activity: \f146
-  airplay: \f147
-  alert-circle: \f148
-  alert-octagon: \f149
-  alert-triangle: \f14a
-  align-center: \f14b
-  align-justify: \f14c
-  align-left: \f14d
-  align-right: \f14e
-  anchor: \f14f
-  aperture: \f150
-  archive: \f151
-  arrow-down-circle: \f152
-  arrow-down-left: \f153
-  arrow-down-right: \f154
-  arrow-down: \f155
-  arrow-left-circle: \f156
-  arrow-left: \f157
-  arrow-right-circle: \f158
-  arrow-right: \f159
-  arrow-up-circle: \f15a
-  arrow-up-left: \f15b
-  arrow-up-right: \f15c
-  arrow-up: \f15d
-  at-sign: \f15e
-  award: \f15f
-  bar-chart-2: \f160
-  bar-chart: \f161
-  battery-charging: \f162
-  battery: \f163
-  bell-off: \f164
-  bell: \f165
-  bluetooth: \f166
-  bold: \f167
-  book-open: \f168
-  book: \f169
-  bookmark: \f16a
-  box: \f16b
-  briefcase: \f16c
-  calendar: \f16d
-  camera-off: \f16e
-  camera: \f16f
-  cast: \f170
-  check-circle: \f171
-  check-square: \f172
-  check: \f173
-  chevron-down: \f174
-  chevron-left: \f175
-  chevron-right: \f176
-  chevron-up: \f177
-  chevrons-down: \f178
-  chevrons-left: \f179
-  chevrons-right: \f17a
-  chevrons-up: \f17b
-  chrome: \f17c
-  circle: \f17d
-  clipboard: \f17e
-  clock: \f17f
-  cloud-drizzle: \f180
-  cloud-lightning: \f181
-  cloud-off: \f182
-  cloud-rain: \f183
-  cloud-snow: \f184
-  cloud: \f185
-  code: \f186
-  codepen: \f187
-  codesandbox: \f188
-  coffee: \f189
-  columns: \f18a
-  command: \f18b
-  compass: \f18c
-  copy: \f18d
-  corner-down-left: \f18e
-  corner-down-right: \f18f
-  corner-left-down: \f190
-  corner-left-up: \f191
-  corner-right-down: \f192
-  corner-right-up: \f193
-  corner-up-left: \f194
-  corner-up-right: \f195
-  cpu: \f196
-  credit-card: \f197
-  crop: \f198
-  crosshair: \f199
-  database: \f19a
-  delete: \f19b
-  disc: \f19c
-  dollar-sign: \f19d
-  download-cloud: \f19e
-  download: \f19f
-  droplet: \f1a0
-  edit-2: \f1a1
-  edit-3: \f1a2
-  edit: \f1a3
-  external-link: \f1a4
-  eye-off: \f1a5
-  eye: \f1a6
-  facebook: \f1a7
-  fast-forward: \f1a8
-  feather: \f1a9
-  figma: \f1aa
-  file-minus: \f1ab
-  file-plus: \f1ac
-  file-text: \f1ad
-  file: \f1ae
-  film: \f1af
-  filter: \f1b0
-  flag: \f1b1
-  folder-minus: \f1b2
-  folder-plus: \f1b3
-  folder: \f1b4
-  frown: \f1b5
-  gift: \f1b6
-  git-branch: \f1b7
-  git-commit: \f1b8
-  git-merge: \f1b9
-  git-pull-request: \f1ba
-  github: \f1bb
-  gitlab: \f1bc
-  globe: \f1bd
-  grid: \f1be
-  hard-drive: \f1bf
-  hash: \f1c0
-  headphones: \f1c1
-  heart: \f1c2
-  help-circle: \f1c3
-  hexagon: \f1c4
-  home: \f1c5
-  image: \f1c6
-  inbox: \f1c7
-  info: \f1c8
-  instagram: \f1c9
-  italic: \f1ca
-  key: \f1cb
-  layers: \f1cc
-  layout: \f1cd
-  life-buoy: \f1ce
-  link-2: \f1cf
-  link: \f1d0
-  linkedin: \f1d1
-  list: \f1d2
-  loader: \f1d3
-  lock: \f1d4
-  log-in: \f1d5
-  log-out: \f1d6
-  mail: \f1d7
-  map-pin: \f1d8
-  map: \f1d9
-  maximize-2: \f1da
-  maximize: \f1db
-  meh: \f1dc
-  menu: \f1dd
-  message-circle: \f1de
-  message-square: \f1df
-  mic-off: \f1e0
-  mic: \f1e1
-  minimize-2: \f1e2
-  minimize: \f1e3
-  minus-circle: \f1e4
-  minus-square: \f1e5
-  minus: \f1e6
-  monitor: \f1e7
-  moon: \f1e8
-  more-horizontal: \f1e9
-  more-vertical: \f1ea
-  mouse-pointer: \f1eb
-  move: \f1ec
-  music: \f1ed
-  navigation-2: \f1ee
-  navigation: \f1ef
-  octagon: \f1f0
-  package: \f1f1
-  paperclip: \f1f2
-  pause-circle: \f1f3
-  pause: \f1f4
-  pen-tool: \f1f5
-  percent: \f1f6
-  phone-call: \f1f7
-  phone-forwarded: \f1f8
-  phone-incoming: \f1f9
-  phone-missed: \f1fa
-  phone-off: \f1fb
-  phone-outgoing: \f1fc
-  phone: \f1fd
-  pie-chart: \f1fe
-  play-circle: \f1ff
-  play: \f200
-  plus-circle: \f201
-  plus-square: \f202
-  plus: \f203
-  pocket: \f204
-  power: \f205
-  printer: \f206
-  radio: \f207
-  refresh-ccw: \f208
-  refresh-cw: \f209
-  repeat: \f20a
-  rewind: \f20b
-  rotate-ccw: \f20c
-  rotate-cw: \f20d
-  rss: \f20e
-  save: \f20f
-  scissors: \f210
-  search: \f211
-  send: \f212
-  server: \f213
-  settings: \f214
-  share-2: \f215
-  share: \f216
-  shield-off: \f217
-  shield: \f218
-  shopping-bag: \f219
-  shopping-cart: \f21a
-  shuffle: \f21b
-  sidebar: \f21c
-  skip-back: \f21d
-  skip-forward: \f21e
-  slack: \f21f
-  slash: \f220
-  sliders: \f221
-  smartphone: \f222
-  smile: \f223
-  speaker: \f224
-  square: \f225
-  star: \f226
-  stop-circle: \f227
-  sun: \f228
-  sunrise: \f229
-  sunset: \f22a
-  tablet: \f22b
-  tag: \f22c
-  target: \f22d
-  terminal: \f22e
-  thermometer: \f22f
-  thumbs-down: \f230
-  thumbs-up: \f231
-  toggle-left: \f232
-  toggle-right: \f233
-  trash-2: \f234
-  trash: \f235
-  trello: \f236
-  trending-down: \f237
-  trending-up: \f238
-  triangle: \f239
-  truck: \f23a
-  tv: \f23b
-  twitter: \f23c
-  type: \f23d
-  umbrella: \f23e
-  underline: \f23f
-  unlock: \f240
-  upload-cloud: \f241
-  upload: \f242
-  user-check: \f243
-  user-minus: \f244
-  user-plus: \f245
-  user-x: \f246
-  user: \f247
-  users: \f248
-  video-off: \f249
-  video: \f24a
-  voicemail: \f24b
-  volume-1: \f24c
-  volume-2: \f24d
-  volume-x: \f24e
-  volume: \f24f
-  watch: \f250
-  wifi-off: \f251
-  wifi: \f252
-  wind: \f253
-  x-circle: \f254
-  x-octagon: \f255
-  x-square: \f256
-  x: \f257
-  youtube: \f258
-  zap-off: \f259
-  zap: \f25a
-  zoom-in: \f25b
-  zoom-out: \f25c
+  - activity
+  - airplay
+  - alert-circle
+  - alert-octagon
+  - alert-triangle
+  - align-center
+  - align-justify
+  - align-left
+  - align-right
+  - anchor
+  - aperture
+  - archive
+  - arrow-down-circle
+  - arrow-down-left
+  - arrow-down-right
+  - arrow-down
+  - arrow-left-circle
+  - arrow-left
+  - arrow-right-circle
+  - arrow-right
+  - arrow-up-circle
+  - arrow-up-left
+  - arrow-up-right
+  - arrow-up
+  - at-sign
+  - award
+  - bar-chart-2
+  - bar-chart
+  - battery-charging
+  - battery
+  - bell-off
+  - bell
+  - bluetooth
+  - bold
+  - book-open
+  - book
+  - bookmark
+  - box
+  - briefcase
+  - calendar
+  - camera-off
+  - camera
+  - cast
+  - check-circle
+  - check-square
+  - check
+  - chevron-down
+  - chevron-left
+  - chevron-right
+  - chevron-up
+  - chevrons-down
+  - chevrons-left
+  - chevrons-right
+  - chevrons-up
+  - chrome
+  - circle
+  - clipboard
+  - clock
+  - cloud-drizzle
+  - cloud-lightning
+  - cloud-off
+  - cloud-rain
+  - cloud-snow
+  - cloud
+  - code
+  - codepen
+  - codesandbox
+  - coffee
+  - columns
+  - command
+  - compass
+  - copy
+  - corner-down-left
+  - corner-down-right
+  - corner-left-down
+  - corner-left-up
+  - corner-right-down
+  - corner-right-up
+  - corner-up-left
+  - corner-up-right
+  - cpu
+  - credit-card
+  - crop
+  - crosshair
+  - database
+  - delete
+  - disc
+  - dollar-sign
+  - download-cloud
+  - download
+  - droplet
+  - edit-2
+  - edit-3
+  - edit
+  - external-link
+  - eye-off
+  - eye
+  - facebook
+  - fast-forward
+  - feather
+  - figma
+  - file-minus
+  - file-plus
+  - file-text
+  - file
+  - film
+  - filter
+  - flag
+  - folder-minus
+  - folder-plus
+  - folder
+  - frown
+  - gift
+  - git-branch
+  - git-commit
+  - git-merge
+  - git-pull-request
+  - github
+  - gitlab
+  - globe
+  - grid
+  - hard-drive
+  - hash
+  - headphones
+  - heart
+  - help-circle
+  - hexagon
+  - home
+  - image
+  - inbox
+  - info
+  - instagram
+  - italic
+  - key
+  - layers
+  - layout
+  - life-buoy
+  - link-2
+  - link
+  - linkedin
+  - list
+  - loader
+  - lock
+  - log-in
+  - log-out
+  - mail
+  - map-pin
+  - map
+  - maximize-2
+  - maximize
+  - meh
+  - menu
+  - message-circle
+  - message-square
+  - mic-off
+  - mic
+  - minimize-2
+  - minimize
+  - minus-circle
+  - minus-square
+  - minus
+  - monitor
+  - moon
+  - more-horizontal
+  - more-vertical
+  - mouse-pointer
+  - move
+  - music
+  - navigation-2
+  - navigation
+  - octagon
+  - package
+  - paperclip
+  - pause-circle
+  - pause
+  - pen-tool
+  - percent
+  - phone-call
+  - phone-forwarded
+  - phone-incoming
+  - phone-missed
+  - phone-off
+  - phone-outgoing
+  - phone
+  - pie-chart
+  - play-circle
+  - play
+  - plus-circle
+  - plus-square
+  - plus
+  - pocket
+  - power
+  - printer
+  - radio
+  - refresh-ccw
+  - refresh-cw
+  - repeat
+  - rewind
+  - rotate-ccw
+  - rotate-cw
+  - rss
+  - save
+  - scissors
+  - search
+  - send
+  - server
+  - settings
+  - share-2
+  - share
+  - shield-off
+  - shield
+  - shopping-bag
+  - shopping-cart
+  - shuffle
+  - sidebar
+  - skip-back
+  - skip-forward
+  - slack
+  - slash
+  - sliders
+  - smartphone
+  - smile
+  - speaker
+  - square
+  - star
+  - stop-circle
+  - sun
+  - sunrise
+  - sunset
+  - tablet
+  - tag
+  - target
+  - terminal
+  - thermometer
+  - thumbs-down
+  - thumbs-up
+  - toggle-left
+  - toggle-right
+  - trash-2
+  - trash
+  - trello
+  - trending-down
+  - trending-up
+  - triangle
+  - truck
+  - tv
+  - twitter
+  - type
+  - umbrella
+  - underline
+  - unlock
+  - upload-cloud
+  - upload
+  - user-check
+  - user-minus
+  - user-plus
+  - user-x
+  - user
+  - users
+  - video-off
+  - video
+  - voicemail
+  - volume-1
+  - volume-2
+  - volume-x
+  - volume
+  - watch
+  - wifi-off
+  - wifi
+  - wind
+  - x-circle
+  - x-octagon
+  - x-square
+  - x
+  - youtube
+  - zap-off
+  - zap
+  - zoom-in
+  - zoom-out
@@ -1,3 +1,8 @@
+home:
+  url: index.html
+  title: Home
+  icon: home
+
 form-elements:
  url: form-elements.html
  title: Form elements
@@ -58,7 +63,7 @@ layout:
 docs:
  title: Documentation
  icon: file-text
-  url: docs.html
+  url: docs/index.html

 #changelog:
 #  url: changelog.html
@@ -31,7 +31,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
 If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.

 {% example html columns=3 %}
-<div class="row row-cards row-deck">
+<div class="row row-deck">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">Short content</div>
@@ -61,7 +61,7 @@ You can also add the image on the left side of the card. All you need do to is:
 ### Color variations

 {% example html columns=3 %}
-<div class="row row-cards row-deck">
+<div class="row row-deck">
    <div class="col-md-4">
        {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
    </div>
@@ -1,5 +1,5 @@
 <div class="card-group">
-   {% include_cached cards/card.html link=true class="text-center" body="This is first card" inactive=true %}
-   {% include_cached cards/card.html link=true class="text-center" body="This is second card" active=true %}
-   {% include_cached cards/card.html link=true class="text-center" body="This is third card" %}
+   {% include cards/card.html link=true class="text-center" body="This is first card" inactive=true %}
+   {% include cards/card.html link=true class="text-center" body="This is second card" active=true %}
+   {% include cards/card.html link=true class="text-center" body="This is third card" %}
 </div>
@@ -22,7 +22,7 @@
      {% if include.header or include.header-title or include.header-tabs or include.header-pills %}
      <div class="card-header">
         {% if include.header-tabs or include.header-pills %}
-            {% include_cached ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}
+            {% include ui/nav.html header=true pills=include.header-pills tabs=include.header-tabs %}

         {% else %}
            <h3 class="card-title">{{ include.header-title | default: 'Header title' }}</h3>
@@ -1,87 +0,0 @@
-<form action="https://httpbin.org/post" method="post" class="card">
-   <div class="card-header">
-      <h4 class="card-title">Form elements</h4>
-   </div>
-   <div class="card-body">
-      <div class="row">
-         <div class="col-xl-4">
-            <div class="row">
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
-            </div>
-         </div>
-         <div class="col-xl-4">
-            <div class="row">
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
-            </div>
-         </div>
-         <div class="col-xl-4">
-            <div class="row">
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
-               <div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
-            </div>
-         </div>
-      </div>
-   </div>
-   <div class="card-footer text-right">
-      <div class="d-flex">
-         <a href="javascript:void(0)" class="btn btn-link">Cancel</a>
-         <button type="submit" class="btn btn-primary ml-auto">Send data</button>
-      </div>
-
-   </div>
-</form>
-
-{% comment %}
-<script>
-   $(document).ready(function () {
-      $('#input-tags').selectize({
-         delimiter: ',',
-         persist: false,
-         create: function (input) {
-            return {
-               value: input,
-               text: input
-            };
-         }
-      });
-
-      $('#select-beast').selectize({});
-
-      $('#select-users').selectize({
-         render: {
-            option: function (data, escape) {
-               return '<div>' +
-                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
-                  '<span class="title">' + escape(data.text) + '</span>' +
-                  '</div>';
-            },
-            item: function (data, escape) {
-               return '<div>' +
-                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
-                  escape(data.text) +
-                  '</div>';
-            }
-         }
-      });
-
-      $('#select-countries').selectize({
-         render: {
-            option: function (data, escape) {
-               return '<div>' +
-                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
-                  '<span class="title">' + escape(data.text) + '</span>' +
-                  '</div>';
-            },
-            item: function (data, escape) {
-               return '<div>' +
-                  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
-                  escape(data.text) +
-                  '</div>';
-            }
-         }
-      });
-   });
-</script>
-{% endcomment %}
@@ -1,29 +1,17 @@
 <div class="card">
-   <div class="card-header">
-      <div class="card-title">{{ include.title }}</div>
-   </div>
   <div class="card-body">
-      <div class="row">
-         <div class="col-3">
-            <p>{{ include.description }} For more info <a href="{{ include.url }}" target="_blank">click here</a>.
-            </p>
-            <p><code>&lt;i class="{{ include.icon_class }} {{ include.icon_class }}-ICON_NAME"&gt;&lt;/i&gt;</code>
-            </p>
-         </div>
-         <div class="col-9">
-            <div class="icons-list-wrap">
-               <ul class="icons-list">
-                  {% for icon in include.icons %}
-                  <li class="icons-list-item">
-                     {% include ui/icon.html icon=icon class="icon-md" %}
-                  </li>
-                  {% endfor %}
-                  {% for icon in (0..20) %}
-                  <li></li>
-                  {% endfor %}
-               </ul>
-            </div>
-         </div>
+      <div class="card-title">{{ include.title }}</div>
+      <div class="icons-list-wrap">
+         <ul class="icons-list">
+            {% for icon in site.data.icons[include.group] %}
+            <li class="icons-list-item">
+               {% include_cached ui/icon.html icon=icon class="icon-md" %}
+            </li>
+            {% endfor %}
+            {% for icon in (0..20) %}
+            <li></li>
+            {% endfor %}
+         </ul>
      </div>
   </div>
 </div>
@@ -1,16 +1,14 @@
 <div class="card">
 	<div class="card-body p-4 py-5 text-center">
-		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" %}
-		<h3>{{ include.title | default: "New website" }}</h3>
-		<p class="text-muted">Due to: 28 Aug 2018</p>
+		{% include ui/avatar.html size="xl" placeholder="W" class="mb-4" color=include.project-color %}
+		<h3 class="mb-0">{{ include.title | default: "New website" }}</h3>
+		<p class="text-muted">Due to: {{ include.date | default: '28 Aug 2019' }}</p>
 		<p class="mb-3">
-			<span class="tag">Development</span>
+			<span class="badge bg-{{ include.stage-color | default: 'green' }}-lt">{{ include.stage | default: 'Waiting' }}</span>
 		</p>
 		<div>
-			{% include ui/avatar-list.html text="+5" stacked=true %}
+			{% include ui/avatar-list.html stacked=true offset=include.avatar-offset limit=include.avatar-limit %}
 		</div>
 	</div>
-	<div class="progress card-progress">
-		<div class="progress-bar bg-green" style="width: 20%"></div>
-	</div>
+	{% include ui/progress.html class="card-progress" percentage=include.percentage color=include.percentage-color %}
 </div>
@@ -17,4 +17,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>
@@ -44,4 +44,4 @@
            </div>
        </div>
    </div>
-</div>
+</div>
@@ -10,9 +10,9 @@
        <div class="text-muted mb-1">{{ p.email }}</div>
        <div class="text-muted mb-4">{{ p.ssn }}</div>
        <div class="d-flex justify-content-center">
-            {% include ui/icon-brand.html icon="facebook-f" class="mr-2 icon-filled text-facebook" %}
-            {% include ui/icon-brand.html icon="twitter" class="icon-filled text-twitter mx-2" %}
-            {% include ui/icon-brand.html icon="youtube" class="icon-filled text-youtube mx-2" %}
+            {% include ui/icon.html icon="brand/facebook" class="mr-2 text-facebook" %}
+            {% include ui/icon.html icon="brand/twitter" class="text-twitter mx-2" %}
+            {% include ui/icon.html icon="brand/youtube" class="text-youtube mx-2" %}
        </div>
    </div>
 </div>
@@ -1,4 +1,4 @@
-<div class="row row-cards">
+<div class="row row-deck">
   <div class="col-sm-6 col-lg-3">
      {% include cards/charts/sales.html %}
   </div>
@@ -49,32 +49,30 @@
      </div>
   </div>

-   <div class="col-md-6">
+   <div class="col-lg-6">
+      <div class="row">
+         <div class="col-md-6">
+            {% include cards/project-summary.html stage-color="red" %}
+         </div>
+         <div class="col-md-6">
+            {% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" percentage=80 percentage-color="green" %}
+         </div>

+         <div class="col-6 col-sm-4">
+            {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
+         </div>
+         <div class="col-6 col-sm-4">
+            {% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
+         </div>
+         <div class="col-6 col-sm-4">
+            {% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
+         </div>
+      </div>
   </div>
-   <div class="col-md-6">
+   <div class="col-lg-6">
      {% include cards/map.html title="Top users" %}
   </div>

-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
-   </div>
-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number=17 title="Closed Today" percentage=-3 %}
-   </div>
-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
-   </div>
-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number="27.3K" title="Followers" percentage=3 %}
-   </div>
-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
-   </div>
-   <div class="col-6 col-sm-4 col-lg-2">
-      {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
-   </div>
-
   <div class="col-md-4">
      {% include cards/charts/card.html name="temperature" title="A" height=12 %}
   </div>
@@ -125,7 +123,7 @@
 </div>

 {% comment %}
-<div class="row row-cards row-deck">
+<div class="row row-deck">
   {% for article in site.data.articles limit: 2 %}
   <div class="col-lg-6">
      {% include cards/blog-single.html article=article type="aside" %}
@@ -134,7 +132,7 @@
 </div>
 {% endcomment %}

-<div class="row row-cards row-deck">
+<div class="row row-deck">

   {% comment %}
   <div class="col-12">
@@ -1,4 +1,4 @@
-<header class="navbar navbar-expand-lg{% if include.dark %} navbar-dark{% endif %}{% if include.sticky %} navbar-sticky{% endif %} js-header">
+<header class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %} js-header">
   {% include parts/navbar.html logo=true search=true user-menu=1 person=1 dark=include.dark fluid=include.fluid %}
 </header>

@@ -1,2 +0,0 @@
-{% assign i = 'brands/' | append: include.icon %}
-{% include ui/icon.html icon=i class=include.class %}
@@ -1,7 +1,7 @@
 {% removeemptylines %}
 {% assign svg-file="svg/" | append: include.icon | append: ".svg" %}
 {% capture svg-icon %}
-{% include_cached {{ svg-file }} %}
+{% include {{ svg-file }} %}
 {% endcapture %}

 {% assign replace-to = "icon" %}
@@ -3,7 +3,7 @@ title: Blog
 page-title: Blog
 ---

-<div class="row row-cards row-deck">
+<div class="row row-deck">

   {% for article in site.data.articles limit: 3 %}
   <div class="col-sm-6 col-xl-4">
@@ -5,39 +5,39 @@ page-title: Cards

 <div class="row">
   <div class="col-md-6 col-xl-4">
-      {% include_cached cards/card.html body="This is some text within a card body." %}
-      {% include_cached cards/card.html img-bottom=true title="Card with bottom image" %}
-      {% include_cached cards/card.html active=true body="This is a card with active state." %}
-      {% include_cached cards/card.html inactive=true body="This is some text inactive state." %}
-      {% include_cached cards/card.html footer-elements="more,>switch"  %}
-      {% include_cached cards/card.html footer-elements=">avatars"  %}
-      {% include_cached cards/card.html header-tabs=true %}
-      {% include_cached cards/card.html header-pills=true %}
-      {% include_cached cards/card.html progress=true title="Card with progress bar" %}
-      {% include_cached cards/card.html empty=true %}
+      {% include cards/card.html body="This is some text within a card body." %}
+      {% include cards/card.html img-bottom=true title="Card with bottom image" %}
+      {% include cards/card.html active=true body="This is a card with active state." %}
+      {% include cards/card.html inactive=true body="This is some text inactive state." %}
+      {% include cards/card.html footer-elements="more,>switch"  %}
+      {% include cards/card.html footer-elements=">avatars"  %}
+      {% include cards/card.html header-tabs=true %}
+      {% include cards/card.html header-pills=true %}
+      {% include cards/card.html progress=true title="Card with progress bar" %}
+      {% include cards/card.html empty=true %}
      {% include cards/card-tabs.html count=4 %}
      {% include cards/card-tabs.html count=4 bottom=true id="bottom" %}
   </div>
   <div class="col-md-6 col-xl-8">
-      {% include_cached cards/card-image.html title="Card with left side image" %}
-      {% include_cached cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
-      {% include_cached cards/card-group.html %}
+      {% include cards/card-image.html title="Card with left side image" %}
+      {% include cards/card-image.html title="Card with right side image" right=true img="de6d0fd1feebb6a2.jpg" %}
+      {% include cards/card-group.html %}

      <div class="row">
         <div class="col-xl-6">
-            {% include_cached cards/card.html img-top=true title="Card with top image" %}
-            {% include_cached cards/card.html button=true title="Card with button link" %}
-            {% include_cached cards/card.html status-top="danger" title="Card with top status" %}
-            {% include_cached cards/card.html status-bottom="success" title="Card with bottom status" %}
-            {% include_cached cards/card.html status-left="primary" title="Card with side status" %}
-            {% include_cached cards/card.html class="card-stacked" title="Stacked card" %}
+            {% include cards/card.html img-top=true title="Card with top image" %}
+            {% include cards/card.html button=true title="Card with button link" %}
+            {% include cards/card.html status-top="danger" title="Card with top status" %}
+            {% include cards/card.html status-bottom="success" title="Card with bottom status" %}
+            {% include cards/card.html status-left="primary" title="Card with side status" %}
+            {% include cards/card.html class="card-stacked" title="Stacked card" %}
         </div>
         <div class="col-xl-6">
-            {% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
-            {% include_cached cards/card.html header=true  %}
-            {% include_cached cards/card.html title="Card with footer" footer=true %}
-            {% include_cached cards/card.html title="Card with footer button" footer-button=true %}
-            {% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
+            {% include cards/card.html title="Card title" subtitle="Card subtitle" %}
+            {% include cards/card.html header=true  %}
+            {% include cards/card.html title="Card with footer" footer=true %}
+            {% include cards/card.html title="Card with footer button" footer-button=true %}
+            {% include cards/card.html title="Card with footer buttons" footer-buttons=true %}
         </div>
      </div>
   </div>
@@ -3,7 +3,7 @@ title: Charts
 menu: charts
 ---

-<div class="row row-cards">
+<div class="row">
   {% for chart in site.data.charts %}
   {% if chart[1].display %}
   {% assign chart-name = chart[0] %}
@@ -3,17 +3,18 @@ title: Dropdowns
 page-title: Dropdowns
 ---

-{% include_cached ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
-{% include_cached ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true separated=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true active=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true disabled=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true header=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true icons=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true icons=true header=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true arrow=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true dark=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true dark=true separated=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true badge=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true check=true class="mr-3 mb-3 align-top" %}
+{% include ui/dropdown-menu.html show=true radio=true class="mr-3 mb-3 align-top" %}
@@ -5,7 +5,94 @@ menu: forms
 ---

 <div class="row">
-  <div class="col-12">
-    {% include cards/form-elements.html %}
-  </div>
+   <div class="col-12">
+      <form action="https://httpbin.org/post" method="post" class="card">
+         <div class="card-header">
+            <h4 class="card-title">Form elements</h4>
+         </div>
+         <div class="card-body">
+            <div class="row">
+               <div class="col-xl-4">
+                  <div class="row">
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-2.html %}</div>
+                  </div>
+               </div>
+               <div class="col-xl-4">
+                  <div class="row">
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-3.html %}</div>
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-4.html %}</div>
+                  </div>
+               </div>
+               <div class="col-xl-4">
+                  <div class="row">
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-5.html %}</div>
+                     <div class="col-md-6 col-xl-12">{% include forms/form-elements-6.html %}</div>
+                  </div>
+               </div>
+            </div>
+         </div>
+         <div class="card-footer text-right">
+            <div class="d-flex">
+               <a href="javascript:void(0)" class="btn btn-link">Cancel</a>
+               <button type="submit" class="btn btn-primary ml-auto">Send data</button>
+            </div>
+
+         </div>
+      </form>
+
+      {% comment %}
+      <script>
+		  $(document).ready(function () {
+			  $('#input-tags').selectize({
+				  delimiter: ',',
+				  persist: false,
+				  create: function (input) {
+					  return {
+						  value: input,
+						  text: input
+					  };
+				  }
+			  });
+
+			  $('#select-beast').selectize({});
+
+			  $('#select-users').selectize({
+				  render: {
+					  option: function (data, escape) {
+						  return '<div>' +
+							  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
+							  '<span class="title">' + escape(data.text) + '</span>' +
+							  '</div>';
+					  },
+					  item: function (data, escape) {
+						  return '<div>' +
+							  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
+							  escape(data.text) +
+							  '</div>';
+					  }
+				  }
+			  });
+
+			  $('#select-countries').selectize({
+				  render: {
+					  option: function (data, escape) {
+						  return '<div>' +
+							  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
+							  '<span class="title">' + escape(data.text) + '</span>' +
+							  '</div>';
+					  },
+					  item: function (data, escape) {
+						  return '<div>' +
+							  '<span class="image"><img src="{{ site.base }}' + data.image + '" alt=""></span>' +
+							  escape(data.text) +
+							  '</div>';
+					  }
+				  }
+			  });
+		  });
+      </script>
+      {% endcomment %}
+
+   </div>
 </div>
@@ -26,27 +26,5 @@ page-title-actions: home
 		{% include cards/tasks.html %}
 		{% include cards/company-employees.html %}
 		{% include cards/most-visited-pages.html %}
-		{% include cards/form-elements.html %}
-	</div>
-	<div class="col-md-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-6 col-lg-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-6 col-lg-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-6 col-lg-4">
-		{% include cards/simple.html %}
-	</div>
-	<div class="col-md-6 col-lg-4">
-		{% include cards/progress-multi.html %}
 	</div>
 </div>
@@ -3,16 +3,12 @@ title: Icons
 ---


- <div class="row row-cards">
-     <div class="col">
-         {% include cards/icons.html title="Feather Icons" icons=site.data.icons-fe icon_class="fe"
-         url="https://feathericons.com" description='Simply beautiful open source icons.' %}
-     </div>
+ <div class="row">
+    <div class="col">
+       {% include cards/icons.html title="Feather icons" group="fe" %}
+    </div>
+    <div class="col">
+       {% include cards/icons.html title="Brand icons" group="brand" %}
+    </div>
 </div>

- <div class="row row-cards">
-     <div class="col">
-         {% include cards/icons-brands.html title="Font Awesome Brands Icons" icons=site.data.icons-fa icon_class="fa"
-         url="https://fontawesome.com/icons/?s=brands" description='Simply beautiful open source icons.' %}
-     </div>
- </div>
@@ -3,7 +3,7 @@ title: Dashboard
 page-title: Dashboard
 page-pretitle: Overview
 page-title-actions: true
-header-primary: false
+menu: home
 ---

 {% include_cached layout/homepage.html %}
@@ -4,4 +4,3 @@ dark-theme: true
 page-title: Dashboard
 ---

-{% include_cached layout/homepage.html %}
@@ -3,4 +3,4 @@ layout: single
 title: Login
 ---

-{% include cards/login.html show-header="1" %}
+{% include cards/login.html show-header="1" %}
@@ -3,4 +3,4 @@ layout: single
 title: Register
 ---

-{% include cards/register.html %}
+{% include cards/register.html %}
--- a/Show More
+++ b/Show More