j1-template 2020.0.17 → 2020.0.22
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_includes/themes/j1/blocks/ads/ad.html +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +4 -4
- data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +2 -2
- data/_includes/themes/j1/blocks/footer/generator.html +2 -2
- data/_includes/themes/j1/layouts/content_generator_blog_archive.html +21 -18
- data/_includes/themes/j1/layouts/content_generator_collection.html +4 -4
- data/_includes/themes/j1/layouts/content_generator_page.html +11 -59
- data/_includes/themes/j1/layouts/content_generator_post.html +7 -7
- data/_includes/themes/j1/layouts/layout_metadata_generator.html +2 -2
- data/_includes/themes/j1/modules/connectors/ad/google-adsense.html +1 -1
- data/_includes/themes/j1/modules/connectors/ads +2 -2
- data/_includes/themes/j1/modules/connectors/analytic/google-analytics.html +1 -1
- data/_includes/themes/j1/modules/connectors/analytics +2 -2
- data/_includes/themes/j1/modules/connectors/comment/disqus.html +1 -1
- data/_includes/themes/j1/modules/connectors/comments +2 -2
- data/_includes/themes/j1/modules/connectors/translator +2 -2
- data/_includes/themes/j1/modules/navigator/generator.html +9 -5
- data/_includes/themes/j1/procedures/global/attributes_loader.proc +117 -0
- data/_includes/themes/j1/procedures/global/create_bs_button.proc +11 -10
- data/_includes/themes/j1/procedures/global/create_word_cloud.proc +14 -12
- data/_includes/themes/j1/procedures/global/get_documents_dir.proc +1 -1
- data/_includes/themes/j1/procedures/global/set_env_entry_document.proc +3 -3
- data/_includes/themes/j1/procedures/global/setup.proc +9 -9
- data/_includes/themes/j1/procedures/layouts/content_writer.proc +1 -2
- data/_includes/themes/j1/procedures/posts/collate_calendar.proc +1 -1
- data/_includes/themes/j1/procedures/posts/collate_list.proc +1 -1
- data/_includes/themes/j1/procedures/posts/collate_timeline.proc +38 -39
- data/_layouts/blog_archive.html +4 -3
- data/_layouts/collection.html +1 -1
- data/_layouts/default.html +3 -3
- data/_layouts/home.html +3 -3
- data/_layouts/page.html +2 -2
- data/_layouts/post.html +3 -3
- data/apps/public/cc/cc.yml +3 -5
- data/assets/data/authclient.html +7 -7
- data/assets/data/banner.html +31 -26
- data/assets/data/carousel.json +1 -1
- data/assets/data/cookiebar.html +21 -17
- data/assets/data/footer.html +1 -1
- data/assets/data/galleries.json +1 -1
- data/assets/data/gallery_customizer.html +2 -2
- data/assets/data/mdi_icons.json +1 -1
- data/assets/data/menu.html +6 -6
- data/assets/data/mmenu.html +6 -6
- data/assets/data/mmenu_sidebar.html +1 -1
- data/assets/data/mmenu_toc.html +1 -1
- data/assets/data/panel.html +191 -125
- data/assets/data/quicklinks.html +3 -3
- data/assets/data/search.json +2 -2
- data/assets/data/ssm.html +2 -2
- data/assets/data/themes.json +9 -7
- data/assets/data/twa_v1.json +1 -1
- data/assets/themes/j1/adapter/js/algolia.js +2 -2
- data/assets/themes/j1/adapter/js/attic.js +2 -2
- data/assets/themes/j1/adapter/js/back2top.js +8 -10
- data/assets/themes/j1/adapter/js/{mdb.js → bmd.js} +11 -11
- data/assets/themes/j1/adapter/js/carousel.js +136 -135
- data/assets/themes/j1/adapter/js/clipboard.js +3 -3
- data/assets/themes/j1/adapter/js/cookiebar.js +1 -1
- data/assets/themes/j1/adapter/js/framer.js +2 -6
- data/assets/themes/j1/adapter/js/gallery_customizer.js +2 -2
- data/assets/themes/j1/adapter/js/j1.js +45 -21
- data/assets/themes/j1/adapter/js/jf_gallery.js +2 -2
- data/assets/themes/j1/adapter/js/lightbox.js +2 -2
- data/assets/themes/j1/adapter/js/logger.js +2 -2
- data/assets/themes/j1/adapter/js/mmenu.js +17 -11
- data/assets/themes/j1/adapter/js/navigator.js +139 -67
- data/assets/themes/j1/adapter/js/rouge.js +246 -0
- data/assets/themes/j1/adapter/js/rtable.js +181 -0
- data/assets/themes/j1/adapter/js/searcher.js +2 -2
- data/assets/themes/j1/adapter/js/ssm.js +28 -11
- data/assets/themes/j1/adapter/js/themer.js +68 -122
- data/assets/themes/j1/adapter/js/toccer.js +10 -2
- data/assets/themes/j1/core/css/animate.css +17 -0
- data/assets/themes/j1/core/css/{fontawesome.css → icon-fonts/fontawesome.css} +31 -12
- data/assets/themes/j1/core/css/{fontawesome.min.css → icon-fonts/fontawesome.min.css} +0 -0
- data/assets/themes/j1/core/css/{iconify-icons.css → icon-fonts/iconify.css} +51 -38
- data/assets/themes/j1/core/css/{iconify-icons.min.css → icon-fonts/iconify.min.css} +1 -1
- data/assets/themes/j1/core/css/{material-design-icons.css → icon-fonts/materialdesign.css} +326 -244
- data/assets/themes/j1/core/css/icon-fonts/materialdesign.min.css +1 -0
- data/assets/themes/j1/core/css/{twemoji.css → icon-fonts/twemoji.css} +61 -51
- data/assets/themes/j1/core/css/{twemoji.min.css → icon-fonts/twemoji.min.css} +0 -0
- data/assets/themes/j1/core/css/{bootstrap.css → themes/bootstrap/bootstrap.css} +54 -48
- data/assets/themes/j1/core/css/themes/bootstrap/bootstrap.min.css +6 -0
- data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.css +8115 -0
- data/assets/themes/j1/core/css/themes/uno-dark/bootstrap.min.css +6 -0
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.css +22415 -0
- data/assets/themes/j1/core/css/themes/uno-light/bootstrap.min.css +8 -0
- data/assets/themes/j1/core/css/vendor.css +116 -13448
- data/assets/themes/j1/core/css/vendor.min.css +1 -7
- data/assets/themes/j1/core/js/template.js +2 -2
- data/assets/themes/j1/core/js/template.js.map +1 -1
- data/assets/themes/j1/core/js/template.min.js +1 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.js +12 -13
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js +12 -13
- data/assets/themes/j1/modules/bmd/js/bootstrap-material-design.full.js +6930 -0
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.js +46 -38
- data/assets/themes/j1/modules/bsThemeSwitcher/js/switcher.min.js +19 -13
- data/assets/themes/j1/modules/carousel/css/carousel.css +8 -9
- data/assets/themes/j1/modules/carousel/css/carousel.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.css +7 -8
- data/assets/themes/j1/modules/carousel/css/carousel_transitions.min.css +7 -9
- data/assets/themes/j1/modules/carousel/css/theme/uno.css +15 -10
- data/assets/themes/j1/modules/carousel/css/theme/uno.min.css +8 -9
- data/assets/themes/j1/modules/clipboard/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/clipboard/css/theme/uno.min.css +8 -45
- data/assets/themes/j1/modules/jquery/js/jquery.js +7 -4
- data/assets/themes/j1/modules/jquery/js/jquery.min.js +2 -2
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.css +8 -9
- data/assets/themes/j1/modules/justifiedGallery/css/theme/uno.min.css +8 -31
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.css +7 -8
- data/assets/themes/j1/modules/lightGallery/css/themes/uno.min.css +8 -10
- data/assets/themes/j1/modules/lightbox/css/lightbox.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/lightbox.min.css +11 -12
- data/assets/themes/j1/modules/lightbox/css/theme/uno.css +7 -7
- data/assets/themes/j1/modules/lightbox/css/theme/uno.min.css +7 -8
- data/assets/themes/j1/modules/lightbox/js/lightbox.js +11 -12
- data/assets/themes/j1/modules/lightbox/js/lightbox.min.js +11 -27
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.css +82 -0
- data/assets/themes/j1/modules/mdiPreviewer/css/previewer.min.css +15 -0
- data/{lib/starter_web/collections/posts/private → assets/themes/j1/modules/mdiPreviewer/js}/readme +0 -0
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.css +3 -3
- data/assets/themes/j1/modules/mmenuLight/css/theme/uno.min.css +37 -11
- data/assets/themes/j1/modules/popper/js/popper.js +1 -1
- data/assets/themes/j1/modules/popper/js/popper.js.map +1 -1
- data/assets/themes/j1/modules/popper/js/popper.min.js.map +1 -1
- data/assets/themes/j1/modules/rouge/js/select.js +25 -0
- data/assets/themes/j1/modules/rtable/LICENSE +22 -0
- data/assets/themes/j1/modules/rtable/README.md +418 -0
- data/assets/themes/j1/modules/rtable/css/tablesaw.stackonly.css +148 -0
- data/assets/themes/j1/modules/rtable/css/theme/uno.css +191 -0
- data/assets/themes/j1/modules/rtable/css/theme/uno.min.css +191 -0
- data/assets/themes/j1/modules/rtable/js/rtable.js +692 -0
- data/assets/themes/j1/modules/rtable/js/rtable.min.js +690 -0
- data/assets/themes/j1/modules/rtable/js/tablesaw-init.js +18 -0
- data/assets/themes/j1/modules/rtable/js/tablesaw.stackonly.js +2371 -0
- data/assets/themes/j1/modules/tocbot/css/theme/uno.css +27 -21
- data/assets/themes/j1/modules/tocbot/css/theme/uno.min.css +8 -82
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.css +153 -0
- data/assets/themes/j1/modules/twemoji/css/picker/twemoji-picker.min.css +19 -0
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.js +12 -13
- data/assets/themes/j1/modules/twemoji/js/picker/twemoji-picker.min.js +12 -268
- data/assets/themes/j1/modules/twemoji/js/twemoji.js +11 -20
- data/assets/themes/j1/modules/twemoji/js/twemoji.min.js +11 -17
- data/lib/j1/version.rb +1 -1
- data/lib/j1_app/j1_auth_manager/config.rb +10 -5
- data/lib/j1_app/j1_auth_manager/views/auth_manager_ui.erb +5 -5
- data/lib/starter_web/Gemfile +1 -1
- data/lib/starter_web/_config.yml +75 -9
- data/lib/starter_web/_data/apps/carousel.yml +8 -9
- data/lib/starter_web/_data/apps/defaults/carousel.yml +2 -3
- data/lib/starter_web/_data/apps/defaults/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/justified_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/defaults/lightbox.yml +1 -2
- data/lib/starter_web/_data/apps/gallery_customizer.yml +1 -2
- data/lib/starter_web/_data/apps/justified_gallery.yml +4 -5
- data/lib/starter_web/_data/apps/light_gallery.yml +1 -2
- data/lib/starter_web/_data/apps/lightbox.yml +1 -2
- data/lib/starter_web/_data/blocks/banner.yml +46 -37
- data/lib/starter_web/_data/blocks/defaults/banner.yml +17 -17
- data/lib/starter_web/_data/blocks/defaults/footer.yml +2 -3
- data/lib/starter_web/_data/blocks/defaults/panel.yml +6 -6
- data/lib/starter_web/_data/blocks/footer.yml +2 -3
- data/lib/starter_web/_data/blocks/panel.yml +43 -38
- data/lib/starter_web/_data/builder/blog_navigator.yml +1 -2
- data/lib/starter_web/_data/{template_settings.yml → j1_config.yml} +55 -5
- data/lib/starter_web/_data/layouts/app.yml +1 -2
- data/lib/starter_web/_data/layouts/blog_archive.yml +1 -2
- data/lib/starter_web/_data/layouts/collection.yml +1 -2
- data/lib/starter_web/_data/layouts/home.yml +10 -31
- data/lib/starter_web/_data/layouts/post.yml +1 -2
- data/lib/starter_web/_data/layouts/raw.yml +1 -2
- data/lib/starter_web/_data/modules/advertising.yml +0 -1
- data/lib/starter_web/_data/modules/attics.yml +0 -1
- data/lib/starter_web/_data/modules/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/back2top.yml +1 -1
- data/lib/starter_web/_data/modules/defaults/attics.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/authentication.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/cookiebar.yml +3 -1
- data/lib/starter_web/_data/modules/defaults/framer.yml +1 -3
- data/lib/starter_web/_data/modules/defaults/jekyll_search.yml +0 -1
- data/lib/starter_web/_data/modules/defaults/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/defaults/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/navigator.yml +6 -6
- data/lib/starter_web/_data/modules/defaults/stickybits.yml +1 -2
- data/lib/starter_web/_data/modules/defaults/themer.yml +10 -15
- data/lib/starter_web/_data/modules/defaults/toccer.yml +0 -1
- data/lib/starter_web/_data/modules/framer.yml +1 -2
- data/lib/starter_web/_data/modules/log4javascript.yml +4 -5
- data/lib/starter_web/_data/modules/log4r.yml +1 -2
- data/lib/starter_web/_data/modules/navigator_menu.yml +3 -3
- data/lib/starter_web/_data/modules/themer.yml +0 -17
- data/lib/starter_web/_data/private.yml +56 -108
- data/lib/starter_web/_data/resources.yml +139 -38
- data/lib/starter_web/_includes/attributes.asciidoc +194 -0
- data/lib/starter_web/_includes/documents/licenses/mit.asciidoc +19 -0
- data/lib/starter_web/{collections/posts/protected → _includes/documents}/readme +0 -0
- data/lib/starter_web/_includes/tables/jekyll_variables.asciidoc +45 -0
- data/lib/starter_web/_includes/tables/template_variables.asciidoc +46 -0
- data/lib/starter_web/assets/images/modules/attics/katie-moum-1920x1280.jpg +0 -0
- data/lib/starter_web/assets/images/modules/attics/tldr-1920x800.jpg +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/favicon.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-256x256.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-32x32.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-512x512.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1-64x64.png +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/j1.ico +0 -0
- data/lib/starter_web/assets/images/modules/icons/j1/scalable/j1.svg +31 -35
- data/{assets/README.md → lib/starter_web/collections/posts/private/_posts/readme} +0 -0
- data/lib/starter_web/collections/posts/protected/_posts/readme +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/0000-00-00-welcome-to-j1-template.adoc.erb +70 -72
- data/lib/starter_web/collections/posts/public/featured/_posts/2018-05-01-confusion-about-base-url.adoc +17 -5
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-05-01-top-open-source-static-site-generators.adoc +33 -26
- data/lib/starter_web/collections/posts/public/featured/_posts/2019-06-01-about-cookies.adoc +25 -22
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/attributes.asciidoc +38 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/{000_includes → _includes/documents}/unsplash-badge.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/featured/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/2018-11-01-docker-using-shared-folders.adoc +493 -502
- data/lib/starter_web/collections/posts/public/{featured/_posts/000_includes → series/_posts/_includes}/attributes.asciidoc +8 -18
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/documents/100-docker-using-shared-folders.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/documents/loop.sh +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/{000_includes → _includes}/tables/debug_variables.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/2020-09-11-test_post.adoc +220 -0
- data/lib/starter_web/collections/posts/public/{wikipedia/_posts/000_includes → test_posts/_posts/_includes}/attributes.asciidoc +9 -21
- data/lib/starter_web/collections/posts/public/test_posts/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/{wikipedia/_posts/000_includes → test_posts/_posts/_includes}/tables/debug_variables.asciidoc +0 -0
- data/lib/starter_web/collections/posts/public/test_posts/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +14 -5
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/attributes.asciidoc +37 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/documents/readme +0 -0
- data/lib/starter_web/collections/posts/public/wikipedia/_posts/_includes/tables/readme +0 -0
- data/lib/starter_web/package.json +2 -2
- data/lib/starter_web/pages/protected/site_search.adoc +8 -19
- data/lib/starter_web/pages/public/blog/navigator/archive.html +13 -19
- data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +14 -20
- data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +12 -13
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/100_meet_and_greet_jekyll.adoc +12 -17
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/200_preparations.adoc +14 -20
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/300_first_awesome_web.adoc +13 -19
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/attributes.asciidoc +15 -13
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/documents/100_meet_and_greet_jekyll.asciidoc +31 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/documents/200_preparations.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/documents/300_first_awesome_web.asciidoc +0 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/{000_includes → _includes}/parts.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/debug_variables.asciidoc +48 -0
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/_includes/tables/readme +0 -0
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +83 -102
- data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +42 -52
- data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +48 -60
- data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +75 -86
- data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +108 -133
- data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +28 -39
- data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +228 -92
- data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +140 -56
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/attributes.asciidoc +10 -29
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/documents/100_gistblock.asciidoc +28 -0
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_left_warning.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_bottom_right_danger.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_central_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_full_height_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_left_info.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/410_top_right_success.asciidoc +2 -2
- data/lib/starter_web/pages/public/learn/roundtrip/{000_includes → _includes}/documents/419_advanced_modals_demo.asciidoc +16 -16
- data/lib/starter_web/pages/public/learn/roundtrip/_includes/tables/readme +0 -0
- data/lib/starter_web/pages/public/learn/{whats_up.adoc → where_to_go.adoc} +27 -41
- data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +5 -11
- data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +25 -31
- data/lib/starter_web/pages/public/legal/en/400_license_agreement.adoc +3 -2
- data/lib/starter_web/pages/public/legal/en/eu/cookie.policy.asciidoc +1 -1
- data/lib/starter_web/pages/public/panels/intro_panel/panel.adoc +66 -65
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/attributes.asciidoc +22 -8
- data/lib/starter_web/pages/public/previewer/_includes/documents/licenses/mit.asciidoc +19 -0
- data/lib/starter_web/pages/public/previewer/_includes/documents/readme +0 -0
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/100_absolute_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/110_bs_grid_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/120_relative_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/500_bw_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/510_bs_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/600_md_color_palette.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/601_md_color_palette_indigo.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/mdi_icons/602_md_color_palette_pink.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/100_bs_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/100_relative_sizes.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/200_rotate.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/300_flip.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/{000_includes → _includes}/tables/twitter_emoji/400_spin_pulsed.asciidoc +1 -1
- data/lib/starter_web/pages/public/previewer/bootstrap_theme.adoc +1371 -595
- data/lib/starter_web/pages/public/previewer/iframer.adoc +2 -8
- data/lib/starter_web/pages/public/previewer/mdi_icons_preview.adoc +11 -20
- data/lib/starter_web/pages/public/previewer/rouge.adoc +200 -0
- data/lib/starter_web/pages/public/previewer/twitter_emoji_preview.adoc +23 -30
- data/lib/starter_web/pages/public/test_pages/_includes/attributes.asciidoc +49 -0
- data/lib/starter_web/pages/public/{learn/roundtrip/000_includes → test_pages/_includes}/documents/100_gistblock.asciidoc +0 -0
- data/lib/starter_web/pages/public/test_pages/_includes/tables/000_bem_specifiers.asciidoc +22 -0
- data/lib/starter_web/pages/public/test_pages/_includes/tables/000_specifier_examples.asciidoc +56 -0
- data/lib/starter_web/pages/public/test_pages/deck_of_posts.adoc +162 -0
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_ad.adoc +7 -21
- data/lib/starter_web/pages/public/{learn/examples → test_pages}/floating_div.adoc +24 -38
- data/lib/starter_web/pages/public/test_pages/nav_pagination_tester.adoc +283 -0
- data/lib/starter_web/pages/public/test_pages/page_attribute_tester.adoc +195 -0
- data/lib/starter_web/pages/public/test_pages/responsive_images.adoc +212 -0
- data/lib/starter_web/pages/public/test_pages/responsive_tables.adoc +209 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/attributes.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/100_gistblock.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_left_warning.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_bottom_right_danger.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_central_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_full_height_left_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_full_height_right_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_table_3_column.asciidoc +1 -1
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_left_info.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/410_top_right_success.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_includes/documents/419_advanced_modals_html.asciidoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/000_test_youtube_video.adoc +0 -0
- data/lib/starter_web/pages/public/{learn → test_pages}/vtutorials/100_basic_video.adoc +0 -0
- data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
- data/lib/starter_web/utilsrv/package.json +1 -1
- metadata +134 -124
- data/_includes/themes/j1/blocks/footer/boxes/about_box.proc.org +0 -40
- data/assets/data/jupyter/notebooks/_html/template.full.head.html +0 -75
- data/assets/data/jupyter/notebooks/_html/visualisation.html +0 -968
- data/assets/data/jupyter/notebooks/html/template.html +0 -50
- data/assets/data/jupyter/notebooks/html/visualisation.ok.html +0 -949
- data/assets/data/jupyter/notebooks/tutorial.ipynb +0 -169
- data/assets/data/jupyter/notebooks/visualisation.ipynb +0 -9413
- data/assets/themes/j1/core/css/bootstrap.min.css +0 -6
- data/assets/themes/j1/core/css/material-design-icons.min.css +0 -1
- data/assets/themes/j1/core/css/theme_extensions.css +0 -9812
- data/assets/themes/j1/core/css/theme_extensions.min.css +0 -1
- data/assets/themes/j1/core/css/uno.css +0 -10247
- data/assets/themes/j1/core/css/uno.min.css +0 -1
- data/assets/themes/j1/modules/backstretch/js/backstretch.min.js.org +0 -1
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css +0 -10278
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.css.map +0 -1
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css +0 -7
- data/assets/themes/j1/modules/bootstrap/css/bootstrap.min.css.map +0 -1
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js +0 -4420
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.js.map +0 -1
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js +0 -7
- data/assets/themes/j1/modules/bootstrap/js/bootstrap.min.js.map +0 -1
- data/assets/themes/j1/modules/bsDatepicker/css/datepicker.css +0 -203
- data/assets/themes/j1/modules/bsDatepicker/css/theme/uno.css +0 -235
- data/assets/themes/j1/modules/bsDatepicker/js/datepicker.js +0 -509
- data/assets/themes/j1/modules/bsDatepicker/less/datepicker.less +0 -122
- data/assets/themes/j1/modules/jqMouseWheel/README.md +0 -76
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.js +0 -221
- data/assets/themes/j1/modules/jqMouseWheel/js/jquery.mousewheel.min.js +0 -9
- data/assets/themes/j1/modules/noUISlider/LICENSE +0 -13
- data/assets/themes/j1/modules/noUISlider/css/nouislider.css +0 -260
- data/assets/themes/j1/modules/noUISlider/css/nouislider.min.css +0 -1
- data/assets/themes/j1/modules/noUISlider/js/nouislider.js +0 -2312
- data/assets/themes/j1/modules/noUISlider/js/nouislider.min.js +0 -3
- data/assets/themes/j1/modules/polyfills/js/msie.js +0 -140
- data/lib/starter_web/_data/modules/defaults/cookie_consent.yml +0 -132
- data/lib/starter_web/assets/images/modules/attics/welcome-1920x1280-bw.jpg +0 -0
- data/lib/starter_web/collections/posts/public/series/_posts/000_includes/attributes.asciidoc +0 -66
- data/lib/starter_web/pages/public/learn/kickstarter/web_in_a_day/000_includes/documents/100_meet_and_greet_jekyll.asciidoc +0 -31
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.1.asciidoc +0 -120
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour.adoc +0 -144
- data/lib/starter_web/pages/public/learn/roundtrip/000_bs_tour_api.adoc +0 -642
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/attributes.asciidoc +0 -69
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/000_includes/documents/100_buttons.asciidoc +0 -170
- data/lib/starter_web/pages/public/learn/roundtrip/510_mdb_preview/mdb_previewer.adoc +0 -52
- data/lib/starter_web/pages/public/learn/roundtrip/bs_tour.js +0 -98
@@ -8,13 +8,15 @@ index: [ Template, Roundtrip, Typography ]
|
|
8
8
|
categories: [ pages ]
|
9
9
|
|
10
10
|
permalink: /pages/public/learn/roundtrip/typography/
|
11
|
-
regenerate:
|
11
|
+
regenerate: false
|
12
12
|
|
13
13
|
toc: true
|
14
14
|
advertising: false
|
15
15
|
|
16
16
|
resources: []
|
17
17
|
resource_options:
|
18
|
+
- toccer:
|
19
|
+
collapseDepth: 3
|
18
20
|
# - ssm:
|
19
21
|
# mode: menu
|
20
22
|
- attic:
|
@@ -33,64 +35,50 @@ resource_options:
|
|
33
35
|
href: https://unsplash.com/@alicekat/portfolio
|
34
36
|
---
|
35
37
|
|
38
|
+
// Page Initializer
|
39
|
+
// =============================================================================
|
36
40
|
// Enable the Liquid Preprocessor
|
37
|
-
// -----------------------------------------------------------------------------
|
38
41
|
:page-liquid:
|
39
42
|
|
40
|
-
// Set
|
43
|
+
// Set page (local) attributes here
|
41
44
|
// -----------------------------------------------------------------------------
|
42
|
-
|
45
|
+
// :page--attr: <attr-value>
|
46
|
+
:images-dir: {imagesdir}/pages/roundtrip/100_present_images
|
43
47
|
|
44
48
|
// Load Liquid procedures
|
45
49
|
// -----------------------------------------------------------------------------
|
46
|
-
{% capture
|
47
|
-
|
48
|
-
|
49
|
-
// Initialize entry document environmental attributes
|
50
|
-
// -----------------------------------------------------------------------------
|
51
|
-
{% include {{set_env_entry_document}} %}
|
52
|
-
|
53
|
-
// Load tag, url and data attributes
|
54
|
-
// -----------------------------------------------------------------------------
|
55
|
-
include::{includedir}/attributes.asciidoc[tag=tags]
|
56
|
-
include::{includedir}/attributes.asciidoc[tag=urls]
|
57
|
-
include::{includedir}/attributes.asciidoc[tag=data]
|
50
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
58
51
|
|
59
|
-
//
|
52
|
+
// Load page attributes
|
60
53
|
// -----------------------------------------------------------------------------
|
61
|
-
|
54
|
+
{% include {{load_attributes}} scope="local" %}
|
62
55
|
|
63
56
|
|
64
57
|
// Page content
|
65
58
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
66
|
-
|
67
|
-
// Include sub-documents
|
68
|
-
// -----------------------------------------------------------------------------
|
69
|
-
|
70
|
-
|
71
59
|
== Typography
|
72
60
|
|
73
|
-
Typography serves as one the most crucial branding elements for any business.
|
74
|
-
Typography matters for any media presenting text.
|
75
|
-
role of acting not only as plain text but will also serve as
|
76
|
-
images.
|
61
|
+
Typography serves as one of the most crucial branding elements for any business.
|
62
|
+
Typography matters for any media presenting text. The text will take on an
|
63
|
+
important role of acting not only as plain text but will also serve as
|
64
|
+
something like images.
|
77
65
|
|
78
66
|
== Responsive Text
|
79
67
|
|
80
68
|
One common flaw seen in many templates and frameworks (sadly to say: the same
|
81
|
-
to Bootstrap) is a lack of support for
|
82
|
-
on a page resize fluidly, text still resizes on a fixed basis.
|
83
|
-
issue, especially for heavily text focussed pages, J1 Template
|
84
|
-
that fluidly
|
85
|
-
user.
|
69
|
+
to Bootstrap, including V4) is a lack of support for genuinely responsive text.
|
70
|
+
While elements on a page resize fluidly, the text still resizes on a fixed basis.
|
71
|
+
To avoiding this issue, especially for heavily text focussed pages, J1 Template
|
72
|
+
supports styles that fluidly scale text size and line-height to optimize
|
73
|
+
readability for the user.
|
86
74
|
|
87
|
-
Below you find an example how text behaves if defined on a fixed basis -
|
88
|
-
you'll see quite often. Change the size of your Browser Window to see
|
89
|
-
will happen in terms of responsiveness.
|
75
|
+
Below you find an example of how text behaves if defined on a fixed basis -
|
76
|
+
what you'll see quite often. Change the size of your Browser Window to see
|
77
|
+
what will happen in terms of responsiveness.
|
90
78
|
|
91
79
|
++++
|
92
80
|
<div>
|
93
|
-
<button type="button" name="toggle-r-text" class="btn btn-
|
81
|
+
<button type="button" name="toggle-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
|
94
82
|
<i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
95
83
|
Toggle rtext
|
96
84
|
</button>
|
@@ -136,17 +124,17 @@ and off Responsive Text to see the difference!
|
|
136
124
|
|
137
125
|
Responsive Text comes in five different scale factors in a range from 100 to
|
138
126
|
500. Scaling `r-text` gives you the flexibility to use `r-text` everywhere. Or
|
139
|
-
you can offer different text sizes of your Web for
|
127
|
+
you can offer different text sizes of your Web for visitors having a visual
|
140
128
|
handicap or reading disabilities.
|
141
129
|
|
142
130
|
To see `r-text` scaling in action, click on the button above to resize
|
143
|
-
the text from `r-text` level
|
144
|
-
your Browser and watch the size of this text body change to see
|
145
|
-
|
131
|
+
the text from `r-text` level 300 to 500 back and forth. Simply resize
|
132
|
+
your Browser and watch the size of this text body change to see the
|
133
|
+
responsiveness in action.
|
146
134
|
|
147
135
|
++++
|
148
136
|
<div>
|
149
|
-
<button type="button" name="scale-r-text" class="btn btn-
|
137
|
+
<button type="button" name="scale-r-text" class="btn btn-primary btn-raised btn-flex mt-3 mb-3">
|
150
138
|
<i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-bg-primary-50 mr-1"></i>
|
151
139
|
Scale rtext
|
152
140
|
</button>
|
@@ -184,21 +172,21 @@ of the text in action.
|
|
184
172
|
|
185
173
|
== Scale factors
|
186
174
|
|
187
|
-
As mentioned, `r-text` comes in five levels of size. The base of `r-text`
|
175
|
+
As mentioned, `r-text` comes in five levels of size. The base of `r-text` is
|
188
176
|
the Fibonacci numbers extracted from the Fibonacci series. These numbers are
|
189
177
|
the most popular division ratios in typography. When speaking of the golden
|
190
178
|
ratio (1: 1.618) in typography and graphic design, the Fibonacci numbers are
|
191
179
|
usually the base.
|
192
180
|
|
193
|
-
The Fibonacci series
|
194
|
-
font size accordingly.
|
181
|
+
The Fibonacci series is translated into CSS Media queries and scale a base
|
182
|
+
font size accordingly. Further, the resulting font scale series have
|
195
183
|
multipliers (scale factors) ranging from 0.5 (50%) up to 1.0 (100%) of the
|
196
184
|
base.
|
197
185
|
|
198
186
|
That way, five series are available by the five scale factors. See the following
|
199
187
|
table how `r-text` scales.
|
200
188
|
|
201
|
-
[cols="3,2,7a", options="header", role="
|
189
|
+
[cols="3,2,7a", options="header", role="rtable"]
|
202
190
|
|===============================================================================
|
203
191
|
|Property | Factor |Example text
|
204
192
|
|
@@ -252,11 +240,11 @@ explorer of the truth, the master-builder of human happiness.
|
|
252
240
|
//////////
|
253
241
|
=== Mixing font sizes
|
254
242
|
|
255
|
-
See the example below. Two cards are tied together by a title of
|
256
|
-
The
|
257
|
-
is on each and every card of such a group, it makes sense to give the
|
258
|
-
level headline a smaller font size than the
|
259
|
-
|
243
|
+
See the example below. Two cards are tied together by a title of Your Topic.
|
244
|
+
The taglines are different and focus on different things. Because the title
|
245
|
+
is on each and every card of such a group, it makes sense to give the upper
|
246
|
+
level headline a smaller font size than the tagline that decribes different
|
247
|
+
features.
|
260
248
|
|
261
249
|
To not loose the focus on reading the text, font icons are used to support what
|
262
250
|
a card decribes to get the readers orientated better. The left one has a
|
@@ -267,7 +255,7 @@ video and audio.
|
|
267
255
|
<div id="roundtrip_example_panel" class="mt-2 mb-3"></div>
|
268
256
|
++++
|
269
257
|
|
270
|
-
The
|
258
|
+
The body text is the smallest in size. On one hand to save space on other
|
271
259
|
hand the readers know in general what they can can expect to read about. To
|
272
260
|
focus the body text, it's positioned in the middle and centered for optimal
|
273
261
|
placement. A final quote text followed by a button in card footer guides the
|
@@ -278,20 +266,20 @@ choosen per chance. It is a good idea to spend some time on text and design.
|
|
278
266
|
|
279
267
|
=== Text in Action
|
280
268
|
|
281
|
-
User interfaces (UI) enable
|
269
|
+
User interfaces (UI) enable visitors to interact with a page, explore things
|
282
270
|
on their own - playing around. Presenting a service or a product in simple nav
|
283
271
|
elements may help to reduce to space needed - more can be placed on page. On
|
284
272
|
other hand, navigation elements present by playful and interactive means.
|
285
273
|
|
286
274
|
The next two simple examples shows you what type of UI's may helpful to present
|
287
|
-
a bunch of information
|
288
|
-
|
275
|
+
a bunch of information on a small footprint: tabbed text by using Bootstrap's
|
276
|
+
Nav Pills.
|
289
277
|
|
290
|
-
The design for the Bootstrap
|
278
|
+
The design for the Bootstrap nav pills were change into MD Design. As all
|
291
279
|
elements available with J1 Template, the _Meterial Design_ color palette is
|
292
280
|
used. All Bootstrap base classes can be used to colorize:
|
293
281
|
|
294
|
-
[cols="5,7a", options="header", role="
|
282
|
+
[cols="5,7a", options="header", role="rtable mb-5"]
|
295
283
|
|===============================================================================
|
296
284
|
|Property | Example
|
297
285
|
|
@@ -314,7 +302,7 @@ used. All Bootstrap base classes can be used to colorize:
|
|
314
302
|
|`nav-pills-info`
|
315
303
|
|
|
316
304
|
++++
|
317
|
-
<button type="button" class="btn btn-
|
305
|
+
<button type="button" class="btn btn-primary btn-raised btn-round">
|
318
306
|
color example
|
319
307
|
</button>
|
320
308
|
++++
|
@@ -518,9 +506,9 @@ used. All Bootstrap base classes can be used to colorize:
|
|
518
506
|
|
519
507
|
== Whats next
|
520
508
|
|
521
|
-
Have you enjoyed playing with text? We hope so. But even more can
|
509
|
+
Have you enjoyed playing with the text? We hope so. But even more, J1 can do for
|
522
510
|
your web pages. With the examples on that page, icons were used to support the
|
523
|
-
meaning what was grouped as text.
|
511
|
+
meaning of what was grouped as text.
|
524
512
|
|
525
513
|
J1 Template supports popular icons font sets like:
|
526
514
|
|
@@ -529,4 +517,4 @@ J1 Template supports popular icons font sets like:
|
|
529
517
|
* Iconify
|
530
518
|
|
531
519
|
Would you like learn more about icons? The next example page focus on what's
|
532
|
-
possible using link:{roundtrip-icon-fonts}[icon fonts].
|
520
|
+
possible using link:{roundtrip-icon-fonts}[icon fonts, {browser-window--new}].
|
@@ -12,6 +12,8 @@ regenerate: false
|
|
12
12
|
|
13
13
|
resources: [ iconify ]
|
14
14
|
resource_options:
|
15
|
+
- toccer:
|
16
|
+
collapseDepth: 3
|
15
17
|
- attic:
|
16
18
|
padding_top: 400
|
17
19
|
padding_bottom: 50
|
@@ -25,77 +27,64 @@ resource_options:
|
|
25
27
|
href: https://unsplash.com/@aquatium
|
26
28
|
---
|
27
29
|
|
30
|
+
// Page Initializer
|
31
|
+
// =============================================================================
|
28
32
|
// Enable the Liquid Preprocessor
|
29
|
-
// -----------------------------------------------------------------------------
|
30
33
|
:page-liquid:
|
31
34
|
|
32
|
-
// Set
|
35
|
+
// Set page (local) attributes here
|
33
36
|
// -----------------------------------------------------------------------------
|
34
|
-
|
37
|
+
// :page--attr: <attr-value>
|
38
|
+
:images-dir: {imagesdir}/pages/roundtrip/100_present_images
|
35
39
|
|
36
40
|
// Load Liquid procedures
|
37
41
|
// -----------------------------------------------------------------------------
|
38
|
-
{% capture
|
39
|
-
|
42
|
+
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
|
40
43
|
|
41
|
-
//
|
44
|
+
// Load page attributes
|
42
45
|
// -----------------------------------------------------------------------------
|
43
|
-
{% include {{
|
44
|
-
|
45
|
-
// Load tag, url and data attributes
|
46
|
-
// -----------------------------------------------------------------------------
|
47
|
-
include::{includedir}/attributes.asciidoc[tag=tags]
|
48
|
-
include::{includedir}/attributes.asciidoc[tag=urls]
|
49
|
-
include::{includedir}/attributes.asciidoc[tag=data]
|
50
|
-
|
51
|
-
// Set local page attributes
|
52
|
-
// -----------------------------------------------------------------------------
|
53
|
-
// :images-dir: {imagesdir}/path/to/page/images
|
46
|
+
{% include {{load_attributes}} scope="local" %}
|
54
47
|
|
55
48
|
|
56
49
|
// Page content
|
57
50
|
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
58
|
-
|
59
|
-
// Include sub-documents
|
60
|
-
// -----------------------------------------------------------------------------
|
61
|
-
|
62
51
|
== Icon Fonts
|
63
52
|
|
64
53
|
J1 Template support popular icons font sets out-of-the-box:
|
65
54
|
|
66
|
-
* link:{mdi-home}[Material Design Icons, {window}] (MDI)
|
67
|
-
* link:{fontawesome-home}[FontAwesome Icons V5, {window}] (FA)
|
68
|
-
* link:{iconify-home}[Iconify Icons, {window}] (II)
|
55
|
+
* link:{mdi-home}[Material Design Icons, {browser-window--new}] (MDI)
|
56
|
+
* link:{fontawesome-home}[FontAwesome Icons V5, {browser-window--new}] (FA)
|
57
|
+
* link:{iconify-home}[Iconify Icons, {browser-window--new}] (II)
|
69
58
|
|
70
59
|
The icon sets MDI and FA are very good in design and have a rich set of
|
71
60
|
different icons for many categories used for the Web. See below some details
|
72
61
|
for <<Material Design Icons>> and <<FontAwesome Icons>>.
|
73
62
|
|
74
|
-
Iconify
|
75
|
-
loaded over the
|
76
|
-
|
63
|
+
Iconify icons is not a locally stored icon-set like MDI or FA. All icons are
|
64
|
+
loaded over the Internet using the so-called *Unified OpenSource Icon
|
65
|
+
Framework*. See section <<Iconify Icons>> for more information.
|
77
66
|
|
78
67
|
|
79
68
|
== Material Design Icons
|
80
69
|
|
81
|
-
The primary icon
|
82
|
-
because it is
|
83
|
-
|
70
|
+
The primary icon-set for J1 Template is link:{mdi-home}[Material Design Icons, {browser-window--new}],
|
71
|
+
because it is extremely rich set providing more than 3300+ icons (v3.3.92). From a design
|
72
|
+
perspective, _MDI_ has an excellent Material Design support an comes with the
|
84
73
|
original icon set created by _Google_ build-in.
|
85
74
|
|
86
|
-
_Material Design Icons_ (MDI) is a
|
87
|
-
that is based on
|
88
|
-
project to create an increased
|
75
|
+
_Material Design Icons_ (MDI) is a beneficial design resource for Web Design
|
76
|
+
that is based on _Google_'s Material Design. _MDI_ is a community-driven
|
77
|
+
project to create an increased number of icons based on _Google_'s official repository
|
89
78
|
and MD style specification.
|
90
79
|
|
91
80
|
.Material Design Icons
|
92
|
-
[cols="2a,3a,4a,^", options="header", width="100%", role="
|
81
|
+
[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
|
93
82
|
|===============================================================================
|
94
83
|
|Size |Modifier |Markup |Render
|
95
84
|
|
96
85
|
|1x
|
97
86
|
|no modifier set
|
98
|
-
|All `icon_name` can be found on the Preview page for
|
87
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
|
99
88
|
[source, adoc, role="noclip"]
|
100
89
|
----
|
101
90
|
mdi:account[1x]
|
@@ -104,7 +93,7 @@ mdi:account[1x]
|
|
104
93
|
|
105
94
|
|3x
|
106
95
|
|no modifier set
|
107
|
-
|All `icon_name` can be found on the Preview page for
|
96
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
|
108
97
|
[source, adoc, role="noclip"]
|
109
98
|
----
|
110
99
|
mdi:account[3x]
|
@@ -113,7 +102,7 @@ mdi:account[3x]
|
|
113
102
|
|
114
103
|
|5x
|
115
104
|
|no modifier set
|
116
|
-
|All `icon_name` can be found on the Preview page for
|
105
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer
|
117
106
|
[source, adoc, role="noclip"]
|
118
107
|
----
|
119
108
|
mdi:account[5x]
|
@@ -141,7 +130,7 @@ mdi:account[5x mdi-rotate-315]
|
|
141
130
|
|5x
|
142
131
|
|`mdi-light` +
|
143
132
|
`mdi-flip-v`
|
144
|
-
|
|
133
|
+
|Colour set to MDI Light (Grey) and flipped vertical
|
145
134
|
[source, adoc, role="noclip"]
|
146
135
|
----
|
147
136
|
mdi:alert[5x mdi-light mdi-flip-v]
|
@@ -150,7 +139,7 @@ mdi:alert[5x mdi-light mdi-flip-v]
|
|
150
139
|
|
151
140
|
|5x
|
152
141
|
|`md-indigo`
|
153
|
-
|
|
142
|
+
|Colour set to MDI Indigo
|
154
143
|
[source, adoc, role="noclip"]
|
155
144
|
----
|
156
145
|
mdi:alert[5x md-indigo]
|
@@ -159,7 +148,7 @@ mdi:alert[5x md-indigo]
|
|
159
148
|
|
160
149
|
|5x
|
161
150
|
|`md-pink`
|
162
|
-
|
|
151
|
+
|Colour set to MDI Pink
|
163
152
|
[source, adoc, role="noclip"]
|
164
153
|
----
|
165
154
|
mdi:alert[5x md-pink]
|
@@ -178,7 +167,7 @@ mdi:loading[5x mdi-spin]
|
|
178
167
|
|5x
|
179
168
|
|`md-red-900` +
|
180
169
|
`mdi-pulsed`
|
181
|
-
|
|
170
|
+
|Colour set to MDI Dark Red and added animation of type Pulsed
|
182
171
|
[source, adoc, role="noclip"]
|
183
172
|
----
|
184
173
|
mdi:heart[5x md-red-900 mdi-pulsed]
|
@@ -188,7 +177,7 @@ mdi:heart[5x md-red-900 mdi-pulsed]
|
|
188
177
|
|===============================================================================
|
189
178
|
|
190
179
|
NOTE: Using Material Design Icons with Asciidoc is quite easy as an inline macro
|
191
|
-
`mdi:` is
|
180
|
+
`mdi:` is available to place icons where ever you want. See more about
|
192
181
|
this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
|
193
182
|
|
194
183
|
_MDI_ is a growing collection to allow designers and developers targeting
|
@@ -199,14 +188,14 @@ the official set created by _Google_.
|
|
199
188
|
_J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
|
200
189
|
icon set is fully integrated and can be used out-of-the-box.
|
201
190
|
|
202
|
-
For MDI a
|
203
|
-
J1
|
204
|
-
link:{previewer-mdi}[Preview Page, {window}] and check-out what's
|
191
|
+
For MDI a Preview Page is available to explore what can be done base on the
|
192
|
+
J1 implementation regarding sizes, colours, animations etc. Go for the
|
193
|
+
link:{previewer-mdi}[Preview Page, {browser-window--new}] and check-out what's
|
205
194
|
possible using MDI font icons!
|
206
195
|
|
207
196
|
== FontAwesome Icons
|
208
197
|
|
209
|
-
FontAwesome is a font and icon toolkit based on CSS. It was
|
198
|
+
FontAwesome is a font and icon toolkit based on CSS. It was initially created
|
210
199
|
by Dave Gandy. The previous version 4 was mainly for the use with Twitter
|
211
200
|
Bootstrap V3. The new version V5, released in December 2017, is focussing all
|
212
201
|
frameworks used for web development. Today, FA comes with 2300+ icons included.
|
@@ -214,8 +203,8 @@ frameworks used for web development. Today, FA comes with 2300+ icons included.
|
|
214
203
|
|
215
204
|
[NOTE]
|
216
205
|
====
|
217
|
-
Since version 5, the icon set comes in two packages: FontAwesome
|
218
|
-
and the
|
206
|
+
Since version 5, the icon set comes in two packages: FontAwesome Free
|
207
|
+
and the proprietary FontAwesome Pro version available for a license fee.
|
219
208
|
|
220
209
|
The free versions (all releases up to 4 and the free version for 5) are
|
221
210
|
available under SIL Open Font License 1.1, Creative Commons Attribution 4.0,
|
@@ -223,13 +212,13 @@ and the MIT License.
|
|
223
212
|
====
|
224
213
|
|
225
214
|
.FontAwesome Icons
|
226
|
-
[cols="2a,3a,4a,^", options="header", width="100%", role="
|
215
|
+
[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
|
227
216
|
|===============================================================================
|
228
217
|
|Size |Modifier |Markup |Render
|
229
218
|
|
230
219
|
|1x
|
231
220
|
|no modifier set
|
232
|
-
|All `icon_name` can be found on the Preview page for
|
221
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer
|
233
222
|
[source, adoc, role="noclip"]
|
234
223
|
----
|
235
224
|
fas:user[1x]
|
@@ -238,7 +227,7 @@ fas:user[1x]
|
|
238
227
|
|
239
228
|
|3x
|
240
229
|
|no modifier set
|
241
|
-
|All `icon_name` can be found on the Preview page for
|
230
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer
|
242
231
|
[source, adoc, role="noclip"]
|
243
232
|
----
|
244
233
|
fas:user[3x]
|
@@ -247,7 +236,7 @@ fas:user[3x]
|
|
247
236
|
|
248
237
|
|5x
|
249
238
|
|no modifier set
|
250
|
-
|All `icon_name` can be found on the Preview page for
|
239
|
+
|All `icon_name` can be found on the Preview page for MDI Icon Previewer
|
251
240
|
[source, adoc, role="noclip"]
|
252
241
|
----
|
253
242
|
fas:user[5x]
|
@@ -266,7 +255,7 @@ fas:user[5x fa-rotate-90]
|
|
266
255
|
|5x
|
267
256
|
|`mdi-light` +
|
268
257
|
`fa-flip-v`
|
269
|
-
|
|
258
|
+
|Colour set to MDI Light (Grey) and flipped vertical
|
270
259
|
[source, adoc, role="noclip"]
|
271
260
|
----
|
272
261
|
fas:exclamation-triangle[5x mdi-light fa-flip-v]
|
@@ -275,7 +264,7 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
|
|
275
264
|
|
276
265
|
|5x
|
277
266
|
|`md-indigo`
|
278
|
-
|
|
267
|
+
|Colour set to MDI Indigo
|
279
268
|
[source, adoc, role="noclip"]
|
280
269
|
----
|
281
270
|
fas:alert[5x md-indigo]
|
@@ -284,7 +273,7 @@ fas:alert[5x md-indigo]
|
|
284
273
|
|
285
274
|
|5x
|
286
275
|
|`md-pink`
|
287
|
-
|
|
276
|
+
|Colour set to MDI Pink
|
288
277
|
[source, adoc, role="noclip"]
|
289
278
|
----
|
290
279
|
fas:alert[5x md-pink]
|
@@ -303,7 +292,7 @@ fas:circle-notch[5x fa-spin]
|
|
303
292
|
|5x
|
304
293
|
|`md-red-900` +
|
305
294
|
`md-red-900` `fa-pulsed`
|
306
|
-
|
|
295
|
+
|Colour set to MDI Dark Red and added animation of type Pulsed
|
307
296
|
[source, adoc, role="noclip"]
|
308
297
|
----
|
309
298
|
fas:heart[5x md-red-900 fa-pulsed]
|
@@ -313,57 +302,57 @@ fas:heart[5x md-red-900 fa-pulsed]
|
|
313
302
|
|===============================================================================
|
314
303
|
|
315
304
|
NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
|
316
|
-
`fas:` and `fas:` are
|
305
|
+
`fas:` and `fas:` are available to place icons where ever you want. See more about
|
317
306
|
this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
|
318
307
|
|
319
|
-
FontAwesome V5 meets the Material Design idea (of _Google_) and in
|
320
|
-
Version 4, the current version is much more than a face-lifting.
|
321
|
-
comes with more than 2300+ icons but many of them are available with the
|
322
|
-
license only. For the
|
308
|
+
FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
|
309
|
+
to Version 4, the current version is much more than a face-lifting. Version 5
|
310
|
+
comes with more than 2300+ icons, but many of them are available with the Pro
|
311
|
+
license only. For the Free version, only a subset of 900+ icons is available.
|
323
312
|
|
324
313
|
NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
|
325
|
-
the
|
326
|
-
Already existing styles like `fa-flip-vertical`
|
327
|
-
as well. See all
|
328
|
-
link:{previewer-mdi}[Preview Page, {window}].
|
314
|
+
the same classes (and their respective names) as for other Font Icon sets.
|
315
|
+
Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
|
316
|
+
as well. See all types that can be used with the MDI
|
317
|
+
link:{previewer-mdi}[Preview Page, {browser-window--new}].
|
329
318
|
|
330
319
|
You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
|
331
|
-
{window}]. _FontAwesome_ V5 is fully integrated - no need for
|
332
|
-
resources to load. But in
|
333
|
-
noticed.
|
320
|
+
{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
|
321
|
+
additional resources to load. But in comparison to Version 4, a lot of
|
322
|
+
differences needs to be noticed.
|
334
323
|
|
335
324
|
If you haven't used V5 yet, it is highly recommended to visit the
|
336
|
-
link:{fontawesome-get-started}[Get started, {window}] pages to learn
|
325
|
+
link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
|
337
326
|
the basics and features and styles.
|
338
327
|
|
339
328
|
|
340
329
|
== Iconify Icons
|
341
330
|
|
342
|
-
MDI and FA are
|
343
|
-
icons are missing in one of these fonts like specific
|
331
|
+
MDI and FA are rich icon-sets but designed for general use. Sometimes
|
332
|
+
icons are missing in one of these fonts like specific brand or theme
|
344
333
|
icons.
|
345
334
|
|
346
|
-
An interesting solution for using font icons from a
|
347
|
-
link:{iconify-home}[Iconify, {window}]. Iconify is a so-called unified
|
348
|
-
|
335
|
+
An interesting solution for using font icons from a remote repository is
|
336
|
+
link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called unified
|
337
|
+
OpenSource icon framework that makes it possible to use icons from different
|
349
338
|
icon sets using one syntax.
|
350
339
|
|
351
340
|
To access that framework, a Javascript client is needed. For J1 Template, the
|
352
341
|
client is available with the JS assets (/assets/themes/j1/extensions/iconify)
|
353
342
|
and is loaded per default. To see what icon sets available with that framework,
|
354
|
-
check the page link:{iconify-icon-sets}[Iconify Icon Sets, {window}].
|
343
|
+
check the page link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
|
355
344
|
|
356
345
|
Currently, over 40,000 vector icons are available for many different use cases.
|
357
346
|
Find some examples below.
|
358
347
|
|
359
348
|
.Brand Icons
|
360
|
-
[cols="2a,3a,4a,^", options="header", width="100%", role="
|
349
|
+
[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
|
361
350
|
|===============================================================================
|
362
351
|
|Size |Modifier |Markup |Render
|
363
352
|
|
364
353
|
|3x
|
365
354
|
|no modifier set
|
366
|
-
|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
|
355
|
+
|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
|
367
356
|
[source, adoc, role="noclip"]
|
368
357
|
----
|
369
358
|
iconify:logos:opensource[3x]
|
@@ -372,7 +361,7 @@ iconify:logos:opensource[3x]
|
|
372
361
|
|
373
362
|
|5x
|
374
363
|
|no modifier set
|
375
|
-
|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {window}]
|
364
|
+
|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
|
376
365
|
[source, adoc, role="noclip"]
|
377
366
|
----
|
378
367
|
iconify:logos:atom[5x]
|
@@ -382,13 +371,13 @@ iconify:logos:atom[5x]
|
|
382
371
|
|===============================================================================
|
383
372
|
|
384
373
|
.Medical Icons
|
385
|
-
[cols="2a,3a,4a,^", options="header", width="100%", role="
|
374
|
+
[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
|
386
375
|
|===============================================================================
|
387
376
|
|Size |Modifier |Markup |Render
|
388
377
|
|
389
378
|
|3x
|
390
379
|
|no modifier set
|
391
|
-
|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {window}]
|
380
|
+
|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
|
392
381
|
[source, adoc, role="noclip"]
|
393
382
|
----
|
394
383
|
iconify:medical-icon:i-ear-nose-throat[3x]
|
@@ -397,7 +386,7 @@ iconify:medical-icon:i-ear-nose-throat[3x]
|
|
397
386
|
|
398
387
|
|5x
|
399
388
|
|`md-red-900`
|
400
|
-
|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {window}]
|
389
|
+
|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
|
401
390
|
[source, adoc, role="noclip"]
|
402
391
|
----
|
403
392
|
iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
|
@@ -407,16 +396,16 @@ iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
|
|
407
396
|
|===============================================================================
|
408
397
|
|
409
398
|
NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro
|
410
|
-
`iconify:` is
|
399
|
+
`iconify:` is available to place icons where ever you want. See more about
|
411
400
|
this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
|
412
401
|
|
413
402
|
== Whats next
|
414
403
|
|
415
|
-
|
416
|
-
manipulating
|
404
|
+
Have you've enjoyed the possibilities J1 offers for managing and
|
405
|
+
manipulating Font Icons. Do you think these Icons sets can fit your needs?
|
417
406
|
|
418
|
-
Using Iconify, for all topics
|
419
|
-
|
407
|
+
Using Iconify, for all topics an icon font should be found. And it's simple,
|
408
|
+
isn't it?
|
420
409
|
|
421
410
|
We hope so.
|
422
411
|
|